音乐播放器canvas圆形音乐播放进度条" style="margin:0.8em 0px; padding:0px; font-weight:100; color:rgb(51,51,51); font-family:'microsoft yahei'; line-height:26px"> 今天教大家使用html5 Audio标签实现音乐播放器，模仿QQ音乐、天天动听等类似效果。这是我当年刚接触H5的一个小demo,适合初学者初考，代码也有很大的优化空间。

1. audio

各大浏览器对音乐格式的支持情况

属性

常用的事件

fn();
function fn(){
	var w = window.innerWidth / 30;
	var html = document.querySelector('html');
	html.style.fontSize = w + 'px';
};
window.onresize = fn;
$("#footer").load("footer.html");
//轮播图
var mySwiper = new Swiper('.swiper-container', {
	// 环路
	loop : true,
	//分页器
	pagination : '.swiper-pagination',
	paginationClickable :true,
})
// 当前播放的歌曲编号
var num=0;

var audio=document.querySelector("audio");
$(".songMenu").on('click',function(){
	 $("#songMenu").slideDown("fast");
})
$(".off").on('click',function(){
	$("#songMenu").slideUp("fast");
});
$("main").add("header").on('click',function(){
	$("#songMenu").slideUp("fast");
})

var musicArr=["mp3/袖手旁观.mp3","mp3/莫文蔚 (Karen Mok) - 当你老了.mp3","mp3/阿肆 - 我在人民广场吃炸鸡.mp3"]
//音播放开关乐
$(".stop").on('click',function(){
	if(audio.paused){
		Index(num);
		$("#dog").attr("class","dog");
		$(".stop").html("");
	}else{
		audio.pause();
		$("#dog").removeAttr("class","dog");
		$(".stop").html("");
	}
})
// 上一曲
$(".MovePrevious").on('click',function(){
	num=(3+--num)%3;
	Index(num);
});
//下一曲
$(".MoveNext").on('click',next);
	function next(){
		num=(++num)%3;
		Index(num);
	}
//点击主页歌单
$(".songMenu li").on('click',function(){
	num=$(this).index();
	Index(num);
})
//点击右侧歌单
$(".page2 li").on('click',function(){
	num=$(this).index();
	Index(num);
})
//重播
$(".playback").on('click',function(){
	audio.currentTime=0;
	audio.play();
})
$(".soundOff").on('click',function(){
	audio.muted ? $(".soundOff").html("") : $(".soundOff").html("");
	audio.muted=!audio.muted;
	
})

function Index(num){
	//开始播放歌曲
	audio.src=musicArr[num];		
	$(".stop").html("");
	audioPlay(musicArr[num],next);
	playingStyle();
}
function playingStyle(){
	// 主页歌单
	$(".Mname").css("color","#fff");
	$(".Msonger").css("color","#bbbab9");
	$(".songMenu li").eq(num).find("span").css("color","#955ebe");
	// 右侧歌单
	$(".Pname").css("color","#fff");
	$(".Psonger").css("color","#bbbab9");
	$("#page2 li").eq(num).find("span").css("color","#955ebe");
	//顶部信息
	$(".name").html($(".Pname").eq(num).html());
	$(".author").html($(".Psonger").eq(num).html());
}

function audioPlay(soundPath,callback){ 
    /*判断声音是否播放完成，播放完成之后执行回调函数*/
    audio.src=soundPath;   
    audio.play();
    if(callback != undefined){
        var  is_playFinish = setInterval(function(){
        if(audio.ended){
                    callback();
                    window.clearInterval(is_playFinish);
       		 }
       		if (!isNaN(audio.duration)) {
            var timeValue = audio.duration; 
            //音乐时间
            var m=parseInt(timeValue/60);
            var s=parseInt(timeValue%60);
            	s<10 ? s="0"+s : s=s;
            $(".startTime").html(m+":"+s);
            //当前播放时间
            var NowtimeValue = audio.currentTime;
            var nowM=parseInt(NowtimeValue/60);
            var nowS=parseInt(NowtimeValue%60);
                nowS<10 ? nowS="0"+nowS : nowS=nowS;
            $(".endTime").html(nowM+":"+nowS);
			// 用时间比来获取进度条的值
            var progressValue =100*(audio.currentTime/audio.duration); //
            $("progress").val(progressValue);
       	 	};
        }, 10);
    }
}