javascript 中的 HTML5 设置音频源不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7928562/
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
HTML5 setting audio source in javascript not working
提问by TCM
Due to HTML5 browser formats tricks I have to put fallback audio formats also in audio format. I want to set the src of source in audio programmatically but it is not working.
由于 HTML5 浏览器格式技巧，我必须将后备音频格式也放入音频格式。我想以编程方式在音频中设置源的 src 但它不起作用。
This is my HTML code:
这是我的 HTML 代码：
<audio id="audioPlayer" width="400" height="30" controls="controls">
<source id="oggSource" type="audio/ogg" />
<source id="mp3Source" type="audio/mp3" />
</audio>
Then in javascript using jquery I set the source for each of them (I have one audio tag and many mp3 on page and based on some event I want to change the source of audio tag) so I can't specify src directly in audio mainly because I need fallback support and also I need dynamism.
然后在使用 jquery 的 javascript 中，我为它们中的每一个设置了源（我在页面上有一个音频标签和许多 mp3，并且基于某些事件我想更改音频标签的源）所以我不能直接在音频中直接指定 src因为我需要后备支持，而且我需要活力。
Using jquery I manipulate the src:
使用 jquery 我操作 src：
$('#oggSource').attr('src', 'OggFormat.ogg');
$('#mp3Source').attr('src','Mp3Format.mp3');
But this however doesn't work. Any idea why?
但这无论如何都行不通。知道为什么吗？
If I use:
如果我使用：
<audio id="audioPlayer" width="400" height="30" controls="controls">
<source id="oggSource" type="audio/ogg" src="OggFormat.ogg" />
<source id="mp3Source" type="audio/mp3" src="Mp3Format.mp3"/>
</audio>
it works but as I need I need to set it in code and not provide statically.
它有效，但因为我需要我需要在代码中设置它而不是静态提供。
回答by pimvdb
Using .detach().appendTo(parent)seems to work: http://jsfiddle.net/pimvdb/b7Jgh/.
使用.detach().appendTo(parent)似乎有效：http: //jsfiddle.net/pimvdb/b7Jgh/。
$("#oggSource").attr("src", "foo.ogg").detach().appendTo("#audioPlayer");
I guess the browser only starts loading (and playing with autoplay) if a <source>element is added, not when it is just modified. I'm not sure why though, but appending it after detaching works.
我猜浏览器只有在添加元素时才开始加载（和播放autoplay），而不是在刚刚修改<source>元素时。我不知道为什么，但在分离工作后附加它。
Edit:You can also directly do .appendTosince an element is unique (i.e. it has to be detached anyway): http://jsfiddle.net/pimvdb/b7Jgh/6/.
编辑：您也可以直接执行，.appendTo因为元素是唯一的（即无论如何都必须将其分离）：http: //jsfiddle.net/pimvdb/b7Jgh/6/。
function updateSource(source, src) {
source = $(source);
source.attr("src", src).appendTo(source.parent());
}
回答by Shadow2531
After you set the src attribute on the source element, call load() and then play() on the audio element. (Or, just load() if you have the autoplay attribute set.)
在源元素上设置 src 属性后，在音频元素上调用 load() 和 play() 。（或者，如果您设置了自动播放属性，则只需 load()。）
回答by Ian Devlin
Have you tried document.getElementById("oggSource").src = 'OggFormat.ogg'etc.?
你有没有尝试过document.getElementById("oggSource").src = 'OggFormat.ogg'等？
