HTML5实战与剖析之媒体元素(5、音频实例)

<p class="player"><p class="player-block bg">	<p class="controls">		<a  title="播放" id="play" class="play mode-bg" href="#"></a>		<a title="暂停" id="pause" class="pause mode-bg" href="#" style="display: none;"></a>	</p>	<p class="seprator bg"></p>	<p class="info">		<p id="song-name" class="song-name">欢迎使用音乐网播放器!</p>		<p id="totaltime" class="time">00:00</p>		<p class="s">/</p>		<p id="playtime" class="time1">00:00</p>		<p id="tracks" class="tracks bg">			<p class="download-bar bg" style="width: 0%;"><p class="l bg">l</p><p class="r bg">r</p>			</p>			<p id="seek-bar" class="seek-bar bg" style="width: 0%;"><p class="l bg"></p><p class="r bg"></p><p id="point" class="point bg"></p>			</p>		</p>	</p>	<p class="seprator bg"></p>	<p class="volumn">		<a id="mute" class="mute mode-bg" style="display: block;"></a>		<a id="unmute" class="unmute mode-bg" style="display: none;"></a>		<p class="line bg">			<p id="volumn" class="tracks"><p id="volumnBar"class="volumn-bar bg" style="width: 100%;">  <p class="l bg"></p>  <p class="r bg"></p>  <p id="volPoint" class="point bg"></p></p>			</p>		</p>	</p></p><p class="player-r bg"></p></p><audio id="audio"><source id="s1" src="TheOldBoy.mp3"></source><source id="s2" src="TheOldBoy.ogg"></source></audio>

