Javascript HTML5播放器-添加停止

Question

去年某個時候，我建立了一個HTML5 / jQuery播放器，然后再回過頭來，我想知道當音頻源不再存在或歌曲結束時該怎么做。

因此，當使用本地mp3文件時，例如：“ song.mp3”完成后，是否有辦法使播放器本身復位並恢復播放按鈕？ 就目前而言，播放器將只遵循javascript指令，並且（據我所知）需要單擊兩次才能重新開始，因為這是邏輯。

或者，如果使用遠程源，例如SHOUTcast流（ http://somedomain.com:8000/;stream.nsv ），則該源是否丟失或何時丟失（由於流問題或由於源實際上已斷開連接） （例如在SHOUTcast廣播中），有沒有一種方法可以嘗試重新連接，如果5或10秒后仍未連接，我們是否可以重置播放器？

純粹出於好奇-我還沒有嘗試。 但是，如果可以做到，那就對幫助我的人表示敬意，因為如果這樣做，那就太好了。

可以在此處實時查看工作中的播放器： http : //www.dominicharrison.co.uk/projects/audio-player/original

請注意，音頻在加載時會播放！

JS代碼：

/* Coded and designed by D Harrison */
$(document).ready(function(){

    var audioPlayer = document.getElementById("audio-player");
    //var audioSrc =  'http://habbcrazy.net:8000/;stream.nsv';
    var audioSrc =  'song.mp3';
    var prevValue = '0';

    audioPlayer.src = audioSrc;
    audioPlayer.play();


$("#play").click(function(){

        if (audioPlayer.paused) {
               audioPlayer.src = audioSrc;
               $("#slider").slider('value', $("#slider").slider('value') + prevValue);
               audioPlayer.play();
               prevValue = '0';
            }   
            else {
               audioPlayer.pause();
               audioPlayer.src ='';
               prevValue = $("#slider").slider('value');
               $("#slider").slider('value', $("#slider").slider('value') - 100);
            }

            $(this).toggleClass('inactive'); 
            return false;
        })

        $("#slider").slider(
        {   value: 75,
            step: 0.1,
            range: 'min',
            min: 0,
            max: 100,
            slide: function(){
                var value = $("#slider").slider('value');
                audioPlayer.volume = (value / 100);
                $( "#amount" ).text($( "#slider" ).slider( "value") + '%');
            },
            change: function(){
                var value = $("#slider").slider('value');
                audioPlayer.volume = (value / 100);
                $( "#amount" ).text($( "#slider" ).slider( "value") + '%');
            },
            animate: true
})
})

Answer 1

因此，當使用本地mp3文件時，例如：“ song.mp3”完成后，是否有辦法使播放器本身復位並恢復播放按鈕？ 就目前而言，播放器將只遵循javascript指令，並且（據我所知）需要單擊兩次才能重新開始，因為這是邏輯。

您可以將處理程序放在“結束”事件上。 在jQuery中，它將是：

$(audio).on("ended",function(){
  //reset audio track and play button here
}

或者，如果使用遠程源，例如SHOUTcast流（ http://somedomain.com:8000/;stream.nsv ），則該源是否丟失或何時丟失（由於流問題或由於源實際上已斷開連接） （例如在SHOUTcast廣播中），有沒有一種方法可以嘗試重新連接，如果5或10秒后仍未連接，我們是否可以重置播放器？

還有其他音頻事件可以玩。 我還沒有全部使用它們，但是要測試“等待”或“進度”或類似類型的東西。 HTML音頻/視頻事件