html音乐播放器利用css和js知识来创建一个音乐播放器（虽然简陋，但是逻辑很容易懂，适合初学者）

至尊鸡

已于 2023-11-30 09:34:23 修改

阅读量3.2k

点赞数 3

分类专栏：静态项目（js）文章标签： javascript css html

于 2022-08-16 23:03:53 首次发布

本文链接：https://blog.csdn.net/m0_72190449/article/details/126375412

版权

静态项目（js）专栏收录该内容

9 篇文章 0 订阅

订阅专栏

作为初学者，制作一个网页播放器来提高我们编写代码水平很有用

这是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=true

        bof.onclick=function(){
            /* console.log(index%musicList.length) */
            if(flag){
                musicList[index].play();
                bof.className="icon-zanting"//当为播放标志
                flag=false
                for(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=0
                            musicList[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=0
            index--
            /* 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=0
            index++
            //当歌曲为最后一首时候，下一首要切换为第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>

演示视频我放主页视频这里了，有什么见解欢迎讨论，谢谢大家