HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Audioオブジェクト徹底解説!プロパティ・メソッド・実装例をわかりやすく紹介

HTML DOMのAudioオブジェクトは、HTMLの<audio>要素をJavaScriptから操作するためのインターフェースです。<audio>要素はHTML5で新たに導入されたもので、Audioオブジェクトを使うことで、音声トラック情報の取得や自動再生の設定など、さまざまな操作をプログラムから行うことができます。

Audioオブジェクトの主なプロパティ

HTML DOM Audioオブジェクトには、以下のようなプロパティが用意されています。

プロパティ説明
audioTracks利用可能なオーディオトラックの一覧を含むaudioTrackListオブジェクトを返します。
autoplay音声を自動再生するかどうかを取得・設定します。
bufferedバッファ済み(読み込み済み)の範囲を含むTimeRangesオブジェクトを返します。
controller音声の現在のメディアコントローラーを表すMediaControllerオブジェクトを返します。
controls再生/一時停止などのコントロールを表示するかどうかを取得・設定します。
crossOrigin音声のCORS(オリジン間リソース共有)設定を取得・設定します。
currentSrc現在再生中の音声ファイルのURLを返します。
currentTime現在の再生位置(秒単位)を取得・設定します。
defaultMutedデフォルトでミュート状態にするかどうかを取得・設定します。
defaultPlaybackRateデフォルトの再生速度を取得・設定します。
duration音声の長さを秒単位で返します。
ended再生が終了したかどうかを返します。
error音声のエラー状態を表すMediaErrorオブジェクトを返します。
loop再生終了後に再度再生を繰り返すかどうかを取得・設定します。
mediaGroup音声が属するメディアグループ名を取得・設定します。
mutedミュート(消音)状態かどうかを取得・設定します。
networkState音声の現在のネットワーク状態を返します。
paused一時停止中かどうかを取得・設定します。
playbackRate再生速度を取得・設定します。
played再生済みの範囲を表すTimeRangesオブジェクトを返します。
preloadpreload属性の値を取得・設定します。
readyState音声の現在の準備状態(ready state)を返します。
seekableシーク可能な範囲を表すTimeRangesオブジェクトを返します。
seekingユーザーが現在シーク操作中かどうかを返します。
srcsrc属性の値(音声ファイルのURL)を取得・設定します。
textTracks利用可能なテキストトラック全体を表すTextTrackListオブジェクトを返します。
volume音量を取得・設定します。

Audioオブジェクトの主なメソッド

Audioオブジェクトには、以下のようなメソッドが用意されています。

メソッド説明
addTextTrack()指定した音声に新しいテキストトラックを追加します。
canPlayType()ブラウザが指定した音声形式を再生できるかどうかを確認します。
fastSeek()音声プレーヤー内の指定した時間へ高速にシークします。
getStartDate()現在のタイムラインのオフセットを表す新しいDateオブジェクトを返します。
load()audio要素を再読み込みします。
play()音声の再生を開始します。
pause()再生中の音声を一時停止します。

基本的な構文

Audioオブジェクトの基本的な使い方は次のとおりです。

■ audio要素を新しく作成する場合

var x = document.createElement("AUDIO");

■ 既存のaudio要素にアクセスする場合

var x = document.getElementById("demoAudio");

実装例

それでは、Audioオブジェクトの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>MUSIC</h1>
<audio id="Audio" controls>
<source src="sample.mp3" type="audio/mpeg">
お使いのブラウザは音声に対応していません
</audio>
<p>ボタンをクリックすると、音声の長さ(秒)を表示します。</p>
<button onclick="AudioDur()">Duration</button>
<button onclick="CreateAudio()">CREATE</button>
<p id="SAMPLE"></p>
<script>
    function AudioDur() {
        var x = document.getElementById("Audio").duration;
        document.getElementById("SAMPLE").innerHTML = x;
    }
    function CreateAudio() {
        var x = document.createElement("AUDIO");
        x.setAttribute("src","sample1.mp3");
        x.setAttribute("controls", "controls");
        document.body.appendChild(x);
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような画面が表示されます。

HTML DOM Audioオブジェクト徹底解説!プロパティ・メソッド・実装例をわかりやすく紹介

「Duration」ボタンをクリックした場合 −

HTML DOM Audioオブジェクト徹底解説!プロパティ・メソッド・実装例をわかりやすく紹介

「CREATE」ボタンをクリックした場合 −

HTML DOM Audioオブジェクト徹底解説!プロパティ・メソッド・実装例をわかりやすく紹介

コードの解説

まず、audio要素を作成し、音声ファイルのパスと形式を指定しています。

<audio id="Audio" controls>
<source src="sample.mp3" type="audio/mpeg">
お使いのブラウザは音声に対応していません
</audio>

次に、「Duration」と「CREATE」の2つのボタンを作成し、それぞれクリック時にAudioDur()関数とCreateAudio()関数を実行するようにしています。

<button onclick="AudioDur()">Duration</button>
<button onclick="CreateAudio()">CREATE</button>

AudioDur()関数では、id「Audio」を持つ<audio>要素を取得し、durationプロパティを使ってその長さ(秒数)を求めています。取得した値は、id「SAMPLE」の段落要素に表示されます。

function AudioDur() {
    var x = document.getElementById("Audio").duration;
    document.getElementById("SAMPLE").innerHTML = x;
}

CreateAudio()関数では、新しいaudio要素を動的に生成し、setAttribute()メソッドでsrc属性に「sample1.mp3」を設定し、controls属性を指定してコントロールを有効にしています。最後にappendChild()メソッドで、生成した要素をbodyに追加しています。

function CreateAudio() {
    var x = document.createElement("AUDIO");
    x.setAttribute("src","sample1.mp3");
    x.setAttribute("controls", "controls");
    document.body.appendChild(x);
}

このように、HTML DOMのAudioオブジェクトを活用すれば、音声の再生制御や動的な要素の生成など、Webページ上での音声操作を柔軟に実装できます。

  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注