HTML、CSS、jQuery: 自動再生音楽プレーヤーを作成する-jsチュートリアル-php.cn

HTML、CSS、jQuery: 自動再生音楽プレーヤーを作成する

王林

リリース： 2023-10-25 11:33:11

オリジナル

1110 人が閲覧しました

HTML、CSS、jQuery: 自動再生音楽プレーヤーを作成する

HTML、CSS、jQuery: 自動再生音楽プレーヤーの作成

音楽プレーヤーは、現代の Web デザインにおける一般的な要素の 1 つです。この記事では、HTML、CSS、jQuery を使用して自動再生音楽プレーヤーを作成する方法と、具体的なコード例を紹介します。

まず、HTML ファイル内に音楽プレーヤーを含むコンテナを作成します。

<div class="music-player">
   <audio id="myAudio">
      <source src="music.mp3" type="audio/mpeg">
   </audio>
   <button id="playButton">播放</button>
   <button id="pauseButton">暂停</button>
</div>

ログイン後にコピー

上記のコードでは、<audio> タグ player を使用してオーディオを作成します。を選択し、src 属性を音楽ファイルの URL に設定します。次に、音楽を再生するボタンと一時停止するボタンの 2 つのボタンを追加しました。

次に、CSS スタイルを使用して音楽プレーヤーを美しくする必要があります。

.music-player {
   text-align: center;
}

button {
   padding: 10px 20px;
   background: #333;
   color: #fff;
   border: none;
   border-radius: 5px;
   margin: 10px;
   cursor: pointer;
}

ログイン後にコピー

上記の CSS スタイルは、音楽プレーヤーのコンテナーを中央揃えにし、背景色、テキストの色、その他のスタイルを設定します。ボタンの属性。

ここで、jQuery を使用して音楽プレーヤーの機能を実装します。

$(document).ready(function(){
   var audio = document.getElementById("myAudio");

   $("#playButton").click(function(){
      audio.play();
   });

   $("#pauseButton").click(function(){
      audio.pause();
   });
});

ログイン後にコピー

上記の JavaScript コードでは、document.getElementById() メソッドを使用して、 audio 要素を取得し、それを変数に割り当てます。次に、ボタンをクリックしてオーディオの再生および一時停止機能をトリガーします。

最後に、上記の HTML、CSS、jQuery コードを HTML ファイルに配置し、jQuery ライブラリを導入します。

<!DOCTYPE html>
<html>
<head>
   <title>自动播放的音乐播放器</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <style>
      /* CSS代码 */
   </style>
</head>
<body>
   <div class="music-player">
      <!-- HTML代码 -->
   </div>
   <script>
      // JavaScript代码
   </script>
</body>
</html>

ログイン後にコピー

上記のコードでは、忘れずに CSS コードを に貼り付けてください。 <style></style> タグを作成し、JavaScript コードを >script> タグに貼り付け、前述の HTML コードを音楽プレーヤーコンテナに貼り付けます。

上記の手順により、HTML、CSS、jQuery を使用した自動再生音楽プレーヤーを作成することができました。ユーザーが再生ボタンをクリックすると音楽の再生が開始され、ユーザーが一時停止ボタンをクリックすると音楽の再生が停止します。

この記事が、HTML、CSS、jQuery を使用して自動再生音楽プレーヤーを作成する方法を理解するのに役立つことを願っています。

以上がHTML、CSS、jQuery: 自動再生音楽プレーヤーを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。