ゼロからはじめるJavaScript(21) Webブラウザで動画や音楽を再生する方法をまとめてみた

Webブラウザを利用して動画や音楽を楽しむ場面が増えています。専用のアプリを使わなくても、YouTubeやSpotify、Amazon Musicなど動画やサブスクの音楽配信サービスが利用できます。そこで今回はブラウザで動画や音楽を再生する方法を確認してみましょう。

JavaScriptで動画の再生を制御しているところ

ブラウザなら動画や音楽は簡単に再生できる

仕事中にWebブラウザで資料を見ていたら、急に動画や音楽が流れ出してびっくりしたという経験はないでしょうか。最近のブラウザでは明示的に再生ボタンを押さないと音楽は流れない仕組みになっていますが、昔からブラウザで音楽を再生するのは容易でした。というのも、配信サービスだけでなくゲームやいろいろなツールでも、音楽や動画が再生できると便利な場面がたくさんあるからです。

それでは、早速、具体的な方法を確認してみましょう。

HTMLの<video>や<audio>を使う方法

ブラウザで音楽や動画を再生したい場合には、HTMLタグの<video>や<audio>要素を利用するのが簡単です。何と言っても、HTMLタグを記述して、動画や音声ファイルを指定するだけなので簡単です。

例えば、「sample.mp4」という動画ファイルを用意して、これを再生する動画プレイヤーを作るには、次のような数行を記述します。

<html><body>
    <!-- HTMLでMP4動画を再生する方法 -->
    <video src="sample.mp4" controls></video>
</body></html>

このファイルを「sample.html」という名前で保存して、ブラウザにドラッグ＆ドロップしてみましょう。動画プレイヤーに動画が表示されます。

なお、動画を再生するには対応ブラウザを選ぶ必要があるでしょうか。次の画像ですが、左下から右上に向かって、Edge、Chrome、Firefox、Safriと主要ブラウザで上記のHTMLを表示したものです。

HTMLでvideo要素を記述したところ

HTML5でこのvideo要素が追加された当初は、再生可能な形式に制限がありました。しかし、MP4/H.264動画であれば主要ブラウザで問題なく再生できます。

以下は「Can I use...」による各ブラウザがMP4に対応しているかどうかを示す表です。かなり早い段階で主要ブラウザがMP4に対応したことが分かります。今では、スマートフォンなどのモバイル端末のブラウザも対応しています。

MP4動画がサポートされた各ブラウザのバージョン

次に音声ファイルを再生する場合を確認してみましょう。video要素と同じで、audio要素を記述すればプレイヤーを表示することができます。例えば、MP3を再生するプレイヤーを表示したい場合、以下のように記述します。

<html><body>
    <!-- HTMLでMP3オーディオを再生する方法 -->
    <audio src="sample.mp3" controls></audio>
</body></html>

各種ブラウザでHTMLを表示してみると次のようになります。画面ですが左からChrome、Firefox、Safariのものです。MP3オーディオであれば、どのブラウザでも問題なく再生できます。

HTMLでaudio要素を記述したところ

念のため「Can I use...」のMP3対応表も確認してみましょう。ほぼ全ての主要PCブラウザ、モバイルブラウザがMP3に対応していることが分かります。

MP3オーディオをサポートしたブラウザ

JavaScriptで再生と停止を制御する場合

次に、JavaScriptから動画の再生・停止を行うプログラムを作ってみましょう。ただし前述の通り、ページを読み込んですぐに、自動的に動画や音声を再生することは、ブラウザによって禁止されています。再生を行うためには、ユーザーがボタンをクリックするなどのアクションが必要になります。

以下のJavaScriptのプログラムは、ボタンをクリックすることで、MP4動画の再生と停止を制御するものです。「再生と停止」のボタンをクリックすると動画の再生が始まり、もう一度押すと動画が一次停止します。

<html><meta charset="utf-8"><body>
    <!-- 動画プレイヤーとボタンを作る -->
    <video id="sampleVideo" src="sample.mp4"></video>
    <p><button id="controllButton">再生と停止</button></p>
    <script>
    // 動画プレイヤーとボタンの要素を取得する --- (*1)
    const btn = document.getElementById('controllButton')
    const video = document.getElementById('sampleVideo')
    let isPlaying = false
    // ボタンにクリックイベントを指定 --- (*2)
    btn.onclick = function (e) {
        if (isPlaying) { video.pause() } // 停止
        else { video.play() } // 再生
    }
    // 動画プレイヤーのイベントを取得 --- (*3)
    video.onplay = function (e) {
        console.log('動画が再生されました')
        isPlaying = true
    }
    video.onpause = function (e) {
        console.log('動画が停止しました')
        isPlaying = false
    }
    video.onended = function (e) {
        console.log('動画再生が終了しました')
        isPlaying = false
    }
    </script>
</body></html>

上記のプログラムを「js_ctrl_mp4.html」というファイルに保存します。そして、ブラウザにドラッグ＆ドロップすると実行できます。なお同じフォルダに「sample.mp4」という動画ファイルを配置するのも忘れないようにしてください。

動画の再生と停止をJavaScriptで制御できる

簡単にプログラムを確認してみましょう。(＊1)ではHTML内に配置した、動画プレイヤー(video要素)とボタン(button要素)のオブジェクトを取得します。

(＊2)の部分では(＊1)で取得したボタンに対してクリックイベントを設定します。なお、変数isPlayingの値に応じて、pauseメソッド(一次停止)と、playメソッド(再生)のどちらを実行するのかを分けます。

(＊3)の部分では、動画プレイヤーのイベントを設定します。これにより、実際にプレイヤーが再生開始した時(onplay)と停止した時(onpause)を検出して、変数isPlayingの値を書き換えます。なお、最後まで再生し終わった時には、onendedイベントが実行されます。このように、動画プレイヤーのイベントを処理することで、プレイヤーのさまざまな状態を知ることができます。

MIDIファイルを再生するには？

なお、最近ではあまり目にしなくなってきていますが、MIDIファイルを再生したいという場面もあるかもしれません。MIDIファイルは、電子楽器の演奏情報を記録したファイルです。インターネットが今ほど速くない頃には、ブラウザ標準でMIDIファイルを再生することができました。しかし、現在では標準でMIDIファイルを再生することはできません。(一部のAndroid端末ではMIDIの再生ができるものもあります。)

ChromeやEdgeには、Web MIDI APIというMIDI端末を操作するAPIが備わっているものの、これを利用するには別途MIDI対応のシンセサイザーが必要です。そもそも、MIDIは演奏情報のみであり再生環境により聞こえ方が変わってしまう問題があります。そのため、MIDIはMP3などのオーディオ形式に変換して使うのが一般的です。TiMidityやFluidSynthというツールを使うとMIDIをMP3オーディオに変換できます。

それでも、どうしても、MIDIファイルをブラウザで再生したいという場合には、JavaScriptのライブラリを使うことで再生できます。JavaScriptでMIDIを再生するライブラリがいくつもあります。

代表的なのは「PicoAudio」や「JZZ」などです。

MIDIはもともと演奏データであるため、リアルタイムに演奏情報を生成して再生するという用途に利用できます。この特徴を活かして、筆者は「ピコサクラ」というブラウザ上で作曲できるツールを公開しています。これはテキストから音楽を生成するツールなのですが、ブラウザ上でリアルタイムにMIDIファイルを生成して演奏します。

ブラウザ上でリアルタイムにMIDIファイルを生成して演奏できるピコサクラ

PicoAudioでMIDIを再生しよう

最後に、PicoAudioを使ってMIDIファイルを再生する方法を紹介します。以下は「再生」ボタンをクリックすると、非同期通信(Ajax)によってMIDIファイルを取得して、PicoAudioで再生するプログラムです。

<html><meta charset="utf-8"><body>
<!-- ライブラリの読み込み -->
<script src="https://unpkg.com/picoaudio/dist/browser/PicoAudio.js"></script>
<button onclick="playMidi()">再生</button>
<div id="msg"></div>
<script>
async function playMidi() {
    // PicoAudioの初期化 --- (*1)
    const picoAudio = new PicoAudio()
    picoAudio.init()
    // MIDIファイルの取得 --- (*2)
    log("MIDIファイルをロード")
    const url = 'https://n3s.nadesi.com/image.php?f=207.mid'
    const res = await fetch(url)
    const buf = await res.arrayBuffer()
    const smfData = new Uint8Array(buf)
    log("MIDIファイルの解析中")
    // PicoAudioでMIDIファイルを読む ---  (*3)
    const parsedData = picoAudio.parseSMF(smfData)
    picoAudio.setData(parsedData)
    log("MIDIファイルを再生")
    picoAudio.play() // --- (*4)
}
function log(s) {
    document.querySelector('#msg').innerHTML += s + "<br>";
}
</script>
</body></html>

上記のプログラムをテキストエディタに貼り付けて「midi.html」という名前で保存します。そして、ブラウザを開いて「再生」ボタンをクリックします。すると、音楽が再生されます。

プログラムを確認してみましょう。(＊1)ではPicoAudioのライブラリを初期化します。(＊2)ではMIDIファイルを非同期通信(Ajax)で取得します。そして、(＊3)の部分でMIDIファイルを解析して(＊4)のplayメソッドで再生します。

まとめ

以上、今回は、動画や音声ファイルを再生する方法を紹介しました。最後のMIDIファイルの再生は少し特殊でしたが、Chrome/Edge/Safari/Firefoxとメジャーなブラウザであれば、一般的な動画や音声ファイルを気軽に再生できます。しかも、JavaScriptを使って再生や一次停止といった制御ができることも確認しました。この仕組みを使えば、独自の動画プレイヤーを作ることも難しくないでしょう。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユーススーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。