使用 jquery 和 HTML5 音频标签切换音频源答案

【问题标题】：switch audio source with jquery and HTML5 audio tag使用 jquery 和 HTML5 音频标签切换音频源
【发布时间】：2012-03-14 08:34:43
【问题描述】：

我只找到了另一种解决方案，但它不完整，所以我需要帮助。

我已经设置了音频：

<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");

【问题讨论】：

你的问题是什么？当您尝试切换时会发生什么？你有错误吗？带有function change() 的代码是直接复制和粘贴，还是只是您提取的代码片段？
更改功能是我发现的，但它不起作用。它现在抛出错误
然后发布错误。如果人们不知道问题出在哪里，您希望他们如何帮助您？

标签： jquery html audio html5-audio

【解决方案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() 和音频变量。您试图附加一个清空的音频标签，但没有将音频标签写回浏览器。

【讨论】：

感谢您的帮助。它清除了我正在做的事情，并且像一个魅力一样工作。我希望我正确地授予了赏金。
解决了我的问题。似乎您必须使用 load() 方法，否则即使更新了 DOM，HTML 播放器也不会真正加载声音。谢谢！
另外，为什么不是音频[1] 或只是音频？我希望我知道足够多的 javascript 来知道自己获得答案的方法。我 php 我会在音频上做一个 print_r。
请注意，我在这段代码中遇到了问题，因为在调用 play() 时音频通常尚未完全加载，然后它会忽略 play() 指令。所以我把它改成了 audio[0].oncanplaythrough = audio[0].play() .
近两年后来自@Sprachprofi 的合并建议:)

【解决方案2】：

您可能还想重命名该函数，因为 'change' 已经是 jQuery 世界中的一个函数。

【讨论】：