灵感的由来是前些天看到了博: http://www.cnblogs.com/li-cheng 的首页有一个很漂亮的播放器,感觉很不错,是用Flex做的Flash播放器。
于是我也便想到了,自己也来来弄个玩玩。
所以利用1天的时间,通过收集整理,做了一款自己专属的播放器!
播放器实现了以下功能操作:
1:播放、暂停
2:快进、快退
3:上一曲、下一曲
4:单曲循环
效果如下:
奉献JS源码如下:
(function ($) { $.fn.Html5Player = function() { //获取音频API var audio = $(‘body‘).find(‘audio‘).get(0); /**********歌曲列表***************/ var songDefualtSettings=[ {"Singer":"火星哥","SongName":"The Lazy Song","img":"./images/火星哥.jpg"}, {"Singer":"邓紫棋","SongName":"We Will Rock You","img":"./images/邓紫棋.jpg"}, {"Singer":"王菲","SongName":"闷","img":"./images/王菲.jpg"}, {"Singer":"梁静茹","SongName":"情歌","img":"./images/梁静茹.jpg"} ]; /*********当前播放的歌曲**********/ var pointerInt=0; return this.each(function() { /*******音频处理操作********/ var ExcuteAudioCommon = { //播放进度条的转变事件 DurationProcessRange:function (rangeVal) { audio.currentTime = rangeVal * audio.duration; audio.play(); }, //获得总的时间刻度 TimeSpan:function() { var ProcessYet = 0; var _this = this; setInterval(function () { var ProgressYet = (audio.currentTime / audio.duration) * 310; $(".ProgressYet").css("width", ProgressYet); var currentTime = _this.timeDispose(audio.currentTime); var timeAll = _this.timeDispose(_this.TimeAll()); $(".SongTime").html(currentTime + " | " + timeAll); }, 1000); }, //将时长计算成分秒 timeDispose: function (number) { var minute = parseInt(number / 60); var second = parseInt(number % 60); minute = minute >= 10 ? minute : "0" + minute; second = second >= 10 ? second : "0" + second; return minute + ":" + second; }, //获取音频总时长 TimeAll: function () { return audio.duration; } } /*******上一曲**********/ $(this).find(".LeftControl").click(function(){ CreateSongStart(pointerInt=pointerInt==0?0:pointerInt-1); $("#MainControl").data("play")==="off"&&audio.play()&&ExcuteAudioCommon.TimeSpan(); }); /******播放,暂停********/ $("#MainControl").click(function() { if($(this).data("play")==="off") { $("#MainControl").removeClass("PlayControl").addClass("StopControl"); audio.pause(); $(this).data("play","on"); }else{ $("#MainControl").addClass("PlayControl").removeClass("StopControl"); if (audio.src == "") { pointerInt= parseInt(Math.random()*songDefualtSettings.length,10); CreateSongStart(pointerInt); } audio.play(); ExcuteAudioCommon.TimeSpan(); $(this).data("play","off"); } }); function CreateSongStart(SongNumber){ var Defaultsong = songDefualtSettings[SongNumber]; $(".SongName").text(Defaultsong.SongName); $(".Singer").text(Defaultsong.Singer) $("#singerImg").attr("src",Defaultsong.img); audio.src = "./media/" + Defaultsong.SongName + ".mp3"; } /*******下一曲********/ $(this).find(".RightControl").click(function(){ CreateSongStart(pointerInt=pointerInt==(songDefualtSettings.length-1)?pointerInt:pointerInt+1); $("#MainControl").data("play")==="off"&&audio.play()&&ExcuteAudioCommon.TimeSpan(); }); /********音频进度条事件(进度增加)*******/ $(".Progress").click(function (e) { //----播放进度条的基准参数 var Progress = $(".Progress").offset(); var ProgressStart = Progress.left; var ProgressLength = $(".Progress").width(); var CurrentProces = e.clientX - ProgressStart; ExcuteAudioCommon.DurationProcessRange(CurrentProces / ProgressLength); $(".ProcessYet").css("width", CurrentProces); }); /********音频进度条事件(进度减少)********/ $(".ProgressYet").click(function (e) { //-----播放进度条的基准参数 var Progress = $(".Progress").offset(); var ProgressStart = Progress.left; var ProgressLength = $(".Progress").width(); var CurrentProces = e.clientX - ProgressStart; ExcuteAudioCommon.DurationProcessRange(CurrentProces / ProgressLength); $(".ProgressYet").css("width", CurrentProces); }) //监听媒体文件结束的事件(ended),这边一首歌曲结束就读取下一首歌曲,实现播放上的循环播放 audio.addEventListener(‘ended‘, function () { CreateSongStart(pointerInt=(pointerInt>=0&&(songDefualtSettings.length-1)!=pointerInt)?++pointerInt:0); $("#MainControl").data("play")==="off"&&audio.play()&&ExcuteAudioCommon.TimeSpan(); }, false); }) } })(jQuery);