html5加个自动音频播放器,HTML5音频（自定义mp3播放器源码）

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>