[HTML5系列实践之二]用HTML5做音频播放器

【dunhuangmi原创】这篇用HTML5做个循环播放歌曲的音频播放器。视频音频的控制方法差不多，因此做视频播放器时也可以参考本文。
为了省事，没有引用jquery，所有用到的元素都用id而不是class来控制，各id名字起的也不好，结构性比较差，你们看着有点晕，我写的也有点晕，呵呵。还有时间有限，鼠标事件控制尽量用最简单的方法来写，所以后面看到音量控制那里写的很不好，有bug。
UI模仿doubanfm.com做的，很简单的样子：

想省事的话，audio和vedio都可以用自带的播放控件，但在各个浏览器里显示的效果均不同，无法改变，为了好效果还是要自己做播放控件。

下面开始写代码。
一、HTML结构

	 <div class="songlistbox">
		<ul id="songlist">
		
		</ul>
	 </div>
     <div id="playerbox">
		<div class="picarea"><img src="" id="music-logo"/></div>
		<div class="infoarea">
			<audio id="music">
				<source src="" id="music-ogg" type="audio/ogg" />
				<source src="" id="music-mp3" type="audio/mpeg" />
				你的浏览器不支持HTML5播放器，请升级后再试
			</audio>
			<nav>	
				<h2 id="singer">Michael Jackson</h2>
				<h3 id="songname">&lt;The Essential Michael&gt; 2005</h3>
				<div id="buttons">
					<a id="playButton" class="play" href="javascript:;"></a>
				</div>
				<div id="defaultBar">
					<div id="progressBar"></div>
				</div>
				<div class="prenextbar">
					<a id="pre" href="javascript:;">上一首</a>|
					<a id="next" href="javascript:;">下一首</a>
				</div>
				<div id="volume">
					<a href="javascript:;" id="volume-icon"></a>
					<div id="volume-box">
						<div class="volume-max">
							<div id="volume-bar"></div>
						</div>
					</div>
				</div>
				<div style="clear:both"></div>
			</nav>
		</div>
     </div>

其中#playButton是play键和pause键，#volume-box是音量滑动条的外框，.volume-max是滑动条底色（深灰），#volume-bar是滑动条前色（浅灰），鼠标操作是通过控制#volume-bar的高度，露出不同的volume-max大小。
#defaultBar是播放时间进度条的背景底色（浅灰），#progressBar是进度条的浅色（绿色），鼠标直接通过改变#progressBar的长短控制当前播放的时间进度。

 

二、CSS部分

