HTML 音频 src 用 jQuery 更改，但以前的文件在 FF 和 Chrome 中播放

Posted 2023-02-25

【中文标题】HTML 音频 src 用 jQuery 更改，但以前的文件在 FF 和 Chrome 中播放

【英文标题】：HTML audio src changed with jQuery, but previous file is playing in FF and Chrome

【发布时间】：2013-06-26 11:33:34

【问题描述】：

我有一个 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 一样正确地做到这一点？

【问题讨论】：

尝试更改属性而不是属性$("#trget_wav").prop("src",stim[2])

不幸的是，这也在 Firefox 中破坏了它。 src 属性正在有效地改变，但由于某种原因 Safari/Chrome 没有实现 src 文件的改变。

【参考方案1】：

您必须在音频元素上调用 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();
);

【讨论】：

这会在所有三个浏览器中导致 TypeErrors（并且与 newWord 单击相关的代码都不会执行）。 Safari 和 Chrome 中的错误是：“TypeError: 'undefined' is not a function (evalating 'audio.stop()')”而在 FF 中是“Uncaught TypeError: Object # has no method 'stop'”

@Chrissy - 是的，应该是pause()。

太棒了！现在工作。如果可以的话，我会投票。另外（也许）值得注意的是，它可以在没有 .play() 的情况下工作，我已将其绑定到 html 内的单独点击。