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

Question

由于HTML5浏览器格式的技巧，我不得不在audio标签中放置回退音频格式。我想通过编程方式设置audio标签中source标签的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>

它有效，但我需要在代码中设置它而不是静态提供。

- TCM

Answer 1

使用 .detach().appendTo(parent) 似乎可行：http://jsfiddle.net/pimvdb/b7Jgh/。

$("#oggSource").attr("src", "foo.ogg").detach().appendTo("#audioPlayer");

我猜测只有在添加了<source>元素时，浏览器才开始加载（并使用autoplay），而不是在修改时。虽然我不确定为什么，但是在分离后附加它可以起作用。

---

编辑：由于元素是唯一的（即必须进行分离），您也可以直接使用 .appendTo： http://jsfiddle.net/pimvdb/b7Jgh/6/。

function updateSource(source, src) {
    source = $(source);
    source.attr("src", src).appendTo(source.parent());
}

- pimvdb

---

太好了！我浪费了1个小时在这上面，以为自己做错了什么 :) - TCM

在安卓浏览器上无法运行，但在安卓的Chrome浏览器上可以正常工作。 - Dave

Answer 2

在设置source元素的src属性后，调用audio元素上的load()方法，然后调用play()方法。（如果已经设置了autoplay属性，则只需调用load()方法。）

- Shadow2531

---

在Chrome中无法工作。调用load()没有任何反应，调用play()时，$('#audioPlayer').play()抛出了一个异常，表示不存在名为play的方法。 - TCM

@Anthony，你必须在元素本身上调用这些方法，而不是 Jquery 对象。也许 https://dev59.com/93VD5IYBdhLWcg3wOo5h 是你所需要的？我不使用 Jquery，所以不太清楚。 - Shadow2531

嗯...好的...在这种情况下，在jQuery上调用它不起作用。 - TCM

Answer 3

你尝试过类似 document.getElementById("oggSource").src = 'OggFormat.ogg' 的代码吗？

- Ian Devlin