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

Answer 2

在源元素上设置src属性后，调用load（）然后在audio元素上播放（）。（或者，如果您设置了autoplay属性，则只需加载（）。

Answer 3

你试过document.getElementById("oggSource").src = 'OggFormat.ogg'等吗？

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

3 个答案: