ウェブ音楽プレーヤーを実現する 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 コマンド機能をインストールする

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

推薦する

Vuexの役割についての深い理解

目次概要コンポーネント間でデータを共有する方法Vuex の原則の紹介Vuexはコンポーネントのグロー...

Docker に MySQL をデプロイする例

目次1 コンテナクラウドとは何ですか? 2 Dockerの紹介3 dockerを使ってMySQLをイ...

大きな太陽の天気アイコンを純粋な CSS で記述する方法の例

効果効果図は以下のとおりです実装のアイデアDivは太陽の長方形の光と影を実現します前の疑似要素は、既...

ウェブデザインにおける2種類のタブアプリケーション

現在、Web デザインではタブが広く使用されていますが、一般的に次の 2 つのタイプに分けられます。...

カルーセル効果を実現するネイティブJavaScript

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

Linux にバイナリ MySQL をインストールして MySQL パスワードをクラックする方法

1. システムに必要な libaio ソフトウェアがインストールされていることを確認します。インスト...

CSS scroll-snap スクロールイベント停止と要素位置検出の実装

1. スクロールスナップはフロントエンド開発者にとって必須のスキルですCSS スクロール スナップは...

JSはBaidu Newsナビゲーションバーの効果を実現

この記事では、Baidu News Navigation Barの効果を実現するための具体的なJSコ...

JSはアニメーションのレイアウト変換を実装します

JS でアニメーションを記述する場合、移動前に相対位置を絶対位置に変換してからアニメーション機能を実...

XHTML ドキュメントで JavaScript と CSS を正しく使用する方法

ますます多くのウェブサイトで、XHTML が HTML4 に取って代わって急速に普及しています。しか...

MySQLでカーソルトリガーを使用する方法

カーソル選択クエリによって返される行のセットは、結果セットと呼ばれます。結果セット内の行は、入力した...

さまざまなSQL結合を簡単に学ぶ

SQL JOIN 句は、テーブル間の共通フィールドに基づいて 2 つ以上のテーブルの行を結合するため...

JavaScript の遅延読み込み属性パターンを理解する

従来、開発者はインスタンスで必要になる可能性のあるデータに対して JavaScript クラス内にプ...

mysql 起動時の ERROR 2003 (HY000) の問題を解決する方法

1. 問題の説明MYSQL を起動すると、図に示すように、「ERROR 2003 (HY000): ...

HTML4.0 要素のデフォルトスタイルの配置

コードをコピーコードは次のとおりです。 html、アドレス、引用ブロック、本文、dd、div、 dl...