在日常操作或是项目的实际应用中，有不少朋友对于“用JS+HTML+CSS写音乐播放器的代码是什么”的问题会存在疑惑，下面小编给大家整理和分享了相关知识和质量，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。

效果

HTML代码

<!--播放器-->
<div id="player">
  <!--播放控件-->
  <div id="playerControl">
    <div class="playerImg">
      <img src="../images/demo3/1.jpg" alt="" width="150" height="150">
      <audio id="audio">
        <source src="../video/1.mp3">
      </audio>
    </div>
    <div id="pcontrol" class="clearfix">
      <button class="prev" ></button>
      <button id="play" class="play1" ></button>
      <button class="next" ></button>
      <button class="stop" ></button>
    </div>
  </div>
  <!--播放进度-->
  <div id="progrees">
    <div id="curProgrees"></div>
  </div>
  <!--播放时间-->
  <div id="playTime">
    <span id="presentTime">00 : 00</span>
    <span>/</span>
    <span id="totalTime">00 : 00</span>
  </div>
  <!--音频列表-->
  <div id="playerList">
    <ul>
      <li class="active">
        <span class="mr10">1</span>
        <span>Mascara</span>
        <span>-</span>
        <span>G.E.M. 邓紫棋</span>
      </li>
      <li>
        <span class="mr10">2</span>
        <span>西安人的歌</span>
        <span>-</span>
        <span>范炜与程渤智</span>
      </li>
      <li>
        <span class="mr10">3</span>
        <span>往后余生</span>
        <span>-</span>
        <span>李贰叁</span>
      </li>
    </ul>
  </div>
</div>

Css代码

*{margin:0; padding:0;}
.bd{border:1px solid red;}
.fl{float: left}
.fr{float:right}
.mr10{margin-right:10px;}
ul{list-style: none;}
.clearfix:after{content: ""; height:0; line-height: 0; visibility: hidden;display: block; clear:both;}
body{background:#262626; padding:50px 0; color:#fff; }

#player{width:600px; height:400px; background:#130519de;margin:0 auto;}
#playerControl{position:relative;height:200px;}
#playerControl .playerImg{padding:25px; box-sizing: border-box;}

/*播放控制界面*/
#pcontrol{position: absolute;left:300px; top:85px;}
#pcontrol button{float:left;margin:0 10px;border:0;outline: none; width:28px; height:28px;background:url("../../images/demo3/player.png") no-repeat}

/*暂停*/
#pcontrol .play1{background-position: -8px -8px}
#pcontrol .play1:hover{background-position: -49px -8px}

/*播放*/
#pcontrol .play2{background-position: -8px -49px}
#pcontrol .play2:hover{background-position: -49px -49px}

/*上一曲*/
#pcontrol .prev{background-position: 0 -112px}
#pcontrol .prev:hover{background-position: -30px -112px}

/*下一曲*/
#pcontrol .next{background-position: 0 -141px}
#pcontrol .next:hover{background-position: -30px -141px}
/*停止播放*/
#pcontrol .stop{background-position: 0 -84px}
#pcontrol .stop:hover{background-position: -30px -84px}

/*播放列表*/
#playerList{padding:20px 0px}
#playerList ul li{padding:10px 20px; }
#playerList ul li.active,#playerList ul li:hover{background:rgba(0, 0, 0, .4);color:#665975;cursor: pointer}

/*播放进度*/
#progrees{width:550px; height:5px; background:#ccc; margin:0 auto;}
#curProgrees{width:0px; height:100%; background:darkolivegreen;}

/*播放时间*/
#playTime{padding:10px 25px 0px; text-align: right;}

Js功能代码

window.onload = function (ev) {
  //获取元素
    var play = document.querySelector("#play");//播放按钮
    var audio = document.querySelector("#audio");//音频文件
    var next = document.querySelector(".next");//下一曲
    var prev = document.querySelector(".prev");//上一曲
    var stop = document.querySelector(".stop");//停止
    var playerListLi = playerList.querySelectorAll("li")//播放列表li
    var totalTime = document.querySelector("#totalTime");//总时间
    var presentTime = document.querySelector("#presentTime");//当前时间

  //歌曲地址
    var playerMusic = ["../video/1.mp3","../video/2.mp3","../video/3.mp3"];

  //1. 点击播放歌曲，再次点击播放暂停
    play.addEventListener("click",startPlay);
  //2.点击切换下一曲
    next.addEventListener("click",theNext);
  //3.点击切换上一曲
    prev.addEventListener("click",thePrev);
  //4.点击停止播放
    stop.addEventListener("click",stopPlay);



  //定义播放函数
    //1.1 定义标杆，判断是否播放歌曲
    var flag = true;
    function startPlay(){
      if(flag){
        play.className="play2";
        play.title = "暂停";
        audio.play();
        //播放进度
        playProgress();
        //播放时间
        playTime();
      }else{
        play.className="play1";
        play.title = "播放";
        audio.pause();
      }
      flag = !flag;
    }
  //定义下一曲
    var n = 0;//定义歌曲索引
    function theNext(){
      n++;
      if(n == playerMusic.length){
        n = 0;
      }
      audio.src = playerMusic[n];
      //歌曲播放
      flag = true;
      startPlay();
      //切换列表
      switchList();
    }
  //定义下一曲
    function thePrev(){
      n--;
      if(n < 0){
        n = playerMusic.length - 1;
      }
      audio.src = playerMusic[n];
      //歌曲播放
      flag = true;
      startPlay();
      //切换列表
      switchList();
    }
  //切换列表
    function switchList(){
      for(var i=0; i<playerListLi.length; i++){
        playerListLi[i].className = "";
      }
      playerListLi[n].className = "active";
    }
  //停止播放
    function stopPlay(){
      //设置当前播放时间为0;,并暂停播放
      audio.currentTime = 0;
      flag = false;
      startPlay();
    }

  //播放进度
    function playProgress(){
      //定义计时器
      var timer = null;
      if(flag){
        //开启计时器
        timer = setInterval(function(){
          if(audio.currentTime >= audio.duration){
            curProgrees.style.width = progrees.offsetWidth + "px";
            clearInterval(timer);
            theNext();
          }else{
            curProgrees.style.width = (audio.currentTime/audio.duration)*progrees.offsetWidth + "px";
          }

        },30);
      }else{
        //关闭计时器
        clearInterval(timer);
      }

    }
  //播放时间
    function playTime(){
      //当前时间
      var timer2 = null;
      if(flag){
        timer2 = setInterval(function(){
          //总时间
          setTime(audio.duration,totalTime);
          setTime(audio.currentTime,presentTime);
        },1000)
      }else{
        clearInterval(timer2)
      }
    }
  //设置时间
    function setTime(audioTime,obj){
      //总时间
      allMinute = Math.floor(audioTime/60);
      if(allMinute<10){
        allMinute = "0" + allMinute;
      }
      allSecond = Math.floor(audioTime%60);
      if(allSecond<10){
        allSecond = "0" + allSecond;
      }
      var allTime = allMinute + " : " + allSecond;
      obj.innerHTML = allTime;
    }
}

关于“用JS+HTML+CSS写音乐播放器的代码是什么”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注博信，小编每天都会为大家更新不同的知识。