HTML5 practice and analysis of media elements (5, audio examples)-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 practice and analysis of media elements (5, audio examples)

黄舟

Feb 13, 2017 pm 01:53 PM

　　之前已经介绍过了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>

Copy after login

　　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;}

Copy after login

　　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)) + &#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;
	};


}

//获取id
function 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;
}

Copy after login

以上就是HTML5实战与剖析之媒体元素(5、音频实例)的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn