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

【问题标题】：Loading Audio Element After Dynamically Changing the Source动态更改源后加载音频元素
【发布时间】：2011-10-07 19:37:56
【问题描述】：

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

      <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 上找到了这个注释“当元素已经插入视频或音频元素时动态修改源元素及其属性将无效。要更改正在播放的内容，要么直接在media元素上使用src属性，或者在对源元素进行操作后调用media元素上的load()方法。"

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


    };

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

你应该像这样调用 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();
});

这对我有用吗？

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

http://jsfiddle.net/Z3VrV/

【讨论】：

我像您的第一个示例一样尝试了它，但它仍然无法正常工作。您的第二个示例将需要一些时间来实现我的代码当前的组织方式。
您可以通过使用 onmouseover 事件将其添加到 html 来做一些临时的测试，例如：onmouseover="document.getElementById('sound1').src='../ ../Content/Audio/someother.mp3';"看看是否改变声音并开始播放。
我会试一试。谢谢。

【解决方案2】：

这很棘手。我会尝试替换整个 <audio> 元素，而不是仅仅更改其来源。这样，新的音频元素还没有被添加到页面中，所以它将被强制加载文件。

【讨论】：

感谢您的建议。不幸的是，它也不能解决问题。有关我用来测试此功能的示例函数，请参见上文。
更正...它在 Firefox 中不起作用。在 Chrome 中，这种方法有些作用。第一个音频播放正常。然后，当第一个音频被第二个替换时，结果是它们相互重叠播放。也许浏览器正在做一些奇怪的缓存？
Firefox 不支持音频标签中的 MP3，您是否尝试过其他文件格式。
我在上述评论中的问题与我没有调用 .die 来删除旧的鼠标悬停事件有关。我认为的 firefox 问题也与我如何附加 mouseover 事件有关。

【解决方案3】：

load() 紧接着 play() 会导致麻烦。按照https://stackoverflow.com/a/8705478/1374208 中的建议，在尝试播放音频之前尝试监听 canplay 事件

【讨论】：