charset="utf-8"title>*{margin:0;paddinglist-stylenone}.outerNodewidth505pxheight406pxpositionabsoluteleft50%top-204px 0 0 -253.5pxborder1px solid #a6a18dborder-radius8pxBox-shadow0 0 16px #a6a18d; .innerNode503px405pxborder-top1px solid #e1d1b9border-left1px solid #ceccbf8pxoverflowhiddenborder-right; .topNode100%198pxborder-bottom1px solid #787463backgroundurl(music/pic/fmt01.jpg) center centerbackground-sizecovertransition.7srelative.lineNodewidth46px1px solid #f9f7ee1px solid #a29d8aurl(musicimage/linebg.jpg) repeat-x;
.progressNode440px18pxfloatleft13px 0 0 28pxurl(musicimage/progressbg.jpg) repeat-x.progressNode .progressleft7pxbackgroundurl(musicimage/leftNode.jpg);
.progressNode .progressrightrighturl(musicimage/rightNode.jpg).bottomNode157pxurl(musicimage/bottombg.jpg) repeat-x.lastNode75px74pxurl(musicimage/lastBg.png) no-repeat118px39pxcursorpointer.playNode95px94pxurl(musicimage/playNode.png) no-repeat202px29px.nextNodeurl(musicimage/rightbg.png) no-repeat306px.volumeNode37px32pxurl(musicimage/volume.png) no-repeatposition43px58px.no_volumeNodeurl(musicimage/no_volume.png) no-repeat.trueLine3px2px12px0%url(musicimage/green_bg.png) repeat-x6pxborder-right;
.musicNamecolorwhitebottom5px}
body>
divclass='outerNode'>
innerNode 内层元素-->
='innerNode'>
topNode 封面图元素-->
='topNode'>
音乐名称-->
='musicName'divlineNode 进度条元素='lineNode'进度条='progressNode'>
='progressleft'='progressright'真正的进度条-->
='trueLine'bottomNode 空间元素='bottomNode'lastNode 上一曲的按钮='lastNode'playNode 播放暂停的按钮='playNode'nextNode 下一曲的按钮='nextNode'volumeNode 静音或非静音的按钮='volumeNode'script="text/javascript">
//播放暂停的按钮
playBln 控制播放暂停的布尔值
varplayBtn=document.querySelector('.playNode),playBln= true,控制声音的按钮
volumeBln 控制声音的布尔值
volumeNode.volumeNode进度条的选择器
trueLine.trueLine进度条外层的元素
progressNode.progressNode最外层元素
outerNode.outerNode选择一下封面背景
topNode.topNode下一首歌的按钮
nextNode.nextNode上一首歌的按钮
lastNode.lastNode音乐名称
musicName.musicName);给播放器添加js
创建audio对象
myAudionewAudio();给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}],Index0;
myAudio.srcallMusic[Index].MusicSrc;给封面赋值
topNode.style.backgroundImageurl(+allMusic[Index].MusicPic);给音乐名称
musicName.innerHTMLallMusic[Index].MusicName;谷歌浏览器不允许直接play
myAudio.play();
播放暂停的事件
playBtn.onclickfunction(){myAudio.play();
playBln!playBln;if(playBln== false){
myAudio.play();
}else{
myAudio.pause();
}
};声音的事件
volumeNode.onclick(){
volumeBlnvolumeBln;(volumeBln){
myAudio.volume;this.classNameno_volumeNode;
}{
myAudio.volume1volumeNode;
}
};播放时 进度条的长度控制计算
myAudio.addEventListener(timeupdate(){
trueLine.style.widthmyAudio.currentTime/myAudio.duration* 100 + %;
});点击progressNode元素 让进度条直接到达这个位置
progressNode.onclick(e){eve||event;算法 就是 算出 点击的位置 在 外层进度条的 多少像素
需要一个鼠标坐标点 减去 外层元素的 offsetLeft 和 最外层元素的offsetLeft
320秒 * 0.50 = 160秒
myAudio.currentTime*((ev.clientX-(.offsetLeftouterNode.offsetLeft))this.offsetWidth);
trueLine.style.widththis.offsetWidth) * 100 + '%';
};下一首歌的事件
nextNode.onclick(){
Index++;(Index==allMusic.length){
Index;
}
MusicPlayFn();
};音乐播放的函数
MusicPlayFn(){
myAudio.srcallMusic[Index].MusicSrc;
myAudio.currentTime;
trueLine.style.width0%{
myAudio.pause();
}topNode.style.backgroundImagemusicName.innerHTMLallMusic[Index].MusicName;
}上一首歌的点击事件
lastNode.onclick--){
IndexallMusic.length;
}
MusicPlayFn();
};script>