HTML DOM Audio オブジェクト: ウェブページの音声を制御する強力なツール

HTML DOM audio オブジェクト

**概要:** HTML DOM Audio オブジェクトについて深く理解し、JavaScript を使用してウェブページのオーディオの再生、一時停止、音量などの機能を制御する方法を学び、豊富なウェブオーディオ体験を作り出します。

HTML DOM Audio オブジェクトとは？

HTML DOM Audio オブジェクトは、<audio> 要素へのアクセスを提供し、開発者は JavaScript コードを使用してオーディオ再生を操作できます。つまり、次のことが可能です。

オーディオの再生、一時停止、停止
音量の調整
ループ再生の設定
再生終了、読み込み完了などのオーディオイベントのリッスン

Audio オブジェクトの作成方法

Audio オブジェクトを作成するには、次の 2 つの方法があります。

**<audio> 要素を使用する:**


    <audio id="myAudio" src="my-audio.mp3"></audio>


    const audio = document.getElementById("myAudio");

**new Audio() コンストラクタを使用する:**


    const audio = new Audio("my-audio.mp3");

Audio オブジェクトのよく使用されるプロパティとメソッド

以下は、Audio オブジェクトのよく使用されるプロパティとメソッドです。

プロパティ:

プロパティ名	説明
`src`	オーディオファイルの URL アドレス。
`currentTime`	現在の再生時間（秒）。
`duration`	オーディオの合計時間（秒）。
`paused`	オーディオが一時停止されているかどうかを示すブール値。
`volume`	音量の大きさ（0〜1）。
`muted`	オーディオがミュートされているかどうかを示すブール値。
`loop`	ループ再生するかどうかを示すブール値。

メソッド:

メソッド名	説明
`play()`	オーディオの再生を開始します。
`pause()`	オーディオの再生を一時停止します。
`load()`	オーディオを再読み込みします。

オーディオイベントのリッスン

Audio オブジェクトは、次のようなさまざまなイベントのリッスンをサポートしています。

play: オーディオの再生が開始されたときに発生します。
pause: オーディオの再生が一時停止されたときに発生します。
ended: オーディオの再生が終了したときに発生します。
volumechange: 音量が変更されたときに発生します。
canplay: ブラウザがオーディオの再生を開始できるようになったときに発生します。

例: シンプルなオーディオプレーヤーの作成


<!DOCTYPE html>
<html>
<head>
  <title>オーディオプレーヤー</title>
</head>
<body>
  <audio id="myAudio" src="my-audio.mp3"></audio>
  <button onclick="document.getElementById('myAudio').play()">再生</button>
  <button onclick="document.getElementById('myAudio').pause()">一時停止</button>
</body>
</html>

まとめ

HTML DOM Audio オブジェクトは、開発者に強力な API を提供し、ウェブページの音声を簡単に制御して、よりインタラクティブで楽しいユーザーエクスペリエンスを生み出すことができます。本文を学ぶことで、Audio オブジェクトの基本的な知識を習得し、より高度なアプリケーションシナリオを探索できるようになりました。

Q&A

Q: Audio オブジェクトで再生できるオーディオファイル形式は何ですか？
A: サポートされる形式はブラウザによって異なりますが、一般的には MP3、WAV、OGG などがサポートされています。
Q: Audio オブジェクトで音量を制御するにはどうすればよいですか？
A: volume プロパティを使用します。値は 0（無音）から 1（最大音量）までの範囲で指定します。
Q: オーディオの再生が終了したときに特定の処理を実行するにはどうすればよいですか？
A: ended イベントをリッスンし、イベントハンドラに関数を設定します。