web-dev-qa-db-ja.com

JavaScriptで音声要素を動的に作成する

<div class="audio-player" id="song"></div>の間に動的に音声タグを作成する必要があります

作成する必要があります：

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

in：<div class="audio-player" id="song"></div>私にとって非常に重要なものを助けてください

javascriptaudioappendchild
14
Samuel Scott

複数の方法でそれを行うことができます。ここにあるいくつかの：

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">');
13
blex