由于 HTML5 浏览器格式技巧,我必须将后备音频格式也放入音频格式中。我想以编程方式在音频中设置源的 src,但它不起作用。
这是我的 HTML 代码:
<audio id="audioPlayer" width="400" height="30" controls="controls">
<source id="oggSource" type="audio/ogg" />
<source id="mp3Source" type="audio/mp3" />
</audio>
然后在 javascript 中使用 jquery 我为它们中的每一个设置源(我有一个音频标签和页面上的许多 mp3 并且基于某些事件我想更改音频标签的源)所以我不能直接指定 src在音频中,主要是因为我需要后备支持,而且我需要动态。
我使用 jquery 操作 src:
$('#oggSource').attr('src', 'OggFormat.ogg');
$('#mp3Source').attr('src','Mp3Format.mp3');
但是这不起作用。知道为什么吗?
如果我使用:
<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>
它可以工作,但根据我的需要,我需要在代码中设置它而不是静态提供。
最佳答案
使用 .detach().appendTo(parent)
似乎有效:http://jsfiddle.net/pimvdb/b7Jgh/ .
$("#oggSource").attr("src", "foo.ogg").detach().appendTo("#audioPlayer");
我猜浏览器只有在出现 autoplay
时才开始加载(并播放 <source>
)元素是添加的,而不是刚刚修改的时候。我不确定为什么,但在分离工作后附加它。
编辑:您也可以直接执行 .appendTo
因为一个元素是唯一的(即它无论如何都必须分离):http://jsfiddle.net/pimvdb/b7Jgh/6/ .
function updateSource(source, src) {
source = $(source);
source.attr("src", src).appendTo(source.parent());
}
关于javascript - HTML5 在 javascript 中设置音频源不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7928562/