HTML5實戰與剖析之媒體元素(5、音頻實例)

來源：懂視網責編：小OO 時間：2020-11-27 15:12:59

HTML5實戰與剖析之媒體元素(5、音頻實例)

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="。

推薦度：

點擊下載本文 文檔為doc格式

導讀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="。

　　之前已經介紹過了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;
}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com