audio对象
src兼容.ogg .wav .mp3
width autoplay loop muted静音
播放play()
var myAudio = new Audio(); myAudio.src = 'data/imooc.wav'; myAudio.play(); btn.onclick = function(){ myAudio.play(); };
暂停pause()
pauseNode.onclick = (){
myAudio.pause();
};
当前播放的时间currentTime
音频总时长duration
//返回音频的总长度 myAudio.addEventListener('canplay',(){ durationNode.innerHTML = myAudio.duration; }); 更新当前播放的时间 setInterval((){ currentNode.innerHTML = myAudio.currentTime; },100);
音频源currentSrc
loop循环
myAudio.loop = true;
音频播放结束ended
重新加载
loadBtn.onclick = (){
myAudio.load();
};
跳转到新的播放位置seeked / seeking
myAudio.addEventListener('seeked',1)">(){ console.log('seeked'); }); myAudio.addEventListener('seeking',1)">(){ console.log('seeking'); sekingNum++; seekingNum.innerHTML = sekingNum; });
playbackRate设置当前播放速度
全屏requestFullScreen
btnScreen.onclick = (){
myAudio.webkitRequestFullScreen();
}
loop 循环
myAudio.loop = true;
volumechange音量改变
myAudio.addEventListener('volumechange',1)">(){ console.log('音频的声音改变了') });
timeupdate音频正在播放状态
myAudio.addEventListener('timeupdate',1)">(){ console.log('音频正在播放中...') })
自定义mp3播放器
放图
<!doctype html> <htmlhead> Meta charset="utf-8"title></style type="text/css"> *{margin: 0;paddinglist-style none} .outerNodewidth 505pxheight 406pxposition absoluteleft 50%top -204px 0 0 -253.5pxborder 1px solid #a6a18dborder-radius8pxBox-shadow 0 0 16px #a6a18d; .innerNode 503px 405pxborder-top1px solid #e1d1b9border-left1px solid #ceccbf 8pxoverflow hiddenborder-right; .topNode 100% 198pxborder-bottom 1px solid #787463background url(music/pic/fmt01.jpg) center centerbackground-sizecover transition.7s relative .lineNode width 46px 1px solid #f9f7ee 1px solid #a29d8a url(musicimage/linebg.jpg) repeat-x; .progressNode 440px 18pxfloat left13px 0 0 28px url(musicimage/progressbg.jpg) repeat-x .progressNode .progressleft 7px background url(musicimage/leftNode.jpg); .progressNode .progressrightright url(musicimage/rightNode.jpg) .bottomNode 157px url(musicimage/bottombg.jpg) repeat-x .lastNode 75px 74px url(musicimage/lastBg.png) no-repeat 118px 39pxcursor pointer .playNode 95px 94px url(musicimage/playNode.png) no-repeat 202px 29px .nextNode url(musicimage/rightbg.png) no-repeat 306px .volumeNode 37px 32px url(musicimage/volume.png) no-repeat position 43px 58px .no_volumeNode url(musicimage/no_volume.png) no-repeat .trueLine 3px 2px 12px 0% url(musicimage/green_bg.png) repeat-x 6px border-right; .musicNamecolor whitebottom 5px} </style> body> <!-- outerNode 最外层的元素 --> div class='outerNode'> innerNode 内层元素 --> ='innerNode'> topNode 封面图元素 --> ='topNode'> 音乐名称 --> ='musicName'div lineNode 进度条元素 ='lineNode' 进度条='progressNode'> ='progressleft'='progressright' 真正的进度条 --> ='trueLine' bottomNode 空间元素 ='bottomNode' lastNode 上一曲的按钮='lastNode' playNode 播放暂停的按钮 ='playNode' nextNode 下一曲的按钮 ='nextNode' volumeNode 静音或非静音的按钮='volumeNode'script ="text/javascript"> //播放暂停的按钮 playBln 控制播放暂停的布尔值 var playBtn = document.querySelector('.playNode),playBln = true,控制声音的按钮 volumeBln 控制声音的布尔值 volumeNode .volumeNode进度条的选择器 trueLine .trueLine进度条外层的元素 progressNode .progressNode最外层元素 outerNode .outerNode选择一下封面背景 topNode .topNode下一首歌的按钮 nextNode .nextNode上一首歌的按钮 lastNode .lastNode音乐名称 musicName .musicName); 给播放器添加js 创建audio对象 myAudio new Audio(); 给audio对象一个 src 所有的数据存在数组里面 let allMusic [{ MusicSrcmusic/mus/AcousticGuitar1.mp3MusicPicmusic/pic/fmt01.jpgMusicNameAcousticGuitar1 },{ music/mus/AmazingGrace.mp3music/pic/fmt02.pngAmazingGrace },1)">music/mus/FeelsGood2B.mp3music/pic/fmt03.jpgFeelsGood2Bmusic/mus/FunBusyIntro.mp3music/pic/fmt04.jpgFunBusyIntromusic/mus/GreenDaze.mp3music/pic/fmt05.jpgGreenDazemusic/mus/Limosine.mp3music/pic/fmt06.jpgLimosine }],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 (){ volumeBln volumeBln; (volumeBln ){ myAudio.volume ; this.className no_volumeNode; } { myAudio.volume 1volumeNode; } }; 播放时 进度条的长度控制计算 myAudio.addEventListener(timeupdate(){ trueLine.style.width myAudio.currentTime / myAudio.duration * 100 + %; }); 点击progressNode元素 让进度条直接到达这个位置 progressNode.onclick (e){ ev e || event; 算法 就是 算出 点击的位置 在 外层进度条的 多少像素 需要一个鼠标坐标点 减去 外层元素的 offsetLeft 和 最外层元素的offsetLeft 320秒 * 0.50 = 160秒 myAudio.currentTime * ((ev.clientX - (.offsetLeft outerNode.offsetLeft))this.offsetWidth); trueLine.style.width this.offsetWidth) * 100 + '%'; }; 下一首歌的事件 nextNode.onclick (){ Index ++; (Index == allMusic.length){ Index ; } MusicPlayFn(); }; 音乐播放的函数 MusicPlayFn(){ myAudio.src allMusic[Index].MusicSrc; myAudio.currentTime ; trueLine.style.width 0%{ myAudio.pause(); } topNode.style.backgroundImage musicName.innerHTML allMusic[Index].MusicName; } 上一首歌的点击事件 lastNode.onclick --){ Index allMusic.length; } MusicPlayFn(); }; script>
