CSSを使用してオーディオ要素が再生中かどうかをチェックする方法

CSSクラスを使用する方法: オーディオ要素が再生中の場合に特定のスタイルを適用するために、CSSクラスを使用することができます。

まず、オーディオ要素に対して特定のクラス名を指定します。例えば、以下のようなHTMLコードを考えます:

<audio id="myAudio" class="playing" src="audio.mp3"></audio>

次に、CSSで再生中のスタイルを指定します:

.playing {
  /* 再生中のスタイルをここに追加する */
  background-color: yellow;
}

オーディオ要素が再生中の場合、playingクラスが要素に追加され、背景色が黄色になります。再生が停止すると、クラスが削除され、背景色も元に戻ります。

JavaScriptを使用する方法: JavaScriptを使用して、オーディオ要素が再生中かどうかをチェックすることもできます。

以下は、JavaScriptを使用してオーディオ要素の再生状態を監視する方法の例です:

var audio = document.getElementById("myAudio");
audio.addEventListener("play", function() {
  // 再生中の処理をここに記述する
  console.log("オーディオが再生中です");
});
audio.addEventListener("pause", function() {
  // 停止中の処理をここに記述する
  console.log("オーディオが停止中です");
});

上記のコードでは、playイベントとpauseイベントを監視しています。オーディオが再生されると、"オーディオが再生中です"というメッセージがコンソールに表示されます。再生が停止すると、"オーディオが停止中です"というメッセージが表示されます。