h5音频插件

2019独角兽企业重金招聘Python工程师标准>>>

实现如下效果，点击图标，实现音频播放。

图片素材： 取名 play.jpg , silence.jpg

项目路径

js 代码

(function() {
	// 秒数转时间
	function timeToMinut(time){
		var min = parseInt(time/60) ;
		var sed = time % 60;
		min = (min < 10)? ('0'+min) : min;
		sed = (sed < 10)? ('0'+sed) : sed;
		return min +':'+ sed;
	};
	// 
	function lzyAudio(container, options) {
		this.container = document.querySelector(container) || document.querySelectorAll(container);
      	var self = this;
		
		// 初始化
	    this.init = function(){
	        if(!options) {
				throw new Error("请传入配置参数");
				return false;
			}
	        self.container.innerHTML = "<div class='col-3'><img src='img/silence.jpg'><audio src='"+
	        	options.audiosrc +"'></audio></div><div class='col-9'><div class='title-en'>"+ 
	        	options.title +"</div><div class='title-ch'>"+ 
	        	options.source +"</div><input type='range' ><div style='width: 99%;'><span>00:00</span><span style='float: right;'>00:00</span></div></div>";
	    	
	    	var lzyaudio = self.container.getElementsByTagName('audio')[0];
	    	var total = self.container.getElementsByTagName('span')[1];
	    	// 总时间设置
	    	setTimeout(function(){
	    		self.total(lzyaudio, total);
	    	}, 1000);
	    	
	    	var lzyrange = self.container.getElementsByTagName('input')[0]; // 获取进度条
	    	var current = self.container.getElementsByTagName('span')[0]; // 获取播放时间
	    	// 图片点击事件
	    	self.container.getElementsByTagName('img')[0].onclick = function(){
				var img = this;
				// 未播放
				if(img.src.search("silence") != -1){
					img.src = 'img/play.jpg';
					lzyaudio.play();
					//
					self.inter = setInterval(function(){
						self.interval(lzyaudio, lzyrange, current);
					}, 1000);
				}else{
					img.src = 'img/silence.jpg';
					lzyaudio.pause();
					clearInterval(self.inter);
				};
			}
	    	
	    };
		
		// 总时间设置
		this.total = function(audio, total){
			var duration = parseInt(audio.duration);
			total.innerHTML = timeToMinut(duration);
		};
		
		// 计时函数，显示播放时间
		this.interval = function(audio, lzyrange, current){
			var duration = parseInt(audio.duration);
			var currentTime = parseInt(audio.currentTime);
			current.innerHTML = timeToMinut(currentTime);
			var percent = currentTime/duration*100 + '%';
			lzyrange.style.backgroundSize = percent+' 100%';
		};
		
		this.statis = function(){
			
		};
		// 
      	return this.init();
	}
	window.lzyAudio = lzyAudio;
})();

css 代码

.row {
	width: 100%;
	height: 100%;
}

[class^="col-"] {
	float: left;
}

.col-1 {
	width: 8.33%;
}

.col-2 {
	width: 16.66%;
}

.col-3 {
	width: 25%;
}

.col-4 {
	width: 33.33%;
}

.col-5 {
	width: 41.66%;
}

.col-6 {
	width: 50%;
}

.col-7 {
	width: 58.33%;
}

.col-8 {
	width: 66.66%;
}

.col-9 {
	width: 75%;
}

.col-10 {
	width: 83.33%;
}

.col-11 {
	width: 91.66%;
}

.col-12 {
	width: 100%;
}

.audio {
	font-size: 12px;
	background: #fdfdfd;
	width: 99%;
	height: 100px;
	border: 1px solid #f0f0f0;
	margin: 5px auto;
	border-radius: 5px;
}
.audio img{
	margin-top: 25px;
}
.audio .col-3{
	text-align: center;
}
.audio .col-9{
	color: #ddd;
}
.audio .col-9 .title-en{
	color: #000;font-size: 14px; display: block;margin: 15px 0 0 3px;
}
.audio .col-9 .title-ch{
	margin: 3px 0 0 3px;
}
/* 滑块样式 */
input[type=range] {
	margin-top: 8px;
	outline: none;
	-webkit-appearance: none;
	width: 90% !important;
	background: -webkit-linear-gradient(#12aa11, #12aa11) no-repeat, #ddd;
	background: -moz-linear-gradient(#12aa11, #12aa11) no-repeat, #ddd;
	background-size: 0% 100%;
	height: 3px;
}

/*拖动块的样式*/
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	display: none;
}
input[type=range]::-moz-range-thumb {
	-webkit-appearance: none;
	display: none;
	border: none;
	height: 0;
	width: 0;
}

html 内容

<!-- 音频控件容器  -->
<div class="audio" id='audio1'></div>

js 调用

new lzyAudio('#audio1', {
  audiosrc: 'files/pfzl.mp3', // 音频地址
  title: '平凡之路', // 音频名称
  source: '到哪去' // 来源
});

 

转载于:https://my.oschina.net/u/3460260/blog/1924748