动态更改源后加载音频元素

我的页面正文中有几个音频元素。 它们看起来像这样。

当用户将鼠标hover在某些div上时，音频会播放。 这是触发它的代码。

 var audio = $("#sound1")[0]; $("#ChoiceA").mouseenter(function () { audio.play(); }); var audio2 = $("#sound2")[0]; $("#ChoiceB").mouseenter(function () { audio2.play(); }); 

上面的一切都很好。 当我尝试在进行ajax调用后动态更改源元素时，会出现问题。 这是我的javascript，实现了这一点。

 var src1 = "../../Content/Audio/" + data.nouns[0].Audio1 + ".mp3"; var src2 = "../../Content/Audio/" + data.nouns[1].Audio1 + ".mp3"; $("#sound1source").attr("src", src1); $("#sound2source").attr("src", src2); 

当我在触发ajax调用后检查页面以更改音频元素的源路径时，我看到源已更新。 没问题。 问题是新路径指向的音频不播放。

在打猎之后我在w3.org上找到了这个注释“当元素已经插入video或音频元素时动态修改源元素及其属性将没有任何效果。要改变正在播放的内容，要么只使用src属性直接调用media元素，或在操作源元素后调用media元素上的load（）方法。“

关于w3.org的评论似乎是相关的所以我试着调用$（’＃sound1’）。load（）以及$（’＃sound1source’）。load（）。 都没有解决我的问题。

谁能告诉我我做错了什么？ 如果我需要在动态更改src后再次加载audio元素，我该怎么做？

————- ————-更新

根据Swatkins的建议，当用户将鼠标hover在目标div上时，我创建了以下函数来创建音频标记。 不幸的是，这也没有解决问题。

  function attachAudio1(src) { $('#audio1').remove(); var audio = $(' 

Answer 1

你应该像这样调用load：

 var audio = $("#sound1")[0]; $("#ChoiceA").mouseenter(function () { audio.load(); audio.play(); }); var audio2 = $("#sound2")[0]; $("#ChoiceB").mouseenter(function () { audio.load(); audio2.play(); }); 

没有像上面那样测试它，但是先测试一下这个单独的函数看起来像这样：

这对我来说很好吗？

---

编辑：添加一个小提琴，也许这将帮助你解决这个问题？

http://jsfiddle.net/Z3VrV/

Answer 2

这很棘手。 我会尝试替换整个元素而不是仅仅更改它的源代码。 这样，新的音频元素尚未添加到页面中，因此将强制加载该文件。

Answer 3

load（）后跟play（）马上导致麻烦。 尝试按照https://stackoverflow.com/a/8705478/1374208中的建议播放音频之前尝试侦听canplay事件