.player {height: 35px;margin-left: auto;margin-right: auto;width: 980px;}.bg {background: url("../images/player.png") repeat;}.mode-bg {background: url("../images/mode.gif") repeat;}.player-block {background:#000;display: block;float: left;height: 35px;width: 820px;}.player-block .controls {float: left;height: 35px;padding-left: 5px;padding-right: 5px;width: auto;}.player-block .controls a {display: inline;margin-left: 5px;}.player-block .controls a.play,.player-block .controls a.pause {display: block;float: left;height: 30px;margin-top: 4px;width: 30px;}.player-block .controls a.play {background-position: -130px -40px;}.player-block .controls a.pause {background-position: -171px -40px;}.player-block .info {color: #FFF;width:620px;float: left;height: 26px;padding: 2px 5px;}.player-block .info .song-name {float: left;height: 20px;overflow: hidden;white-space: nowrap;}.player-block .info .time {float: left;height: 15px;line-height: 15px;margin-top: 2px;text-align: right;}.player-block .info .s {float:right;height: 15px;line-height: 15px;margin-top: 2px;text-align: right;width: 5px;}.player-block .info .time,.player-block .info .time1 {float:right;;height: 15px;line-height: 15px;margin-top: 2px;text-align: right;}.player-block .info .tracks {background-position: 0 -198px;height: 7px;margin-top: 20px;padding-left: 3px;position: relative;width: 290px;}.player-block .info .tracks .seek-bar {background-position: 0 -271px;background-repeat: repeat-x;display: inline;height: 7px;left: 0;margin-left: 2px;min-width: 2px;position: absolute;top: 0;width: 10%;z-index: 1;}.seek-bar .l,..seek-bar .r {display: inline;float: left;font-size: 0;height: 7px;}.player-block .info .tracks .seek-bar .l {background-position: 0 -262px;margin-top: -1px;position: relative;margin-left: -3px;width: 4px;}.player-block .info .tracks .seek-bar .r {background-position: -1px -279px;margin-right: -3px;margin-top: 0;position: absolute;right: 0;width: 3px;}.player-block .info .tracks .seek-bar .point {background-position: -146px -12px;height: 13px;margin-right: -5px;margin-top: -4px;position: absolute;right: 0;width: 13px;}.player-block .volumn {color: #fff;float: left;height: 26px;padding: 2px 5px;width: 110px;}.player-block .volumn .mute {background-position: -287px -2px;display: none;float: left;height: 17px;margin-top: 10px;width: 20px;}.player-block .volumn .unmute {background-position: -287px -22px;float: left;height: 17px;margin-top: 10px;width: 20px;}.player-block .volumn .line {background-position: 0 -107px;display: inline;float: left;margin-left: 10px;margin-top: 11px;width: 80px;}.player-block .volumn .tracks {float: left;height: 10px;padding-left: 6px;position: relative;width: 90%;}.player-block .volumn .tracks .volumn-bar {background-position: 0 -85px;background-repeat: repeat-x;display: inline;height: 10px;left: 0;margin-left: 2px;min-width: 2px;position: absolute;top: 0;width: 40%;}.volumn-bar .l,.volumn-bar .r {font-size: 0;height: 10px;margin-right: -3px;margin-top: 0;display: inline;}.player-block .volumn .tracks .volumn-bar .l {background-position: 0 -75px;float: left;position: relative;width: 4px;}.player-block .volumn .tracks .volumn-bar .r {background-position: -1px -95px;float: right;position: absolute;right: 0;width: 3px;}.player-block .volumn .tracks .volumn-bar .point {background-position: -122px -12px;height: 15px;margin-right: -5px;margin-top: -2px;position: absolute;right: 0;width: 15px;}

window.onload=function(){var $songName = v("song-name");var audio = v("audio");var oSrc=audio.currentSrc;var currentTime=audio.currentTime;var duration=audio.duration;var $time = v("totaltime");var $time1 = v("playtime");var $seekBar = v("seek-bar");var $point = v("point");var $tracks = v("tracks");var $mute = v("mute");var $unmute = v("unmute");var $play = v("play");var $pause = v("pause");var $volPoint = v("volPoint");var $volumn = v("volumn");var $volumnBar = v("volumnBar");$songName.innerHTML = decodeURI(oSrc);function toShow(){	$time1.innerHTML = timeChange(audio.currentTime);	var scale = audio.currentTime/audio.duration;	$seekBar.style.width = Math.floor(scale * ($tracks.offsetWidth - $point.offsetWidth)) + &#39;px&#39;;}//总时间function timeChange(iAll){	iAll = Math.floor(iAll);	var mintus = toZero(parseInt(iAll%3600/60));	var sends = toZero(parseInt(iAll%60));		return mintus + ":" + sends;}function toZero(num){	if(num<10){		return &#39;0&#39; + num;	}	else{		return &#39;&#39; + num;	}}//一开始总时间显示$time.innerHTML = timeChange(audio.duration);//暂停播放$pause.onclick = function(){	$pause.style.display = "none";	$play.style.display = "block";	audio.pause();};$play.onclick = function(){			$play.style.display = "none";	$pause.style.display = "block";	toShow()	setInterval(toShow,1000)	audio.play();};//静音$mute.onclick = function(){	$unmute.style.display=&#39;block&#39;;	$mute.style.display=&#39;none&#39;;	v(&#39;audio&#39;).muted = true;	$volumnBar.style.width = 7 + "px"};//取消静音$unmute.onclick = function(){	$mute.style.display=&#39;block&#39;;	$unmute.style.display=&#39;none&#39;;	v(&#39;audio&#39;).muted = false;};//声音$volPoint.onmousedown = function(ev){	var ev = ev || window.event;	disX2 = ev.clientX - $volPoint.offsetLeft - 5;		document.onmousemove = function(ev){		var ev = ev || window.event;var L = ev.clientX - disX2;if(L<0){			L = 0;		}		else if(L>$volumn.offsetWidth - $volPoint.offsetWidth){			L = $volumn.offsetWidth - $volPoint.offsetWidth;		}		$volumnBar.style.width = L+7 + &#39;px&#39;;		var scale = L/($volumn.offsetWidth - $volPoint.offsetWidth);v(&#39;audio&#39;).volume = scale;	};	document.onmouseup = function(){		document.onmousemove = null;		document.onmouseup = null;	};	return false;};//进度$point.onmousedown = function(ev){	var ev = ev || window.event;	disX2 = ev.clientX - $point.offsetLeft - 5;		document.onmousemove = function(ev){		var ev = ev || window.event;var L = ev.clientX - disX2;if(L<0){			L = 0;		}		else if(L>$tracks.offsetWidth - $point.offsetWidth){			L = $tracks.offsetWidth - $point.offsetWidth;		}		$seekBar.style.width = L + &#39;px&#39;;		var scale = L/($tracks.offsetWidth - $point.offsetWidth);			audio.currentTime = scale * audio.duration;		$time1.innerHTML = timeChange(audio.currentTime);	};	document.onmouseup = function(){		document.onmousemove = null;		document.onmouseup = null;		$time1.innerHTML = timeChange(audio.currentTime);		audio.play();	};	return false;};}//获取idfunction v(idName){return document.getElementById(idName);	}//获取类名function c(sClass){var result = [];var aEle = document.getElementsByTagName(&#39;*&#39;);var re = new RegExp(&#39;\\b&#39;+sClass+&#39;\\b&#39;,&#39;i&#39;); //\就是转义for(var i=0;i<aEle.length;i++){	if(re.test(aEle[i].className)){		result.push(aEle[i]);	}}return result;}