js實現網頁音樂播放器

本文為大家分享了簡單的html，音樂播放器製作程式碼，供大家參考，具體內容如下

首先第一步找圖片資源音樂資源放入到img資料夾中

第二步對頁面佈局進行佈置

第三步書寫程式碼

複製程式碼執行的時候需要將圖片資源，音樂資源換個名稱。

執行實現圖片的切換，效果如圖：

js實現網頁音樂播放器

程式碼如下：

希望各位喜歡！！！

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/">
  * {
   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>fjqkk 

 <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" >靜音</button>
     <img class="bofang" src="img/播放.png" >
     <button class="play" type="button" >播放</button>
    </div>
    <div id="shangxia">
     <button class="prefer" type="button">上一首</button>
     <span>音量</span>
     <input class="volume" type="range"  min="0" max="1"step="0.01" />
     <button class="next" type="button">下一首</button>
    </div>
    
    
   </div>
   
  </div>
  
  <sc 
ript type="text/">
   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 volumnBtn=document.querySewww.cppcns.com 
lector(".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/播放.png';
     audio.value="播放";
     
    }else{
     audio.pause();
     bofang.src ='img/暫停.png';
     audio.value="暫停";
    }
    
   }
   mutedBtn.onclick=function(){
    if(audio.muted==true){
     audio.muted=false;
 http://www.cppcns.com   }
    else{
     audio.muted=true;
     bofang.src ='img/靜音.png';
    }
   }
   volumnBtn.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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

js實現網頁音樂播放器

js實現網頁音樂播放器

js實現簡單音樂播放器

android實現簡單音樂播放器

QT實現簡單音樂播放器

js實現控制音樂播放

js+audio實現音樂播放器

原生JS實現音樂播放器的示例程式碼

Vue.js實現音樂播放器

Android實現音樂播放器鎖屏頁

pygame編寫音樂播放器的實現程式碼示例

python實現音樂播放器 python實現花框音樂盒子

python實現可下載音樂的音樂播放器

基於python實現音樂播放器程式碼例項

Electron實現音樂播放器 - #1

基於Qt的網路音樂播放器，實現歌詞滾動顯示！QT還是好用的呀

iOS實現音樂播放器圖片旋轉

Android Studio實現音樂播放器

h5實現音樂播放器功能

如何不用音樂播放器批量下載音樂？只需幾分鐘，Python輕鬆實現！

js實現網頁圖片輪換播放

js實現網頁音樂播放器

相關推薦