相关疑难解决方法(0)

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

      <audio id="sound1" preload="auto">
      <source id="sound1source" src="../../Content/Audio/gau.mp3">
      //add .ogg here later
      </audio>
      <audio id="sound2" preload="auto">
      <source id="sound2source" src="../../Content/Audio/mah.mp3">
      //add .ogg here later
      </audio>

当用户将鼠标悬停在某些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 上找到了这个注释"当元素已插入视频或音频元素时动态修改源元素及其属性将无效.要更改正在播放的内容,只需使用src属性直接调用media元素,或在操作源元素后调用media元素上的load()方法."

关于w3.org的评论似乎是相关的所以我试着调用$('#sound1').load()以及$('#sound1source').load().都没有解决我的问题.

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

------------- -------------更新

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

    function attachAudio1(src) {

        $('#audio1').remove();
        var …