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

青旅半醒 2022-09-20 08:30 154阅读 0赞

之前已经介绍过了HTML5中媒体元素的相关小概念，和一些事件方法。光有一些理论基础，没有实践实例是不能充分理解的，更不太可能靠小概念来进行实际操作的。所以今天为大家奉上一个有关模拟音乐播放器小例子。希望大家通过这个下例子能够更好的理解和运用HTML5中的媒体元素。

***HTML代码***

<div class="player">
    	<div class="player-block bg">
    		<div 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>
    		</div>
    		<div class="seprator bg"></div>
    		<div class="info">
    			<div id="song-name" class="song-name">欢迎使用音乐网播放器!</div>
    			<div id="totaltime" class="time">00:00</div>
    			<div class="s">/</div>
    			<div id="playtime" class="time1">00:00</div>
    			<div id="tracks" class="tracks bg">
    				<div class="download-bar bg" style="width: 0%;">
    					<div class="l bg">l</div>
    					<div class="r bg">r</div>
    				</div>
    				<div id="seek-bar" class="seek-bar bg" style="width: 0%;">
    					<div class="l bg"></div>
    					<div class="r bg"></div>
    					<div id="point" class="point bg"></div>
    				</div>
    			</div>
    		</div>
    		<div class="seprator bg"></div>
    		<div class="volumn">
    			<a id="mute" class="mute mode-bg" style="display: block;"></a>
    			<a id="unmute" class="unmute mode-bg" style="display: none;"></a>
    			<div class="line bg">
    				<div id="volumn" class="tracks">
    					<div id="volumnBar"class="volumn-bar bg" style="width: 100%;">
    					  <div class="l bg"></div>
    					  <div class="r bg"></div>
    					  <div id="volPoint" class="point bg"></div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    	<div class="player-r bg"></div>
    </div>
    <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.οnlοad=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、音频实例)就为大家介绍完了，希望能对大家有所帮助，这仅仅是是PC端上的小例子，仅仅能在支持HTML5音频的浏览器中进行播放，并且浏览器支持mp3格式和ogg格式的才可以播放。更多有关HTML5的相关知识尽在梦龙小站的HTML5实战与剖析部分，感谢大家的支持。