www.gusucode.com > 精巧漂亮HTML5音乐播放器支持ogg文件源码程序 > 精巧漂亮HTML5音乐播放器支持ogg文件/html5_music/html5_music/Scripts/player.js
var mucicFiles=[ {name:"偷偷的爱 ",author:"丁当",url:"http://www.ourlzk.com/music/mymusic/偷偷的爱.mp3"}, {name:"爱要坦荡荡",author:"萧萧",url:"http://www.ourlzk.com/music/mymusic/爱要坦荡荡.mp3"}, {name:"散场的拥抱",author:"倪安东",url:"http://www.ourlzk.com/music/mymusic/散场的拥抱.mp3"}, {name:"最后一页",author:"江语晨",url:"http://www.ourlzk.com/music/mymusic/最后一页.mp3"}, {name:"绿光",author:"孙燕姿",url:"http://pushtu.cri.cn/mmsource/audio/2007/07/04/070704sunyanzilvguang.mp3"}, {name:"星座",author:"王力宏",url:"http://www.hhzx.net/upload/forum/200565191536.mp3?/VnV3WXtrXHtiV3RqWnh4XXZzWGZlY1xqYVd3ZFp5bl11aVh6ZjY$.mp3"}, {name:"做我女朋友",author:"王羽泽",url:"http://du.xmanyao.info/COFFdD0xMzMxMDEyMzc2Jmk9MjIxLjExLjE3LjE0MSZ1PVNvbmdzL3YxL2ZhaW50UUMvMDMvM2Q0YmViOTg4ZDUyZGMzYjBlMjhjZWE5ZTNlMGM1MDMubXAzJm09NmQxODgxMWFjMTFkMDI2Y2YxOGYwODk0MDk0ZGM0OGMmdj1kb3duJm491/bO0sWuxfPT0SZzPc310/DU8yZwPW4=.mp3"}, {name:"你若成风",author:"许嵩",url:"http://du.leonards.info/COFFdD0xMzMxMDEyMzk4Jmk9MjIxLjExLjE3LjE0MSZ1PVNvbmdzL3YyL2ZhaW50UUMvYzQvMzUvOTViODViYjljZGVhZjMzNmE2ZTI2ZGE2NjRiYzM1YzQubXAzJm09NjcyOWNhYjdlZWY5MmYyZjZjOWUyYWU0ZmY5ZTQwMWUmdj1kb3duJm49xOPI9LPJt+cmcz1WYWUlMjDQ7eHUJnA9bg==.mp3"}, {name:"看月亮爬上来",author:"张杰",url:"http://img3.dangdang.com/newimages/music/online/zj_kylpsl.mp3"}, {name:"我要你的",author:"张韶涵",url:"http://du.xmanyao.info/COFFdD0xMzMxMDEyNDgwJmk9MjIxLjExLjE3LjE0MSZ1PVNvbmdzL3YxL2ZhaW50UUMvMTcvOWM5NzJmOGUwZTNkODZiMGMxNzNiZmE4YWZhYWViMTcubXAzJm09ZDJiYjE4ZTVmNTlmZjU2YzYxOTczNmMxYjQ5MzA4NDEmdj1kb3duJm49ztLSqsTjtcQmcz3VxcnYuq0mcD1u.mp3"}, ]; $(function(){ var $media = $("#musicbox"); var musicIndex = -1; //当前正在播放的歌曲的索引 var playingFile = null; //当前正在播放的歌曲 var playMode = 1; //播放模式 init = function() { for(var a in mucicFiles){ $("#musiclist").append("<li>" + mucicFiles[a].name + " - " + mucicFiles[a].author + "</li>"); } nextMusic(); }(); $("#next").bind("click", nextMusic); // $("audio").bind("error", nextMusic); function nextMusic(){ if(playMode == 1){ musicIndex += 1; } if(musicIndex == mucicFiles.length){ musicIndex = 0; } playMusic(musicIndex); } function playMusic(index){ playingFile = mucicFiles[index]; $media.attr("src",playingFile.url); $media[0].play(); $("#musiclist>li").removeClass("isplay").eq(index).addClass("isplay"); auto(); } function auto(){ var allTime = $media[0].duration; var currentTime = $media[0].currentTime; var percent = Math.floor(currentTime * 100 / allTime); if (isNaN(allTime)) { $("#progress div").css({background:"url(images/load.png repeat-x)",width:"100px"}); } else { $("#progress div").css("background", "#374D62"); $("#progress div").css("width", percent + "px"); $("#time").html(timeformat(currentTime) + " / " + timeformat(allTime)); } setTimeout(auto, 1000); if ($media[0].ended == true) { nextMusic(); } }; function timeformat(time) { var t = Math.round(time); var h = Math.floor(t / 3600); var m = Math.floor(t / 60); var s = t - h * 3600 - m * 60; if(h == 0) { str = m>9?m:("0"+m) + ":" + (s>9?s:("0"+s)); } else { str = h>9?h:("0"+h) + ":" + (m>9?m:("0"+m)) + ":" + (s>9?s:("0"+s)); } return str; } // 双击播放列表播放 $("#musiclist>li").dblclick(function(){ musicIndex = $("#musiclist>li").index(this); $("#play").addClass("playing"); playMusic(musicIndex); if (playMode == 0) { $("#musiclist>li").removeClass("disable").not(".isplay").addClass("disable"); } }); //播放按钮切换 $("#play").click(function(){ if ($("#play").is(".playing")) { $("#play").removeClass("playing"); $media[0].pause(); } else { $("#play").addClass("playing"); $media[0].play(); } }); //选择进度 $("#progress").click(function(e){ var offset = $("#progress div").offset(); var width = e.pageX - offset.left; var allTime = $media[0].duration; $media[0].currentTime = allTime * width / 100; $("#progress div").css("width", width + "px"); }); //音量调整 var isdown = false; $("#volume div").mousedown(function(e){ var offset = $("#volume").offset(); var left = e.pageX - offset.left - 8; left = left>34? 34 : left; left = left<0? 0 : left; $("#volume div").css("left", left + "px"); isdown = true; }); $(document).mousemove(function(e){ if (isdown) { var offset = $("#volume").offset(); var left = e.pageX - offset.left - 8; left = left>34? 34 : left; left = left<0? 0 : left; $("#volume div").css("left", left + "px"); $media[0].volume = Math.round(left / 34 * 10) / 10; } }); $(document).mouseup(function(){ isdown = false; //alert(isdown); }); $("#volume").click(function(e){ var offset = $("#volume").offset(); var left = e.pageX - offset.left - 8; left = left>34? 34 : left; left = left<0? 0 : left; $("#volume div").css("left", left + "px"); $media[0].volume = Math.round(left / 34 * 10) / 10; }); //模式切换 $("#mode").click(function(){ if (playMode == 1) { $("#mode").html("单首"); $("#musiclist>li").not(".isplay").addClass("disable"); playMode = 0; } else { $("#mode").html("全部"); $("#musiclist>li").removeClass("disable"); playMode = 1; } }); });