实现如下效果,点击图标,实现音频播放。
图片素材: 取名 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: '到哪去' // 来源
});