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 Audio/Video Events

Javascript HTML5播放器 - 添加停止

1 个答案: