Home >Web Front-end >H5 Tutorial >HTML5 practice and analysis of media elements (5, audio examples)
之前已经介绍过了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、音频实例)的内容,更多相关内容请关注PHP中文网(www.php.cn)!