HTML5在javascript中设置音频源无法正常工作

Question

由于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>

它工作,但我需要我需要在代码中设置它,而不是静态提供.

Answer 1

使用.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());
}