作为初学者，制作一个网页播放器来提高我们编写代码水平很有用
这是css部分，很简单，随便信息样式就行
.musicDiv{width: 250px;height: 70px;background-color: red;position: relative;overflow: hidden;}.xia,.kais,.shang{width: 60px;float: left;}.musicAdress{height: 70px;}i{line-height: 70px;text-align: center;font-style: normal;font-size: 50px;padding-left: 22.5px;}
这里是js部分，我思路是先给播放键绑定事件，按下播放键为每一首歌曲绑定监听事件，记录他们播放结束，当播放结束后，歌曲会自动切换为下一首，用一个x来记录我当前播放歌曲的序号，
然后通过x+1来自动切换到下一首，而这个index是为手动切换上下歌曲服务的，这里用index来记录我当前播放歌曲，上下手动切换通过index--，index++实现。
<script>window.onload=function(){//获取元素var bof=document.getElementById("bof")var musicList=document.getElementsByClassName("musicList")var pre=document.getElementById("pre");var next=document.getElementById("next");var pause=document.getElementById("pause");//初始化音乐列表下标var index=0//设置播放暂停标志，一开始是播放的标志var flag=truebof.onclick=function(){/* console.log(index%musicList.length) */if(flag){musicList[index].play();bof.className="icon-zanting"//当为播放标志flag=falsefor(var i=0;i<musicList.length;i++){musicList[i].num=i//为每一首歌曲添加一个绑定事件musicList[i].addEventListener("ended",function(){x=this.num/* 这个很重要，是记录你当前点击绑定的歌曲的序号*/if(x>=musicList.length-1){/*这个是用来判断当前播放歌曲是否超出音乐列表的范围当超过重新从0开始*/x=0musicList[x].play();index=x//为切换歌曲服务}else{musicList[x+1].play();index=x+1//为切换歌曲服务}/* alert((x+1)%musicList.length)*/},false);}}else{musicList[index].pause();bof.className="icon-bofangjian"flag=true}}pre.onclick=function pre(){/* console.log(index%musicList.length) *//* if(index<0){musicList[musicList.length].play();} */musicList[index].pause();bof.className="icon-zanting"flag=false/*上面这两行代码解释下，因为一开始打开页面，是icon-bofangjian状态，按下键歌曲就会播放，然后变为icon-zanting状态，按播放下一首，应该以icon-zanting状态，flag值为flase，此时你想按暂停，键位就切换到icon-bofangjian状态*///musicList[index].currenTime=0index--/* console.log(index%musicList.length) */if(index<0){//当歌曲为第0首，下一首要切换为最后一首index=musicList.length-1;}musicList[index].play();}next.onclick=function next(){/* console.log(index%musicList.length) *//* if(index>musicList.length){musicList[0].play();} */musicList[index].pause();bof.className="icon-zanting"flag=false//musicList[index].currenTime=0index++//当歌曲为最后一首时候，下一首要切换为第0首if(index>=musicList.length){index=0}musicList[index].play();}}
html部分，把你要的歌曲放到src里面就可以了
<body><div class="musicDiv iconfont"><div class="shang"><i class="icon-shangyishoushangyige" id="pre"></i></div><div class="kais"><i class="icon-bofangjian" id="bof"></i></div><div class="xia"><i class="icon-xiayigexiayishou" id="next"></i></div><div class="musicAdress"><audio src="../music/认真地老去.flac" controls class="musicList"></audio><audio src="../music/漠河舞厅.mp3" controls class="musicList"></audio><audio src="../music/夏天的风.m4a" controls class="musicList"></audio><audio src="../music/想去海边.mp3" controls class="musicList"></audio><audio src="../music/慢慢喜欢你.m4a" controls class="musicList"></audio></div></div></body>
演示视频我放主页视频这里了，有什么见解欢迎讨论，谢谢大家
html音乐播放器 利用css和js知识来创建一个音乐播放器（虽然简陋 但是逻辑很容易懂 适合初学者）
如果觉得《html音乐播放器 利用css和js知识来创建一个音乐播放器（虽然简陋 但是逻辑很容易懂》对你有帮助，请点赞、收藏，并留下你的观点哦！
