audio对象
src兼容.ogg .wav .mp3
<audio controls src='data/imooc.wav'></audio>
width autoplay loop muted静音
<audio controls src='data/imooc.wav' autoplay loop width='500' height='500' muted></audio>
播放play()
var myaudio = new audio();
myaudio.src = 'data/imooc.wav';
myaudio.play();
btn.onclick = function(){
myaudio.play();
};
暂停pause()
pausenode.onclick = function(){
myaudio.pause();
};
当前播放的时间currenttime
音频总时长duration
//返回音频的总长度
myaudio.addeventlistener('canplay',function(){
durationnode.innerhtml = myaudio.duration;
});
//更新当前播放的时间
setinterval(function(){
currentnode.innerhtml = myaudio.currenttime;
},100);
音频源currentsrc
var myaudio = new audio();
myaudio.src = 'data/imooc.mp3';
console.log(myaudio.currentsrc);
loop循环
音频播放结束ended
myaudio.addeventlistener('ended',function(){
console.log('音频播放结束');
console.log(myaudio.ended)
});
重新加载
loadbtn.onclick = function(){
myaudio.load();
};
跳转到新的播放位置seeked / seeking
myaudio.addeventlistener('seeked',function(){
console.log('seeked');
});
myaudio.addeventlistener('seeking',function(){
console.log('seeking');
sekingnum++;
seekingnum.innerhtml = sekingnum;
});
playbackrate设置当前播放速度
myaudio.playbackrate = '15';
console.log(myaudio.playbackrate)
全屏requestfullscreen
btnscreen.onclick = function(){
myaudio.webkitrequestfullscreen();
}
loop 循环
volumechange音量改变
myaudio.addeventlistener('volumechange',function(){
console.log('音频的声音改变了')
});
timeupdate音频正在播放状态
myaudio.addeventlistener('timeupdate',function(){
console.log('音频正在播放中...')
})
自定义mp3播放器
放图
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.outernode{width: 505px;height: 406px;position: absolute;left: 50%;top: 50%;margin: -204px 0 0 -253.5px;border: 1px solid #a6a18d;border-radius:8px;box-shadow: 0 0 16px #a6a18d; }
.innernode{width: 503px;height: 405px;border-top:1px solid #e1d1b9;border-left:1px solid #ceccbf;border-radius: 8px;overflow: hidden;border-right:1px solid #ceccbf; }
.topnode{width: 100%;height: 198px;border-bottom: 1px solid #787463;background: url(music/pic/fmt01.jpg) center center;background-size:cover; transition:.7s;position: relative;}
.linenode{
width: 100%;height: 46px;border-top: 1px solid #f9f7ee;border-bottom: 1px solid #a29d8a;background: url(musicimage/linebg.jpg) repeat-x;
}
.progressnode{width: 440px;height: 18px;float: left;margin:13px 0 0 28px;background: url(musicimage/progressbg.jpg) repeat-x;position: relative; }
.progressnode .progressleft{
width: 7px;height: 100%;position: absolute;left: 0;
background: url(musicimage/leftnode.jpg);
}
.progressnode .progressright{
width: 7px;height: 100%;position: absolute;right: 0;
background: url(musicimage/rightnode.jpg);
}
.bottomnode{
width: 100%;height: 157px;border-top: 1px solid #a29d8a;
background: url(musicimage/bottombg.jpg) repeat-x;position: relative;
}
.lastnode{width: 75px;height: 74px;position: absolute;background: url(musicimage/lastbg.png) no-repeat;left: 118px;top: 39px;cursor: pointer;}
.playnode{width: 95px;height: 94px;position: absolute;background: url(musicimage/playnode.png) no-repeat;left: 202px;top: 29px;cursor: pointer;}
.nextnode{width: 75px;height: 74px;background: url(musicimage/rightbg.png) no-repeat;position: absolute;left: 306px;top: 39px;cursor: pointer;}
.volumenode{width: 37px;height: 32px;background: url(musicimage/volume.png) no-repeat; position: absolute;right: 43px;top: 58px;cursor: pointer;}
.no_volumenode{width: 37px;height: 32px;background: url(musicimage/no_volume.png) no-repeat; position: absolute;right: 43px;top: 58px;cursor: pointer;}
.trueline{position: absolute;left: 3px;top: 2px;height: 12px;width: 0%;
background: url(musicimage/green_bg.png) repeat-x;border-radius: 6px;
border-right: 1px solid #787463;
}
.musicname{color: white;position: absolute;bottom: 2px;left: 5px;}
</style>
</head>
<body>
<!-- outernode 最外层的元素 -->
<div class='outernode'>
<!-- innernode 内层元素 -->
<div class='innernode'>
<!-- topnode 封面图元素 -->
<div class='topnode'>
<!-- 音乐名称 -->
<div class='musicname'></div>
</div>
<!-- linenode 进度条元素 -->
<div class='linenode'>
<!-- 进度条-->
<div class='progressnode'>
<div class='progressleft'></div>
<div class='progressright'></div>
<!-- 真正的进度条 -->
<div class='trueline'></div>
</div>
</div>
<!-- bottomnode 空间元素 -->
<div class='bottomnode'>
<!-- lastnode 上一曲的按钮-->
<div class='lastnode'></div>
<!-- playnode 播放暂停的按钮 -->
<div class='playnode'></div>
<!-- nextnode 下一曲的按钮 -->
<div class='nextnode'></div>
<!-- volumenode 静音或非静音的按钮-->
<div class='volumenode'></div>
</div>
</div>
</div>
<script type="text/javascript">
//播放暂停的按钮
//playbln 控制播放暂停的布尔值
var playbtn = document.queryselector('.playnode'),
playbln = true,
//控制声音的按钮
//volumebln 控制声音的布尔值
volumenode = document.queryselector('.volumenode'),
volumebln = true,
//进度条的选择器
trueline = document.queryselector('.trueline'),
//进度条外层的元素
progressnode = document.queryselector('.progressnode'),
//最外层元素
outernode = document.queryselector('.outernode'),
//选择一下封面背景
topnode = document.queryselector('.topnode'),
//下一首歌的按钮
nextnode = document.queryselector('.nextnode'),
//上一首歌的按钮
lastnode = document.queryselector('.lastnode'),
//音乐名称
musicname = document.queryselector('.musicname');
//给播放器添加js
//创建audio对象
var myaudio = new audio();
//给audio对象一个 src
//所有的数据存在数组里面
let allmusic = [{
'musicsrc':'music/mus/acousticguitar1.mp3',
'musicpic':'music/pic/fmt01.jpg',
'musicname':'acousticguitar1'
},{
'musicsrc':'music/mus/amazinggrace.mp3',
'musicpic':'music/pic/fmt02.png',
'musicname':'amazinggrace'
},{
'musicsrc':'music/mus/feelsgood2b.mp3',
'musicpic':'music/pic/fmt03.jpg',
'musicname':'feelsgood2b'
},{
'musicsrc':'music/mus/funbusyintro.mp3',
'musicpic':'music/pic/fmt04.jpg',
'musicname':'funbusyintro'
},{
'musicsrc':'music/mus/greendaze.mp3',
'musicpic':'music/pic/fmt05.jpg',
'musicname':'greendaze'
},{
'musicsrc':'music/mus/limosine.mp3',
'musicpic':'music/pic/fmt06.jpg',
'musicname':'limosine'
}],index = 0;
myaudio.src = allmusic[index].musicsrc;
//给封面赋值
topnode.style.backgroundimage = 'url('+allmusic[index].musicpic+')';
//给音乐名称
musicname.innerhtml = allmusic[index].musicname;
//谷歌浏览器不允许直接play
//myaudio.play();
//播放暂停的事件
playbtn.onclick = function(){
//myaudio.play();
playbln = !playbln;
if(playbln == false){
myaudio.play();
}
else{
myaudio.pause();
}
};
//声音的事件
volumenode.onclick = function(){
volumebln = !volumebln;
if(volumebln == false){
myaudio.volume = 0;
this.classname = 'no_volumenode';
}
else{
myaudio.volume = 1;
this.classname = 'volumenode';
}
};
//播放时 进度条的长度控制计算
myaudio.addeventlistener('timeupdate',function(){
trueline.style.width = myaudio.currenttime / myaudio.duration * 100 + '%';
});
//点击progressnode元素 让进度条直接到达这个位置
progressnode.onclick = function(e){
var ev = e || event;
//算法 就是 算出 点击的位置 在 外层进度条的 多少像素
//需要一个鼠标坐标点 减去 外层元素的 offsetleft 和 最外层元素的offsetleft
// 320秒 * 0.50 = 160秒
myaudio.currenttime = myaudio.duration * ((ev.clientx - (this.offsetleft + outernode.offsetleft))/this.offsetwidth);
trueline.style.width = ((ev.clientx - (this.offsetleft + outernode.offsetleft))/this.offsetwidth) * 100 + '%';
};
//下一首歌的事件
nextnode.onclick = function(){
index ++;
if(index == allmusic.length){
index = 0;
}
musicplayfn();
};
//音乐播放的函数
function musicplayfn(){
myaudio.src = allmusic[index].musicsrc;
myaudio.currenttime = 0;
trueline.style.width = '0%';
if(playbln == false){
myaudio.play();
}
else{
myaudio.pause();
}
//给封面赋值
topnode.style.backgroundimage = 'url('+allmusic[index].musicpic+')';
//给音乐名称
musicname.innerhtml = allmusic[index].musicname;
}
//上一首歌的点击事件
lastnode.onclick = function(){
index --;
if(index == -1){
index = allmusic.length-1;
}
musicplayfn();
};
</script>
</body>
</html>