使用jQuery和HTML5音频标签切换音频源

Question

我只找到了一个不完整的解决方案，所以我需要在这里寻求帮助。

我已经设置好了音频：

<audio id="player" controls="controls">
          <source id="ogg_src" src="lib/audio/barger01.ogg" type="audio/ogg" />
          <source id="mp3_src" src="lib/audio/barger01.mp3" type="audio/mp3" />
          Your browser does not support the audio element.
    </audio>

我有一个动态生成的链接表格，用于更改所播放的音轨：

<div id="audio_list">
   <a href="#" class="track" data-location="http://www.newoggtrack.ogg">sample</a>
</div>

我有这段 jQuery 代码，但不知道如何使用它来更改轨迹。

$('.track').click(function(){

    load_track = $(this).attr('data-location');//gets me the url of the new track

    change_track(load_track);// function to change the track of the loaded audio player without page refresh preferred...

});

我找到了这个函数，但我没有正确地使用它。

 function change_track(sourceUrl) {

        audio.empty();
        $("#ogg_src").attr("src", sourceUrl).appendTo(audio);
        /****************/
        audio[0].pause();
        audio[0].load();//suspends and restores all audio element
        /****************/
    }

audio = $("<audio>").attr("id", "player")
                        .attr("preload", "auto");

- Daniel Hunter

---

你有什么问题？当你尝试切换时会发生什么？你会收到错误吗？function change()的代码是直接复制粘贴还是你提取出来的代码片段？ - LoveAndCoding

更改函数是我找到的东西，但它不起作用。它现在抛出错误。 - Daniel Hunter

把错误信息发出来。如果别人不知道问题出在哪里，你怎么能指望他们帮助你呢？ - bububaba

Answer 1

你的修改函数应该像这样：

function change(sourceUrl) {
    var audio = $("#player");      
    $("#ogg_src").attr("src", sourceUrl);
    /****************/
    audio[0].pause();
    audio[0].load();//suspends and restores all audio element

    //audio[0].play(); changed based on Sprachprofi's comment below
    audio[0].oncanplaythrough = audio[0].play();
    /****************/
}

问题出在 audio.empty() 和 audio 变量上。你试图向一个已清空的 audio 标签中添加内容，但没有将 audio 标签重新输出到浏览器。

- Justice Erolin

---

还有为什么不是音频[1]或者只是音频呢？我希望我懂足够的JavaScript，可以自己找到答案。如果是PHP，我会在音频上使用print_r。 - David 天宇 Wong

@David天宇Wong，jQuery返回一个数组，因此这将获取该数组的第一个实例。 - Justice Erolin

audio[0] 是 DOM 对象，而不是 jQuery 对象。只有 DOM 对象才具有 .play() 方法。 - Sprachprofi

请注意，我在编写此代码时遇到了问题，因为在调用play()方法时，音频通常尚未完全加载，然后它会忽略play()指令。 因此，我将其更改为audio[0].oncanplaythrough = audio[0].play()。 - Sprachprofi

合并了@Sprachprofi的建议，将近两年后 :) - Justice Erolin

Answer 2

你或许需要重命名这个函数，因为在 jQuery 的世界中已经有一个叫做 'change' 的函数了。

- Jay Blanchard