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

我有几个音频元素出现在我的页面主体中。它们看起来像这样

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

上面的一切都很好。我的问题发生在我尝试在进行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调用以更改音频元素的源路径后检查页面时，我看到源已更新。没问题。问题是新路径指向的音频无法播放

在四处搜索之后，我发现了关于“当源元素已经插入到视频或音频元素中时，动态修改源元素及其属性将无效。要更改播放内容，请直接在媒体元素上使用src属性，或者调用load（）在操作源元素后，在媒体元素上的方法。“

org上的注释似乎是相关的，所以我尝试调用$（'sound1'）.load（）和$（'sound1source'）.load（）。两者都没有解决我的问题

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

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

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

    function attachAudio1(src) {

        $('#audio1').remove();
        var audio = $('<audio>');
        audio.attr("src", src);
        audio.attr("id", "audio1");
        audio.appendTo('body');
        attachPlayAction();
    };

    function attachPlayAction() {
        var audio = $("#audio1")[0];
        $('#ChoiceA').live('mouseenter', function () {
            audio.play();
        });


    };

函数attachAudio1（src）{
$（'#audio1'）。删除（）；
var audio=$（''）；
attr（“src”，src）；
音频属性（“id”、“audio1”）；
音频。附加到（“正文”）；
attachPlayAction（）；
};
函数attachPlayAction（）{
var audio=$（“#audio1”）[0]；
$（'#ChoiceA'）.live（'mouseenter'，function（）{
音频播放（）；
});
};

这很棘手。我会尝试替换整个

元素，而不仅仅是更改其源代码。这样，新的音频元素就没有添加到页面中，因此它将被强制加载文件。

您应该这样调用load：

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

<audio id="sound1" preload="auto" src="../../Content/Audio/gau.mp3">

function changeAudio(){
    audio = document.getElementById("sound1");
    audio.src = "../../Content/Audio/" + data.nouns[0].Audio1 + ".mp3";
    audio.load();
    audio.play();
}

$("#ChoiceA").mouseenter(function () {
    changeAudio();
});

没有像上面那样进行过测试，但是之前用一个看起来像这样的单独函数进行过测试：

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

<audio id="sound1" preload="auto" src="../../Content/Audio/gau.mp3">

function changeAudio(){
    audio = document.getElementById("sound1");
    audio.src = "../../Content/Audio/" + data.nouns[0].Audio1 + ".mp3";
    audio.load();
    audio.play();
}

$("#ChoiceA").mouseenter(function () {
    changeAudio();
});

---

加载（）后紧接着播放（）会导致麻烦。在尝试播放中建议的音频之前，请先尝试收听canplay事件，我像您的第一个示例一样尝试了它，但它仍然不起作用。您的第二个示例将需要一些时间来实现我的代码当前的组织方式。您可以通过使用onmouseover事件将其添加到html中来做一些临时的测试，例如：onmouseover=“document.getElementById（'sound1'）。src='../Content/Audio/someother.mp3'看看是否改变了声音并开始播放。我来试一试。谢谢，谢谢你的建议。不幸的是，它也不能解决问题。请参阅上面的示例函数，我用来测试它。更正…它在Firefox中不起作用。在Chrome中，这种方法有些效果。第一个音频播放良好。然后，当第一个音频替换为第二个音频时，结果是它们相互叠加播放。可能浏览器正在进行一些奇怪的缓存？Firefox不支持音频标签中的MP3，您是否尝试过其他文件格式。我在上述评论中的问题与我没有调用.die来删除旧的mouseover事件有关。我认为firefox的问题也与我如何附加mouseover事件有关。