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;
		}
	});
});