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

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

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

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

 <div id="music-logo"/></div><div 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"><The Essential Michael> 2005</h3><div id="buttons"><a id="playButton" href="javascript:;"></a></div><div id="defaultBar"><div id="progressBar"></div></div><div 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 name="code">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竖条50pxplayingid=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.5beforePlay();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原创，转载注明】