ウェブ音楽プレーヤーを実現する js

この記事では、参考までに簡単なHTMLと音楽プレーヤーの制作コードを紹介します。具体的な内容は以下のとおりです。

まず、画像リソースと音楽リソースを見つけて、imgフォルダに入れます。

2番目のステップはページレイアウトを整えることです

3番目のステップはjsコードを書くことです

コードをコピーして実行する場合、画像リソースと音楽リソースの名前を変更する必要があります。

実行すると画像が切り替わり、効果は次のようになります。

コードは次のとおりです。

気に入っていただけると嬉しいです！！！

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8" />
  <タイトル></タイトル>
  <スタイル タイプ="text/css">
  * {
   マージン: 0;
   パディング: 0;
  }
  体{
   背景色:#596653;
  }
     .yinyue {
   幅: 300ピクセル;
   高さ: 300px;
   境界線: 1px 水色;
   マージン:50px 500px;
  }
  
  
  .bofang {
   幅: 100ピクセル;
   高さ: 100px;
   背景色: 水色;
  }
  .muted ,.play,.prefer,.next{
   幅: 60ピクセル;
   高さ: 30px;
   背景色: アクアマリン;
   テキスト配置: 中央;
   行の高さ: 30px;
  }
      #公志、#尚夏
    マージン: 10px 530px;
   }
   
  
  
  </スタイル>
 </head>
 <本文>
  
  <div id="コンテンツ">
   <img class="yinyue" src="img/yinyue1.jpg" >
   <audio src="img/yinyue1.mp3" >
   </音声>
   <div id="anniu">
    <div id="kongzhi">
     <button class="muted" type="button" >ミュート</button>
     <img class="bofang" src="img/play.png" >
     <button class="play" type="button" >再生</button>
    </div>
    <div id="上夏">
     <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>
  
  <script type="text/javascript">
   var インデックス = 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=関数(){
    オーディオ一時停止===trueの場合{
     オーディオを再生します。
     bofang.src='img/play.png';
     audio.value="再生";
     
    }それ以外{
     オーディオを一時停止します。
     bofang.src = 'img/pause.png';
     audio.value="一時停止";
    }
    
   }
   mutedBtn.onclick=関数(){
    if(audio.muted==true){
     オーディオをミュートします。
    }
    それ以外{
     オーディオをミュートします。
     bofang.src = 'img/silent.png';
    }
   }
   volumeBtn.onchange=関数(){
        audio.volume=volumnBtn.value;
   }
   優先するonclick=関数(){
    索引 - ;
    if(インデックス<0){
     インデックス=srcs.length-1;
    }
    audio.srcs = srcs[インデックス];
    yinyue.src=imgArr[インデックス];
    
   }
   
   nextBtn.onclick=関数(){
    インデックス++;
    if(index==srcs.length){
     インデックス=0;
    }
    audio.src = srcs[インデックス];
    yinyue.src=imgArr[インデックス];
   }
  </スクリプト>
 </本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: