0

我有一个 jQuery 元素，单击它会更改音频的 src 属性。我已将 HTML 中的更改打印到控制台，所以我知道 src 实际上正在更改。在 Firefox（在 OSX 上）中，这很好：文件的 src 发生了变化，我听到的音频也发生了变化。

但是，在 Chrome 和 Safari（也在 OSX 上）中，控制台中的 src 会像以前一样发生变化，但播放的音频是以前的文件。重复单击按钮会再次更改 src，但 Chrome 和 Safari 只会播放第一个文件。

这是最初的 HTML，它播放“slarg”这个词：

<audio id ="trget">
  <source id = "trget_wav" src = "slarg.wav" type = "audio/wav">
  <source id = "trget_mp3" src = "slarg.mp3" type = "audio/mp3">
</audio>

然后，单击按钮，执行此 jQuery：

$('#newWord').click(function() {
    var tar = $('#trget').html();
    console.log(tar);
    $("#trget_wav").attr("src",stim[2]).detach().appendTo("#trget");
    $("#trget_mp3").attr("src",stim[3]).detach().appendTo("#trget");
    var tar = $('#trget').html();
    console.log(tar);
});

现在，html更改为：

<audio id ="trget">
  <source id = "trget_wav" src = "blerg.wav" type = "audio/wav">
  <source id = "trget_mp3" src = "blerg.mp3" type = "audio/mp3">
</audio>

但在 Safari 和 Chrome 中，它仍然播放“slarg”这个词，而在 FF 中它会播放新词“blerg”……为什么？更重要的是，我如何让 Safari 和 Chrome 像 FF 一样正确地做到这一点？

4

1 回答 1

2

您必须调用音频元素上的stop()、load()和play()来重新启动音频等。

$('#newWord').click(function () {
    var audio = $('#trget').get(0);

    audio.pause();

    $("#trget_wav").prop('src', stim[2]);
    $("#trget_mp3").prop('src', stim[3]);

    audio.load();
    audio.play();
});
于 2013-06-26T11:38:34.670 回答