jquery - jQuery更改了HTML音频src，但先前的文件正在FF和Chrome中播放

Question

我有一个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一样正确地执行呢？

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