效果图
audio.HTML
<!DOCTYPE HTML><HTML lang="en"head> Meta charset="UTF-8"Title>audio</style> *{margin:0;paddingList-style none} /*设置margin时不要忘了考虑border*/ .outerNodewIDth505pxheight406pxposition absolutetop50%margin-top-204pxleftmargin-left-253.5pxborder1px solID #a6a18dborder-radius8pxBox-shadow0 0 16px #bdbab1} .innerNode504px405pxborder-top1px solID #e0d0baborder-left1px solID #ceccbfoverflowhIDden;border-radius:8px;} 封面图 .topNode100%198pxborder-bottom1px solID #787463backgroundurl(music/pic/fmt01.jpg) center centerbackground-sizecoverTransitionall .7s relative .musicname2pxbottom5pxcolor#fff进度条 .lineNode46px1px solID #f9f7ee1px solID #a29d8aurl(musicimage/linebg.jpg) repeat-x .progressNode440px18px13px 0 0 28pxurl(musicimage/progressbg.jpg) repeat-x .progressleft7pxurl(musicimage/leftNode.jpg) .progressRightrighturl(musicimage/rightNode.jpg) .trueline3px0%12pxurl(musicimage/green_bg.png) repeat-x 6pxborder-right控件 .bottomNode157px1px solID #7e7670url(musicimage/bottombg.jpg)定位时记得考虑减去元素阴影的宽高 .lastNode75px74px39px118pxurl(musicimage/lastBg.png)cursorpointer .playNode95px94px29px202pxurl(musicimage/playNode.png) .nextNode306pxurl(musicimage/rightBg.png) .volumeNode37px32px58px43pxurl(musicimage/volume.png) .no_volumeurl(musicimage/no_volume.png)} bodydiv class="outerNode"> ="innerNode"> <!-- 封面图 --> ="topNode"> ="musicname"></div 进度条 ="lineNode"="progressNode"> ="progressleft"="progressRight" 真正的进度条 --> ="trueline" 控件元素 ="bottomNode"="lastNode"="playNode"="nextNode"="volumeNode"> script> var audio=new Audio(); // 播放暂停 playNodedocument.querySelector(".playNode); isPlayfalse; playNode.onclickfunction(){ if(isPlay===){ audio.play(); }else{ audio.pause(); } isPlay=!isPlay; } 是否静音 volumeNode.volumeNode isMuted; volumeNode.onclick(){ isMutedisMuted; (isMuted){ audio.volume1; this.classnamevolumeNode; }{ audio.volumeno_volume; } } 音乐播放，进度条移动 trueline.trueline); audio.addEventListener(timeupdate,(){ trueline.style.wIDthaudio.currentTime/audio.duration*100+"%"; }) 手动控制进度条 progressNode.progressNode outerNode.outerNode); progressNode.onclick(e){ eve||event; percent(ev.clIEntX-(.offsetleft+outerNode.offsetleft))this.offsetWIDth; audio.currentTimeaudio.duration*percent; trueline.style.wIDthpercent100%; } 上下首歌切换 let allMusic[{ musicSrcmusic/mus/Acousticguitar1.mp3musicPicmusic/pic/fmt01.jpgmusicnameAcousticguitar1 },{ music/mus/AmazingGrace.mp3music/pic/fmt02.pngAmazingGracemusic/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; topNode.topNode musicname.musicname); toggleMusic(index); lastNode.lastNode nextNode.nextNode); lastNode.onclick(){ index--; indexindex<?allMusic.length:index; toggleMusic(index); } nextNode.onclick++:index; toggleMusic(index); } toggleMusic(index){ audio.srcallMusic[index].musicSrc; audio.currentTime; true{ audio.pause(); } topNode.style.backgroundImageurl(allMusic[index].musicPic); trueline.style.wIDth; musicname.INNERHTMLallMusic[index].musicname; } HTML>
总结
以上是内存溢出为你收集整理的audio实现自定义音频播放器全部内容，希望文章能够帮你解决audio实现自定义音频播放器所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）