我有多个音频文件,要根据用户选择流式传输。我怎么做?到目前为止,这是我所拥有的,而且似乎不起作用。
*更新:进行了一些更改,现在声称audio.load();
不是一个函数。谁能告诉我为什么呢?本规范已更新以反射(reflect)更改。
JavaScript:
function updateSource(){
var audio = document.getElementById('oggSource');
audio.src =
'audio/ogg/' +
document.getElementById('song1').getAttribute('data-value');
audio.load();
}
HTML:
<audio id="audio" controls="controls">
<source id="oggSource" src="" type="audio/ogg"></source>
<source id="mp3Source" type="audio/mp3"></source>
Your browser does not support the audio format.
</audio>
<ul style="list-style: none">
<li>Sunday May 27, 2012
<ul style="display: none">
<li id="song1" data-value="song1.ogg">
<button onclick="updateSource();">Item1</button>
</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
</ul>
Item2
和Item3
当我单击它们时,我想播放不同的音频文件。
最佳答案
试试这个片段
list.onclick = function(e) {
e.preventDefault();
var elm = e.target;
var audio = document.getElementById('audio');
var source = document.getElementById('audioSource');
source.src = elm.getAttribute('data-value');
audio.load(); //call this to just preload the audio without playing
audio.play(); //call this to play the song right away
};
<ul style="list-style: none">
<li>Audio Files
<ul id="list">
<li><a href="#" data-value="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">Death_Becomes_Fur.oga</a></li>
<li><a href="#" data-value="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4">Death_Becomes_Fur.mp4</a></li>
<li><a href="#" data-value="http://media.w3.org/2010/11/rrs006.oga">rrs006.oga</a></li>
<li><a href="#" data-value="http://media.w3.org/2010/05/sound/sound_90.mp3">sound_90.mp3</a></li>
</ul>
</li>
</ul>
<audio id="audio" controls="controls">
<source id="audioSource" src=""></source>
Your browser does not support the audio format.
</audio>
JSFiddle http://jsfiddle.net/jm6ky/2/
关于javascript - 用javascript更改<audio> src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59240721/