关于HTML5中audio音频播放器的一些理解

浏览数：42 / 时间：2015年06月09日

最近由于工作需要音频，了解到了HTML5中新兴的audio音频播放器。关于它本身的自带的属性不过多介绍，但是需要着重提到的就是它自身就有play()和pause()两个函数可以拿来直接使用，也就是我们经常遇到的播放和暂停功能。下面是我写的实例，有兴趣的朋友可以下载附件观看。今天晚上能把这个问题搞出来，基本上HTML5中audio的一些常见，常用的需求都可以解决了。开心～技术分享

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>audio播放器</title>
<style>
body{ background:#000; }
/*音乐图标*/
#audio_btn{
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 200;
	display: none;
	width: 50px;
	height: 50px;
	background-repeat: no-repeat;
	/*background-repeat: no-repeat;*/
	/*background-size: 100% 100%;*/
	/*background-position: 0px 0px;*/
	}	
	.loading_background {
		background-image: url(images/music_loading.gif);
		background-size: 30px 30px;
		opacity: 0.5;
		background-position: center center;
	}
	.loading_yinfu {
		position: absolute;
		left: 10px;
		top: 10px;
		width: 30px;
		height:30px;
		background-image: url(images/yinfu.png);
		background-repeat: no-repeat;
		background-position: center center;
	}

	.play_yinfu {
		background-image: url(images/music.gif);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 60px 60px;
	}
	.rotate {
		position: absolute;
		left: 10px;
		top: 10px;
		width: 30px;
		height: 30px;
		background-size: 100% 100%;
		background-image: url(images/music_off.png);
		-webkit-animation: rotating 1.2s linear infinite;
		-moz-animation: rotating 1.2s linear infinite;
		-o-animation: rotating 1.2s linear infinite;
		animation: rotating 1.2s linear infinite;
	}

	@-webkit-keyframes rotating {
	    from{
	        -webkit-transform: rotate(0deg);
	    }
	    to{
	        -webkit-transform: rotate(360deg);
	    }
	}
	@keyframes rotating {
	    from{
	        transform: rotate(0deg);
	    }
	    to{
	        transform: rotate(360deg);
	    }
	}

	@-moz-keyframes rotating {
	    from{
	        -moz-transform: rotate(0deg);
	    }
	    to{
	        -moz-transform: rotate(360deg);
	    }
	}
/*#audio_btn.off{background-position: 0px -30px;}*/
.off{background-image: url(images/music_off.png);background-size: 30px 30px; background-repeat: no-repeat;background-position: center center;}
</style>
</head>

<body>
<div id="audio_btn" class="play_yinfu" style="display: block;">
    <div id="yinfu" class="rotate"></div>
    <audio loop="" src="http://res.eqxiu.com/group1/M00/C1/80/yq0KA1SBxH-AXyFZACYJPHiWsYg966.mp3" id="media" autoplay="" preload="">对不起，您的浏览器不支持音频播放～</audio>
</div>
</body>
</html>
<script>
window.onload = function () {
	var oAudioBtn = document.getElementById(‘audio_btn‘);
	var onOff = true;
	
	oAudioBtn.onclick = function () {
		if(onOff){
			document.getElementById(‘media‘).pause();
			document.getElementById(‘audio_btn‘).className = ‘off‘;
			document.getElementById(‘yinfu‘).className = ‘‘;
			onOff = false;
		}else{
			document.getElementById(‘media‘).play();
			document.getElementById(‘audio_btn‘).className = ‘play_yinfu‘;
			document.getElementById(‘yinfu‘).className = ‘rotate‘;
			onOff = true;
		}
	};
};
</script>

本文出自 “赵庆贝” 博客，请务必保留此出处http://zhaoqingbei.blog.51cto.com/702395/1600903

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

关于HTML5中audio音频播放器的一些理解