search

Home >Web Front-end >H5 Tutorial >html5 audio playback graphic example

html5 audio playback graphic example

零下一度
零下一度Original
2017-04-28 15:19:242118browse

The simple audio playback implemented based on html5 is quite good and can be used as a reference. The code is below 

<!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. [Picture] audioplay.png

html5 audio playback graphic example

The above is the detailed content of html5 audio playback graphic example. For more information, please follow other related articles on the PHP Chinese website!

Statement：
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
Previous article：Share an HTML5 e-magazine flip book special effect codeNext article：Share an HTML5 e-magazine flip book special effect code

Related articles

See more