js to realize web music player

This article shares simple HTML and music player production code for your reference. The specific content is as follows

First , find the picture resources and music resources and put them into the img folder

The second step is to arrange the page layout

The third step is to write js code

When you copy and run the code, you need to change the name of the image resources and music resources.

Run to switch the pictures, the effect is as shown below:

The code is as follows:

Hope you like it! ! !

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
  * {
   margin: 0;
   padding: 0;
  }
  body{
   background-color:#596653;
  }
     .yinyue {
   width: 300px;
   height: 300px;
   border: 1px solid aqua;
   margin:50px 500px;
  }
  
  
  .bofang {
   width: 100px;
   height: 100px;
   background-color: aqua;
  }
  .muted ,.play,.prefer,.next{
   width: 60px;
   height: 30px;
   background-color: aquamarine;
   text-align: center;
   line-height: 30px;
  }
      #kongzhi ,#shangxia
    margin: 10px 530px;
   }
   
  
  
  </style>
 </head>
 <body>
  
  <div id="content">
   <img class="yinyue" src="img/yinyue1.jpg" >
   <audio src="img/yinyue1.mp3" >
   </audio>
   <div id="anniu">
    <div id="kongzhi">
     <button class="muted" type="button" >Mute</button>
     <img class="bofang" src="img/play.png" >
     <button class="play" type="button" >Play</button>
    </div>
    <div id="shangxia">
     <button class="prefer" type="button">Previous song</button>
     <span>Volume</span>
     <input class="volume" type="range" min="0" max="1"step="0.01" />
     <button class="next" type="button">Next song</button>
    </div>
    
    
   </div>
   
  </div>
  
  <script type="text/javascript">
   var index=0;
   
   var srcs=['img/yinyue1.mp3','img/yinyue2.mp3','img/yinyue3.mp3'];
            var imgArr=['img/yinyue1.jpg','img/yinyue2.jpg','img/yinyue3.jpg'];
   var audio = document.querySelector("audio");
   var playBtn = document.querySelector(".play");
   var mutedBtn = document.querySelector(".muted");
   var volumeBtn = document.querySelector(".volume");
   var bofang = document.querySelector('.bofang');
   var prefer = document.querySelector(".prefer");
   var nextBtn = document.querySelector(".next");
   var yinyue = document.querySelector(".yinyue")
   
   
   playBtn.onclick=function(){
    if(audio.paused===true){
     audio.play();
     bofang.src='img/play.png';
     audio.value="play";
     
    }else{
     audio.pause();
     bofang.src = 'img/pause.png';
     audio.value="pause";
    }
    
   }
   mutedBtn.onclick=function(){
    if(audio.muted==true){
     audio.muted=false;
    }
    else{
     audio.muted=true;
     bofang.src = 'img/silent.png';
    }
   }
   volumeBtn.onchange=function(){
        audio.volume=volumnBtn.value;
   }
   prefer.onclick=function(){
    index--;
    if(index<0){
     index=srcs.length-1;
    }
    audio.srcs = srcs[index];
    yinyue.src=imgArr[index];
    
   }
   
   nextBtn.onclick=function(){
    index++;
    if(index==srcs.length){
     index=0;
    }
    audio.src = srcs[index];
    yinyue.src=imgArr[index];
   }
  </script>
 </body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: