用jquery和HTML5音频标签切换音频源

前端之家收集整理的这篇文章主要介绍了用jquery和HTML5音频标签切换音频源前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我只找到一个解决方案,但它是不完整的,所以我需要帮助。

我有音频设置:

<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(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 var。您正在尝试附加一个空的音频标签,并没有将音频标签写回浏览器。

猜你在找的jQuery相关文章