body,div,p,nav,audio,h1,h2,h3,img,a,ul,li,ol,dd,dt,dl,h1,h2,h3{margin:0;padding:0;font:12px/1.667 'Helvetica Neue','Tahoma','Arial';}
body{background:#e1e8e5;}
ul,li,ol{list-style:none;}
#playerbox{background:#fff;position:absolute;left:60px;top:100px;width:510px;-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 5px 3px  rgba(0,0,0,0.2);box-shadow:0 0 20px rgba(0, 0, 0, 0.2);font-size:12px}
audio{position:absolute;top:0;left:0}
.picarea{float:left;width:245px;padding:5px;}
.picarea img{width:245px;float:left}
.infoarea{float:left;width:225px;padding:20px 10px;}
h2{font-weight:normal;font-size:24px;line-height:30px;}
h3{font-weight:normal;font-size:12px;line-height:20px;margin-bottom:10px;}
nav{margin:5px 0px;}
#buttons{position:absolute;right:10px;top:0;}
#buttons .play{display:inline-block;height:26px;width:26px;background:url(icons.jpg) -71px 0 no-repeat;}
#buttons .play:hover{opacity:0.5}
#buttons .pause{display:inline-block;height:26px;width:26px;background:url(icons.jpg) 0 0 no-repeat;}
#buttons .pause:hover{opacity:0.5}
#defaultBar{position:relative;width:200px;height:8px;border:0;background:#e5e5e8;float:left;}
#defaultBar:hover{opacity:0.6}
/*progressBar在defaultBar内部*/
#progressBar{position:absolute;width:0px;height:8px;background:#9dd6c5;}
.prenextbar{position:absolute;bottom:20px;width:200px;height:20px}
.prenextbar a{padding:0 20px;color:rgba(0,0,0,0.5);text-decoration:none}
.prenextbar a:hover{color:#000000}
#volume{}
#volume-icon{position:absolute;right:38px;top:95px;display:inline-block;width:20px;height:23px;background:url(icons.jpg) 0 -127px no-repeat;opacity:0.6}
#volume-icon.selected,#volume-icon:hover{opacity:1}
#volume-off{background:url(icons.jpg) -20px -127px no-repeat;}
#volume-box{display:none;position:absolute;padding:0 4px;height:50px;width:2px;top:85px;right:30px;cursor:pointer;}
#volume-bar{background:#e5e5e5;width:2px;height:25px;}
.volume-max{background:#939892;width:2px;height:50px;}
.songlistbox{position:absolute;width:320px;background:rgb(239,245,242);height:100%;top:0;left:530px}
#songlist{margin:50px auto;width:220px;}
#songlist .song{cursor:pointer;margin:6px 0;float:left;width:220px;text-indent:24px;line-height:40px;background:rgba(198, 211, 205, 0.5)}
#songlist .song:hover{background:rgba(150,171,165,0.5)}
#songlist .song.selected{background:#9DD6C5}

三、js控制部分
（一）建立一个json对象，存放歌曲信息

var list=[{id:10001,singer:'Westlife',name:'You Raise Me Up'},
{id:10002,singer:'Westlife',name:'Uptown Girl'},
{id:10003,singer:'The Cranberries',name:'Dreams'},
{id:10004,singer:'Avril Lavigne',name:'Innocence'},
{id:10005,singer:'Westlife',name:'Swear It Again'},
{id:10006,singer:'Westlife',name:'Mandy'},
{id:10007,singer:'Westlife',name:'Tonight'}];

比如，对应的歌曲10001的图片名10001.jpg，音频文件名为10001.ogg或10001.mp3

（二）页面初始化主程序
这部分要干几件事：
1、定义一些全局变量（常量）
2、读出第一首歌的信息并将图片、歌手名、歌曲名等信息显示到播放器上，并将歌曲load到audio里去。
3、循环读出JSON中的信息，并显示在右侧播放列表里
4、绑定一系列事件

window.addEventListener('load',doFisrt,false);
function doFisrt()
{
    barSize=200;   //注意不要使用px单位，且不要用var，是全局变量
	maxv=50;//音量bar竖条50px
	playingid=0;//从第一首歌放起
	volumeY=0;//全局变量，用来存放鼠标滑动前的位置    
	start=false;
	updatedBar=0;  //进度条变化间隔

	myMusic=document.getElementById('music');
        playButton=document.getElementById('playButton');
        bar=document.getElementById('defaultBar');
        progressBar=document.getElementById('progressBar');
        var musicogg=document.getElementById('music-ogg');
	var musicmp3=document.getElementById('music-mp3');
	var musiclogo=document.getElementById('music-logo');
	var musicsinger=document.getElementById('singer');
	var musicname=document.getElementById('songname');
	var songlist=document.getElementById('songlist');
	var preBtn=document.getElementById('pre');
	var nextBtn=document.getElementById('next');
	var volume=document.getElementById('volume');
	var volumeBox=document.getElementById('volume-box');
	//读取所有歌名
	for (var i=0;i<list.length ;i++ )
	{
		var newsong=document.createElement('li');
		newsong.id='list'+i;
		newsong.className=i==0?'song selected':'song';
		newsong.innerHTML=list[i].name;
		songlist.appendChild(newsong);
	}
	//绑定事件
        playButton.addEventListener('click',playOrPause,false);  
        bar.addEventListener('click',clickedBar,false);
	nextBtn.addEventListener('click',playNext,false);
	preBtn.addEventListener('click',playPre,false);
	myMusic.addEventListener('ended',playNext,false);
	volume.addEventListener('mouseover',showvolume,false);
	volume.addEventListener('mouseout',hidevolume,false);
	volumeBox.addEventListener('mousedown',moveVolume,false);
	volumeBox.addEventListener('mousemove',setVolume,false);
	volumeBox.addEventListener('mouseout',function(){start=false;},false);
	volumeBox.addEventListener('mouseup',function(){start=false;},false);

	var obj;
	for (i=0;i<list.length ;i++ )
	{
		obj=document.getElementById('list'+i);
		obj.addEventListener('click',clickToPlay,false);
	}
	//播放第一首歌
	myMusic.volume=0.5;//初始音量0.5
	beforePlay();
	toPlay(0);

}

 （三）播放歌曲：

beforePlay()用来初始化进度条、播放键等，toPlay()读取不同歌曲的信息并播放

unction toPlay(id){
	var musicogg=document.getElementById('music-ogg');
	var musicmp3=document.getElementById('music-mp3');
	var musiclogo=document.getElementById('music-logo');
	var musicsinger=document.getElementById('singer');
	var musicname=document.getElementById('songname');
	musicmp3.src='mp3/'+list[id].id+'.mp3';
	musicogg.src='mp3/'+list[id].id+'.ogg';
	musiclogo.src='logo/'+list[id].id+'.jpg';
	musicsinger.innerHTML=list[id].singer;
	musicname.innerHTML=list[id].name;
	document.getElementById('list'+id).className='song selected';
	myMusic.load();	
	myMusic.play();
	updatedBar=setInterval(update,500);
}

function beforePlay(){
	document.getElementById('list'+playingid).className='song';
	window.clearInterval(updatedBar);
	progressBar.style.width='0';
	playButton.className='pause';
}

 （四）用按键控制音乐播和停

function playOrPause(){
    if(!myMusic.paused && !myMusic.ended){
        myMusic.pause();
        playButton.className='play';
        window.clearInterval(updatedBar);
    }else{
        myMusic.play();
        playButton.className='pause';
	updatedBar=setInterval(update,500);	//全局变量，每0.5秒根据当前播放位置改变进度条显示
    }
}

 （五）进度条动态控制：可自动滚动和人为用鼠标选定播放点

//控制进度条的动态显示
function update(){
    if(!myMusic.ended){
        var size=parseInt(myMusic.currentTime*barSize/myMusic.duration);
        progressBar.style.width=size+'px';
    }else{
        progressBar.style.width='0px';
	playButton.className='play';
        window.clearInterval(updatedBar);
    }
}
//鼠标点击进度条，可从新的时间点开始播放
function clickedBar(e){
    if(!myMusic.paused && !myMusic.ended){
	var mouseX=e.pageX-getLeft(bar);
        var newtime=mouseX*myMusic.duration/barSize;  //new starting time
        myMusic.currentTime=newtime;
        progressBar.style.width=mouseX+'px';
    }
}

 （六）调整音量
拖动鼠标可以改变音量大小，改变量根据鼠标拖动范围而定

拖动鼠标可以改变音量大小，改变量根据鼠标拖动范围而定
//音量条显示
function showvolume(){
	var volumeBox=document.getElementById('volume-box');
	var volumeIcon=document.getElementById('volume-icon');
	volumeBox.style.display='block';
	volumeIcon.className='selected';
}
//音量条隐藏
function hidevolume(){
	var volumeBox=document.getElementById('volume-box');
	var volumeIcon=document.getElementById('volume-icon');
	volumeBox.style.display='none';
	volumeIcon.className='';
}
//读出鼠标拖动之初的鼠标y位置并存储
function moveVolume(e){
	start=true;
	volumeY=e.pageY;
}

//根据鼠标变动大小计算音量应该改变的大小，并算出音量控制条应该改变的高度大小
function setVolume(e){
	if (!start)
	{
		return
	}
	var volumeBar=document.getElementById('volume-bar');
	var originH=myMusic.volume*maxv;
	var diff=e.pageY-volumeY;
	if (diff>originH){
		myMusic.volume=0;
	}
	else if(diff<originH-maxv){
		myMusic.volume=1;
	}
	else{
		myMusic.volume=(originH-diff)*myMusic.volume/originH;
	}
	//alert(myMusic.volume);
	var newH=50-maxv*myMusic.volume;
	volumeBar.style.height=newH+'px';
	volumeY=e.pageY;
}

 demo可以在这里看到http://dunhuang.a67.cnaaa1.com/html5/musicstation.html，不过要拿chrome或ie10,ie9才可以播放（服务器不支持Ogg） 【dunhuangmi原创，转载注明】