在 Javascript 中动态创建音频元素

Posted 2023-05-09

【中文标题】在 Javascript 中动态创建音频元素

【英文标题】：Create Audio element dynamically in Javascript

【发布时间】：2016-10-10 15:39:29

【问题描述】：

我需要在<div class="audio-player" id="song"></div>之间动态创建一个音频标签

需要创建：

<audio id="audio-player" controls="controls" src="media/Blue Browne.mp3" type="audio/mpeg">

在： <div class="audio-player" id="song"></div> 请帮助它对我来说非常重要

【问题讨论】：

那么您面临的问题是什么？

【参考方案1】：

您可以通过多种方式做到这一点。以下是一些：

使用innerhtml

如果您想替换所有内部 HTML，并且不关心对元素的引用，请使用此选项。

document.getElementById('song').innerHTML = '<audio id="audio-player" controls="controls" src="media/Blue Browne.mp3" type="audio/mpeg">';

使用appendChild

如果你想引用你的音频元素，或者其他已经存在的元素，请使用它。

var sound      = document.createElement('audio');
sound.id       = 'audio-player';
sound.controls = 'controls';
sound.src      = 'media/Blue Browne.mp3';
sound.type     = 'audio/mpeg';
document.getElementById('song').appendChild(sound);

使用insertAdjacentHTML

如果您在其中有其他元素之前引用过并且想要保留引用，但现在不关心对 audio 元素的引用，请使用此方法。

document.getElementById('song').insertAdjacentHTML('beforeend', '<audio id="audio-player" controls="controls" src="media/Blue Browne.mp3" type="audio/mpeg">');