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

ウェブ音楽プレーヤーを実現する 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue.jsは音楽プレーヤーを実装します
  • Pythonを使用してTik Tokから音楽を一度にダウンロードする方法
  • Python ウェブクローラーを使用して主要な音楽レビューのコードをクロールする
  • Javaでバックグラウンドミュージックを再生する
  • Pythonで音楽ダウンローダーを作る
  • Androidがミュージックビデオの再生を実装
  • Pythonで自分で作った超クールな音楽プレーヤー

<<:  Linux および CentOS (サーバー) に zip および unzip コマンド機能をインストールする

>>:  まだ*を選択しますか?

推薦する

CSSは高さと幅を固定した要素の比例表示効果を実現します

padding-top パーセンテージを使用すると、固定幅と比例した高さの表示を実現できます。現在の...

ElementUIはドロップダウンオプションと複数選択ボックスのサンプルコードを実装します

目次ドロップダウン複数選択ボックスアップグレード - すべてのオプションを追加改訂と改善を求める製品...

HTML減量 HTMLタグを合理化してWebページを作成する

HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...

Reactのようなフレームワークをゼロから作成する

最近、インターネットで「Build your own React」という記事を見ました。著者は、シン...

JS ES6 スプレッド演算子の魔法のような使い方

目次1. 属性を追加する2. 複数のオブジェクトを結合する3. オブジェクトのプロパティを削除する4...

Python ベースの Linux システムにおける特定のプロセスのパフォーマンス監視の考え方の詳細な説明

インターネット上には Linux サーバーを監視するためのツール、コンポーネント、プログラムが多数あ...

MySQL で CURRENT_TIMESTAMP を使用する方法

目次CURRENT_TIMESTAMPの使用CURRENT_TIMESTAMPを使用したタイムスタン...

HTML テーブル タグ チュートリアル (31): セルの幅と高さの属性 WIDTH、HEIGHT

デフォルトでは、セルの幅と高さはコンテンツに応じて自動的に調整されますが、セルの幅と高さを手動で設定...

MySQLで判定文を書く方法のまとめ

MySQL で判断文を書く方法:方法1. CASE関数case関数の構文: CASE条件 値1の場合...

MySQLのインデックスシステムがB+ツリーを使用する理由の分析

目次1. インデックスとは何ですか? 2. インデックスはなぜ必要なのでしょうか? 3. インデック...

Linux で PyCurl のエラーを解決する方法

「curl-config を実行できませんでした」の解決策 pycurl のダウンロード/解凍 (p...

円形/扇形メニューを2分で実装する方法を教えます(基本バージョン)

序文このプロジェクトでは円形のメニューが必要です。オンラインで検索しましたが、適切なものが見つからな...

Node.jsを理解するのはとても簡単です

目次Node.js の公式紹介Node.jsのコア開発言語ウェブ上の JavaScript と No...

任意の長さの配列を作成または埋めるための JS のヒントの要約

目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...