Question

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

      <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后再次加载音频元素，我该怎么做？

------------- ------------- UPDATE

根据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();
        });


    };

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

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

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

Answer 2

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

Answer 3

load（）后面跟play（）马上导致麻烦。尝试按照https://stackoverflow.com/a/8705478/1374208

中的建议播放音频之前，先试听canplay事件

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

3 个答案: