HTML/CSS

JavaScript

音声ファイルはHTMLとJavaScriptのどちらで実装すべき？メリットを比較！

HTML及びJavaScriptでは、WEBページの機能を向上させるため、音声ファイルの実装・操作が可能となっています。

どちらを使っても音声ファイルの再生などは可能ですが、2つの方法にはそれぞれ異なるメリットが存在します。

今回は音声ファイルをHTMLとJavaScript、どちらで実装するべきなのか、それぞれのメリットを比較していきます。

【前提】音声ファイルを実装する方法

WEBページにおいて音声ファイルを取り扱う場合、Audioオブジェクトを扱います。

音声ファイルの実装方法はHTMLとJavaScriptで2パターンありますが、最終的にはどちらもJavaScript側からAudioオブジェクトを使役する形になるため、実際の使い方にはそれほど大きな違いはありません。

HTMLで音声を実装

HTMLで音声を実装する場合は、HTML側で音声ファイルの取り込みを行い、JavaScript側でそれを操作する形になります。

具体的には、以下のようなコードで実装可能です。

<!-- audioタグで音声ファイルを読み込み -->
<audio id="target" src="音声ファイルのパス"></audio>

// HTMLにあるaudioタグを読み込み
let audio = document.querySelector("#target");

// 音声ファイルを再生
audio.play();

見てわかるように、読み込みはHTMLのaudioタグを使って行いますが、実態はAudioオブジェクトであるため、JavaScriptで読み込めばAudioオブジェクトにある関数や値を利用可能です。

一応HTMLだけでもaudio要素の再生をすることは可能ではあるものの、実用的とは言えないので、こだわりがなければJavaScript側で操作するのが良いでしょう。

JavaScriptで音声を実装

JavaScriptで音声を実装する場合は、以下のようにAudioオブジェクトのインスタンスを作成し、それを操作することで音声を再生したり、停止させたりできます。

// インスタンスを作成して音声ファイルを読み込み
let audio = new Audio("音声ファイルのパス");

// 音声ファイルを再生
audio.play();

JavaScriptだけで処理を書けるため、HTMLをあまり書きたくない方にとっては、こちらの方がスマートに感じられるかもしれません。

HTMLで実装するメリット

HTMLで音声を実装する上で、大きなメリットと言えるのが属性で音声を管理できるという点です。

まず、HTMLで用いられるタグ（要素）は、属性というデータを付与することが可能で、属性値を適切に割り振っていくことで、CSSのスタイル実装やJavaScriptによるDOM操作を容易に実装できます。

要するに、属性はWEBページにおいて欠かせないキーマンのような存在であり、属性でデータを管理できる性質が備わっていると、開発面で何かと有利なのです。

では、具体的に音声ファイルを属性で管理するのがどうメリットになるのか、見ていきましょう。

要素の属性で音声ファイルを管理

音声ファイルを属性値で管理する際、よく使うのがid属性とclass属性です。

WEBサイトで音声ファイルを扱う目的はさまざまですが、基本的にはBGMとSEの2種類の音声ファイルを実装しますよね。
例えばWEBゲームなどでは、下のようにBGMとSEの音量を一括で調整可能にするのが一般的です。

このように、関連性の高い複数の音声ファイルを統括的に操作する際、class属性で”BGM”、”SE”と指定してあげれば、BGMというclass属性を持った要素それぞれに対し、音量調整処理を一斉に実施することが可能になります。

JavaScriptの配列を使っても似たようなことは出来ますが、audioタグは後から属性をいくつ追加しても特に問題はない一方、JavaScriptは配列を追加し、その配列にAudioオブジェクトのインスタンスを追加する処理まで別途書く必要があるため、管理のしやすさという点では圧倒的にaudioタグに軍配が上がります。

JavaScriptで実装するメリット

JavaScriptで音声ファイルを実装するメリットは色々ありますが、audioタグと明確に差別化できる点として、1つの音声ファイルを別々のインスタンスで並行して扱うことができるというメリットが挙げられます。

上記の書き方ではわかりにくいので、もう少し細かく見ていきましょう。

audio要素の欠点

まず、HTMLで音声ファイルを実装する際に用いるaudioタグは、原則として、一つのAudioオブジェクトのインスタンスとして取り扱うことになります。

例えば、以下のように別々の変数を用意し、そこに同じaudio要素を代入します。

let aAudio = document.querySelector("#target");
let bAudio = document.querySelector("#target");
let cAudio = document.querySelector("#target");

// それぞれの変数に代入したAudioインスタンスを1秒間隔で再生
aAudio.play();

setTimeout(()=>{
    bAudio.play();

    setTimeout(()=>{
        cAudio.play();
    }, 1000);

}, 1000);

上記のコードの目的は、それぞれの変数に代入したAudioインスタンスが別々に処理されること。
要するに、1秒間隔で同じ音声ファイルが同時に再生されるような処理を期待しています。

しかし、上のような処理を実行しても、元々の音声ファイルが再生されたっきり、後の音声ファイルは再生されません。

具体的には、別々の変数に代入しても元は同じ#targetのaudio要素を操作しているので、既に再生されている#targetに対して後からplay関数を実行しても意味がないのです。

1．JSなら複数のインスタンスを柔軟に扱える

HTMLと同じような処理でも、JavaScript側でAudioオブジェクトのインスタンスを生成する場合、それぞれのインスタンスは別々のものとして扱います。

const path = "音声ファイルのパス";
let aAudio = new Audio(path);
let bAudio = new Audio(path);
let cAudio = new Audio(path);

// それぞれの変数に代入したAudioインスタンスを1秒間隔で再生
aAudio.play();

setTimeout(()=>{
    // bAudio.p.......
}, 1000);

上のコードはHTMLの例と似たようなコードですが、上記の場合はそれぞれの変数に別々のaudioインスタンスが代入されるため、1秒間隔で同じ音声ファイルが順次再生されていく期待通りの処理が実装できるのです。

2．HTMLに余計な記述が増えないのも利点

JavaScript側で音声ファイルを扱う利点として、HTMLのコードを汚さないのもメリットだと言えます。

HTML側でaudioタグを記述し、それをJavaScript側で変数に代入するというのは、はっきり言って余分なコードです。HTMLのコーディングを省略して、JavaScriptで変数にAudioオブジェクトのインスタンスを代入しても処理内容は変わらないですし、HTMLのコードもスッキリします。

昨今ではHTMLファイルをいじらず、JavaScript側で可能な限り処理を完結させるのが主流である点からしても、audioタグの利用を好まない人は少なくありません。

まとめ

音声ファイルはWEBサイトに特色をつける意味でも重要な要素の一つですが、HTMLとJavaScriptのどちらで実装するかによって、管理のしやすさや音声のファイルの取り回しにも違いが生まれます。

音声ファイルを実装する際は、ここで解説した双方のメリットを加味した上で、そのWEBサイトに向いている手法を選択するのがおすすめです。