使用 javascript 更改 <audio> src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10792163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change <audio> src with javascript
提问by Jmh2013
I have multiple audio files that I want to stream based on the user selects. How do I do that? This is what I have so far and it doesn't seem to work.
我有多个音频文件要根据用户选择进行流式传输。我怎么做？这是我到目前为止所拥有的，它似乎不起作用。
*UPDATE: Made a few changes and now its claiming that audio.load();is not a function. Can anyone tell me why that is? The Code is updated to reflect the changes.
*更新：做了一些更改，现在它声称这audio.load();不是一个函数。谁能告诉我这是为什么？准则已更新以反映更改。
JavaScript:
JavaScript：
function updateSource(){
var audio = document.getElementById('oggSource');
audio.src =
'audio/ogg/' +
document.getElementById('song1').getAttribute('data-value');
audio.load();
}
HTML:
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>
Item2and Item3I will want to play a different audio file when they are clicked on.
Item2和Item3我将要扮演不同的音频文件，他们点击时。
回答by Vitim.us
Try this snippet
试试这个片段
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/
JSFiddle http://jsfiddle.net/jm6ky/2/
回答by u283863
Try this:
尝试这个：
Replace:
代替：
audio.load();
with:
和：
audio.play();
回答by Giampiero Poggi
with jQuery:
使用 jQuery：
$("#playerSource").attr("src", "new_src");
var audio = $("#player");
audio[0].pause();
audio[0].load();//suspends and restores all audio element
if (isAutoplay)
audio[0].play();
回答by Vadorequest
Here is how I did it using React and CJSX (Coffee JSX) based on Vitim.ussolution.
Using componentWillReceivePropsI was able to detect every property changes. Then I just check whether the url has changed between the future props and the current one. And voilà.
这是我如何使用基于Vitim.us解决方案的React 和 CJSX（Coffee JSX）来实现的。使用componentWillReceiveProps我能够检测到每个属性的变化。然后我只检查 url 是否在未来的道具和当前的道具之间发生了变化。瞧。
@propTypes =
element: React.PropTypes.shape({
version: React.PropTypes.number
params:
React.PropTypes.shape(
url: React.PropTypes.string.isRequired
filename: React.PropTypes.string.isRequired
title: React.PropTypes.string.isRequired
ext: React.PropTypes.string.isRequired
).isRequired
}).isRequired
componentWillReceiveProps: (nextProps) ->
element = ReactDOM.findDOMNode(this)
audio = element.querySelector('audio')
source = audio.querySelector('source')
# When the url changes, we refresh the component manually so it reloads the loaded file
if nextProps.element.params?.filename? and
nextProps.element.params.url isnt @props.element.params.url
source.src = nextProps.element.params.url
audio.load()
I had to do it this way, because even a change of state or a force redraw didn't work.
我不得不这样做，因为即使状态改变或强制重绘也不起作用。
回答by Musa
If you are storing metadata in a tag use data attributes eg.
如果您将元数据存储在标签中，请使用数据属性，例如。
<li id="song1" data-value="song1.ogg"><button onclick="updateSource()">Item1</button></li>
Now use the attribute to get the name of the song
现在使用该属性来获取歌曲的名称
var audio = document.getElementById('audio');
audio.src='audio/ogg/' + document.getElementById('song1').getAttribute('data-value');
audio.load();
回答by Satya
change this
改变这个
audio.src='audio/ogg/' + document.getElementById(song1.ogg);
to
到
audio.src='audio/ogg/' + document.getElementById('song1');
