suchen

Heim >Web-Frontend >H5-Tutorial >Grafikbeispiel für die HTML5-Audiowiedergabe

Grafikbeispiel für die HTML5-Audiowiedergabe

零下一度
零下一度Original
2017-04-28 15:19:242140Durchsuche

Die einfache Audiowiedergabe auf Basis von HTML5 ist recht gut und kann als Referenz verwendet werden. Der Code ist unten 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
	<link rel="shortcut icon" href="img/logo.png">
	<title>html5 audio音频播放</title>
	<style>
		*{ margin: 0; padding:0;}
		body{-webkit-tap-highlight-color: rgba(0,0,0,0); font-family: "微软雅黑"}
		h1{ width: 100%; font-size: 1.5em; text-align: center; line-height: 3em; color:#47c9af; }
		#audio{ width: 100%;}
		#control{ width: 150px; height: 150px; line-height: 150px; text-align: center; border-radius: 200px; border:none; color:#fff; margin-top: -75px; margin-left:-75px; left:50%; top:50%; position: absolute; box-shadow: #888 0 0 8px;}
		.color_gray{ background: #e4e4e4}
		.hide{ display: none;}
		.show{ display: block;}
		.play{ background:  #f06060;}
		.pause{ background:skyblue}
		/*进度条样式*/
		.progressBar{ width: 100%; height: 10px;margin: 30px auto 30px auto; position:absolute; left: 0; bottom: 35px;}
		.progressBar p{ position: absolute;}
		.progressBar .progressBac{ width: 100%; height: 10px;  left: 0; top:0; background: #e4e4e4;}
		.progressBar .speed{width: 100%; height: 10px; left: -100%; background: #f06060; }
		.progressBar .drag{ width: 30px; height: 30px; left: 0; top:-10px;  background: skyblue; opacity: 0.8; border-radius: 50px; box-shadow: #fff 0 0 5px;}
		/*时间样式*/
		#time{ width: 100%; height: 20px;position: absolute; left: 0; bottom:30px; color:#888;}
		.tiemDetail{ position: absolute; right:10px; top:0;}
		#songInfo{overflow: hidden; width: 200px; height:50px; line-height: 50px; text-align: center; color:#34495e;   margin-top: -25px; margin-left:-100px; left:50%; top:70%; position: absolute;}
		.shareImg{ position: absolute; left: 100000px;}
	</style>
</head>
	
<body>
	<script>
$(function() {
	getSong();
})

//获取歌曲链接并插入dom中
function getSong() { 
	var audio = document.getElementById("audio");
	audio.src = "http://frontman.qiniudn.com/songnotime.mp3";
	audio.loop = true; //歌曲循环
	playCotrol(); //播放控制函数

}

//点击播放/暂停
function clicks() {
	var audio = document.getElementById("audio");
	$("#control").click(function() {
		if ($("#control").hasClass("play")) {
			$("#control").addClass("pause").removeClass("play");
			audio.play();//开始播放
			dragMove();//并且滚动条开始滑动
			$("#control").html("暂停播放");
		} else {
			$("#control").addClass("play").removeClass("pause");
			$("#control").html("点击播放");
			audio.pause();
		}
	})
}

//播放时间
function timeChange(time, timePlace) {//默认获取的时间是时间戳改成我们常见的时间格式
	var timePlace = document.getElementById(timePlace);
	//分钟
	var minute = time / 60;
	var minutes = parseInt(minute);
	if (minutes < 10) {
		minutes = "0" + minutes;
	}
	//秒
	var second = time % 60;
	seconds = parseInt(second);
	if (seconds < 10) {
		seconds = "0" + seconds;
	}
	var allTime = "" + minutes + "" + ":" + "" + seconds + ""
	timePlace.innerHTML = allTime;
}

//播放事件监听
function playCotrol() {
	audio.addEventListener("loadeddata", //歌曲一经完整的加载完毕( 也可以写成上面提到的那些事件类型)
		function() {
			$("#control").addClass("play").removeClass("color_gray");
			$("#control").html("点击播放");
			addListenTouch(); //歌曲加载之后才可以拖动进度条
			var allTime = audio.duration;
			timeChange(allTime, "allTime");
			setInterval(function() {
				var currentTime = audio.currentTime;
				$("#time .currentTime").html(timeChange(currentTime, "currentTime"));
			}, 1000);
			clicks();
		}, false);

	audio.addEventListener("pause",
		function() { //监听暂停
			$("#control").addClass("play").removeClass("pause");
			$("#control").html("点击播放");
			if (audio.currentTime == audio.duration) {
				audio.stop();
				audio.currentTime = 0;
			}
		}, false);
	audio.addEventListener("play",
		function() { //监听暂停
			$("#control").addClass("pause").removeClass("play");
			$("#control").html("暂停播放");
			dragMove();
		}, false);
	audio.addEventListener("ended", function() {
		alert(0)
	}, false)
}
	
//进度条
这里我用的是事件实现进度拖动 如果不太熟悉touch的可以看下我之前写的一个小demo http://www.cnblogs.com/leinov/p/3701951.html
 var startX, x, aboveX = 0; //触摸时的坐标 //滑动的距离  //设一个全局变量记录上一次内部块滑动的位置 

//1拖动监听touch事件
function addListenTouch() {
	document.getElementById("drag").addEventListener("touchstart", touchStart, false);
	document.getElementById("drag").addEventListener("touchmove", touchMove, false);
	document.getElementById("drag").addEventListener("touchend", touchEnd, false);
	var drag = document.getElementById("drag");
	var speed = document.getElementById("speed");
}

//touchstart,touchmove,touchend事件函数
 function touchStart(e) {  
 	e.preventDefault();
 	var touch = e.touches[0];
 	startX = touch.pageX; 
 }
 function touchMove(e) { //滑动          
 	e.preventDefault();
 	var touch = e.touches[0];
 	x = touch.pageX - startX; //滑动的距离
 	//drag.style.webkitTransform = &#39;translate(&#39; + 0+ &#39;px, &#39; + y + &#39;px)&#39;;  //也可以用css3的方式     
 	drag.style.left = aboveX + x + "px"; //  
 	speed.style.left = -((window.innerWidth) - (aboveX + x)) + "px";
 }
 function touchEnd(e) { //手指离开屏幕
 	e.preventDefault();
 	aboveX = parseInt(drag.style.left);
 	var touch = e.touches[0];
 	var dragPaddingLeft = drag.style.left;
 	var change = dragPaddingLeft.replace("px", "");
 	numDragpaddingLeft = parseInt(change);
 	var currentTime = (numDragpaddingLeft / (window.innerWidth - 30)) * audio.duration;//30是拖动圆圈的长度，减掉是为了让歌曲结束的时候不会跑到window以外
 	audio.currentTime = currentTime;
 }
//3拖动的滑动条前进
function dragMove() {
	setInterval(function() {
		drag.style.left = (audio.currentTime / audio.duration) * (window.innerWidth - 30) + "px";
		speed.style.left = -((window.innerWidth) - (audio.currentTime / audio.duration) * (window.innerWidth - 30)) + "px";
	}, 500);
}
</script>

<h1>html5 audio 音频播放demo</h1>

<!--audiostart-->
<audio id="audio" src=""  loop="loop" autoplay="autoplay" ></audio>
<!--audio End-->



<!--播放控制按钮start-->
<button id="control" class="">loading</button>
<!--播放控制按钮end-->

<!--时间进度条块儿start-->
<section class="progressBar">
	<p class="progressBac"></p>
	<p class="speed" id="speed"></p>
	<p class="drag" id="drag"></p>
</section>
<!--时间进度条块儿end-->

<!--播放时间start-->
<p id="time"><p class="tiemDetail"><span class="currentTime" id="currentTime">00:00</span>/<span class="allTime" id="allTime">00:00</span></p></p>
<!--播放时间end-->
<!--歌曲信息start-->
<p id="songInfo">没时间-Leinov<p class="shareImg"><img src="img/html5audio.jpg" alt=""></p></p>
<!--歌曲信息end-->
<script src="js/zepto.js"></script>
</body>
</html>

2. [Bild] audioplay.png

Grafikbeispiel für die HTML5-Audiowiedergabe

Das obige ist der detaillierte Inhalt vonGrafikbeispiel für die HTML5-Audiowiedergabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Teilen Sie einen HTML5-E-Magazin-Flipbook-SpezialeffektcodeNächster Artikel：Teilen Sie einen HTML5-E-Magazin-Flipbook-Spezialeffektcode

In Verbindung stehende Artikel

Mehr sehen