之前已经介绍过了html5中媒体元素的相关小概念，和一些事件方法。光有一些理论基础，没有实践实例是不能充分理解的，更不太可能靠小概念来进行实际操作的。所以今天为大家奉上一个有关模拟音乐播放器小例子。希望大家通过这个下例子能够更好的理解和运用html5中的媒体元素。
html代码
<p class="player">
<p class="player-block bg">
<p class="controls">
<a style="" 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>
css代码
.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;}
javascript代码
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)) + 'px';
}
//总时间
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 '0' + num;
}
else{
return '' + 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='block';
$mute.style.display='none';
v('audio').muted = true;
$volumnbar.style.width = 7 + "px"
};
//取消静音
$unmute.onclick = function(){
$mute.style.display='block';
$unmute.style.display='none';
v('audio').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 + 'px';
var scale = l/($volumn.offsetwidth - $volpoint.offsetwidth);
v('audio').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 + 'px';
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;
};
}
//获取id
function v(idname){
return document.getelementbyid(idname);
}
//获取类名
function c(sclass){
var result = [];
var aele = document.getelementsbytagname('*');
var re = new regexp('\\b'+sclass+'\\b','i'); //\就是转义
for(var i=0;i<aele.length;i++){
if(re.test(aele[i].classname)){
result.push(aele[i]);
}
}
return result;
}
以上就是html5实战与剖析之媒体元素(5、音频实例)的内容。