0

去年的某个时候，我构建了一个 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
})
})
4

1 回答 1

0

那么，当使用本地 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 音频/视频事件

于 2013-09-27T20:39:00.067 回答