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

HTML DOMのSourceオブジェクトとは？使い方とサンプルコードを解説

HTML DOMのSourceオブジェクトは、HTMLの<source>要素に対応するオブジェクトです。<source>要素は、<audio>や<video>などのメディア要素に対して、複数のメディアリソース（音声・動画ファイル）を指定するために使用されます。

JavaScriptでは、新しいsource要素を動的に作成するにはcreateElement()メソッドを、既存のsource要素へアクセスするにはgetElementById()メソッドを使用します。

構文

Sourceオブジェクトを作成する基本的な構文は以下のとおりです。

var p = document.createElement("SOURCE");

createElement()に引数として"SOURCE"を渡すことで、新しいsource要素が生成され、変数に格納されます。その後、setAttribute()で属性を設定し、親要素に追加することで利用できます。

Sourceオブジェクトの使用例

次の例では、ボタンをクリックすると、audio要素に対して音声ファイルのソースが動的に追加される仕組みを実装しています。

<!DOCTYPE html>
<html>
<body>
<h1>Sourceオブジェクトのサンプル</h1>
<audio id="AUDIO_1" controls >
</audio>
<p>下のボタンをクリックすると、上のaudio要素に音声ソースが追加されます。</p>
<button onclick="createSrc()">CREATE</button>
<p id="Sample"></p>
<script>
    function createSrc() {
        var s = document.createElement("SOURCE");
        s.setAttribute("src", "sample.mp3");
        s.setAttribute("type", "audio/mpeg");
        document.getElementById("AUDIO_1").appendChild(s);
        document.getElementById("Sample").innerHTML = "これで音声コントロールが機能するようになりました";
    }
</script>
</body>
</html>

コードの解説

  • createElement("SOURCE")：新しい<source>要素を生成します。
  • setAttribute("src", "sample.mp3")：再生する音声ファイルのパスを指定します。
  • setAttribute("type", "audio/mpeg")：ファイルのMIMEタイプを指定します。ブラウザはこの情報をもとに、対応可能なフォーマットかどうかを判断します。
  • appendChild(s)：作成したsource要素を、IDが「AUDIO_1」のaudio要素の子要素として追加します。

実行結果

上記のコードを実行すると、まず以下のような画面が表示されます。

HTML DOMのSourceオブジェクトとは？使い方とサンプルコードを解説

「CREATE」ボタンをクリックすると、JavaScriptのcreateSrc()関数が実行され、audio要素内にsource要素が追加されます。

HTML DOMのSourceオブジェクトとは？使い方とサンプルコードを解説

その結果、audio要素に有効な音声ソースが設定され、ブラウザ標準の音声プレーヤーが正常に動作するようになります。

まとめ

HTML DOMのSourceオブジェクトを使うことで、ページ読み込み後に動的にメディアソースを追加・変更できます。ユーザーの操作に応じて音声や動画のソースを切り替えたい場合など、インタラクティブな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 ではサポートされていないため注