【STEP.40】
JavaScriptで音声・動画の再生をしてみよう!

ユタゾウくん

まず初めに音声ファイルの再生をしてみましょう!

音声ファイルを再生する

音声ファイルを再生するには、<audio>要素を利用します。

<audio src="./audio/menuettm.mp3" controls autoplay loop preload="auto">
  ご利用の環境は、音声が再生できません。
  [<a href="./audio/menuettm.mp3">ダウンロード</a>]
</audio>

音声コントローラを表示&再生

<audio>要素で利用できる属性は、次に掲げる表の通りです。

【<audio>要素の主な属性(*は空属性)】
属性概要
src音声ファイルのパス
controls*再生コントローラーを表示(見かけはブラウザー依存)
autoplay*自動再生を有効にするか
loop*ループ再生するか
muted*初期状態でミューとしておくか
type音声ファイルのコンテンツタイプ
preload音声ファイルを自動で読み込むか(autoplay属性が有効の場合は無視)
設定値概要
autoすべての情報を読み込む
metadataメタデータだけ読み込む
none事前読み込みを無効化(再生まで読み込まない)
volume再生音量(0.0~1.0)

preload属性を有効にすることで、音声ファイルを事前に取得できるため、再生をスムーズに開始できます。

ただし、preload属性はあくまで指針であって、ブラウザーに事前ロードを強制するものではありません。

明示的に指定しなくても、事前読み込みするブラウザーもありますし、逆に、スマホ環境では、通信トラフィックを節減するために事前読み込みを無効にしている場合もあります。

<audio>要素配下は、オーディオ機能に対応していないブラウザー向けに表示するコンテンツを表します。

エラーメッセージだけでなく、音声ファイルへのダウンロードリンクを用意しておくと親切です。

動画ファイルを再生する

動画ファイルを再生するには、<video>要素を利用します。

<video src="./video/Mountains%20-%2031175.mp4" controls width="320" height="180" poster="./image/03-230705.jpg">
  ご利用の環境は、動画が再生できません。
  [<a href="./video/Mountains%20-%2031175.mp4">ダウンロード</a>]
</video>

待ち受け画像を表示のあと、動画を再生

<video>要素で利用可能な属性は、<audio>要素とも重複しているので、独自の属性だけを次に掲げる表に示します。

【<video>要素の主な属性】
属性概要
width再生画面の幅
height再生画像の高さ
poster再生可能になるまで表示する画像

動画ファイルは、一般的にサイズが大きいため、再生待ちまで表示する画像(poster属性)は省略すべきではありません。

動画の一部を示した静止画像など、内容を類推できるような画像とするのが望ましいでしょう。

音声・動画ファイルを複数ブラウザーで対応させる

<audio><video>要素は、現在よく利用されているブラウザーの最新バージョンで動作しますが、1つ問題もあります。

というのも、それぞれのブラウザーで対応している音声/動画ファイルの形式が微妙に異なるのです。

【音声/動画ファイルの対応状況】
ブラウザー音声動画
MP3OGGWAVMP4OGVWEBM
Chrome
Firefox
IE××××
Edge×
Safari×××

そのため、複数のブラウザーで音声/動画を再生するには、以下のように(src属性の代わりに)<source>要素で再生すべきファイルの候補を列挙します。

これによって、ブラウザーは先頭から順にファイルをチェックし、サポートする最初のファイルを再生します。

<video controls width="320" height="180" poster="./image/03-230705.jpg">
  <source src="./video/Mountains%20-%2031175.mov">
  <source src="./video/Mountains%20-%2031175.mp4">
  <source src="./video/Mountains%20-%2031175.ogv">
  <source src="./video/Mountains%20-%2031175.webm">
</video>

動画に字幕を付ける

字幕を追加するための手順は、以下の通りです。

[1] 字幕定義ファイルを準備する

字幕情報は、以下のような.vttファイルとして用意します。

表示時間は「開始-->終了」で、その直後に字幕を、それぞれ指定します。

WEBVTT

00:02.000 --> 00:05.000
字幕1
00:07.000 --> 00:10.000
字幕2
00:13.000 --> 00:17.000
字幕3
00:20.000 --> 00:23.000
字幕4

[2] .vttファイルを有効化する

.vttファイルを利用するには、サーバー側でも拡張子を有効化しておかなければなりません。

設定方法はサーバーによって異なりますが、Apacheであれば、アプリルートに.htaccessファイルを設置します。

AddType text/vtt.vtt

[3]字幕情報ファイルを動画にひも付ける

動画ファイルに字幕情報をひも付けるには、<track>要素を利用します。

<video src="./video/Wolf%20-%2027400.mp4" controls width="680" height="280" poster="./image/03-230705.jpg">
  <track kind="subtitles" label="Japanese" src="./video_track.vtt" srclang="ja" default />
</video>

<track>要素で利用できる主な属性には、次に掲げる表のようなものがあります。

【<track>要素の主な属性】
属性概要
src.vttファイルのパス
srclangテキストの言語(「kind=”subtitles”」では必須)
kind用途
設定値概要
subtitles字幕
captions音声の翻訳
descriptions動画コンテンツの説明(音声ガイド用)
chaptersチャプター
metadataメタ情報(スクリプトから使用)
labelテキストトラックを識別するためのラベル
default既定のトラックであるか

次は、サンプルを実行した結果です。

確かに、指定された時間範囲で字幕が表示されることを確認してください。

動画再生時に字幕情報を表示

複数の字幕が存在する場合には、動画右下の動画右下のボタンボタンから表示する字幕を選択できます。

音声・動画ファイルをスクリプトから再生する

音声/動画ファイルは、JavaScriptから操作することもできます。

音声ファイルの場合

たとえば、以下は音声ファイルを再生する例です。

<input id="start" type="button" value="再生" />
<input id="stop" type="button" value="停止" />
//Audioオブジェクトの生成
let ad = new Audio('./audio/menuettm.mp3');

//.mp3ファイルに対応しているかをチェック
let result = ad.canPlayType('audio/mp3');

//[再生]ボタンクリックで再生
document.getElementById('start').addEventListener('click', function () {
  if (result.match(/^(probably|maybe)$/)) {
    ad.play();  //再生
    ad.loop = true;
  }	
}, false);

//[停止]ボタンクリックで再生も停止
document.getElementById('stop').addEventListener('click', function () {
  ad.pause();
}, false);

オーディオ機能を司るのは、Audioオブジェクトです。

コンストラクターには再生したい音声ファイルのパスを指定します。(let ad = new Audio('./audio/menuettm.mp3');

canPlayTypeメソッドは、指定のコンテンツタイプを再生できるかを判定します。(let result = ad.canPlayType('audio/mp3');

戻り値は、probably(再生可能)、maybe(たぶん再生可能)、空文字列(再生不可)のいずれかなので、ここではprobably/maybeいずれかの場合にのみplayメソッド(let result = ad.canPlayType('audio/mp3');)を呼び出し、再生を開始しています。

音声を停止するにはpauseメソッドを呼び出します。(ad.pause();

動画ファイルの場合

動画も、同じ要領で再生できます。

ただし、ビデオにはVideoのような専用のオブジェクトはありませんので、<video>要素を作成し、属性をセットしたうえで、ページに埋め込むという流れになります。

<input id="start" type="button" value="再生" />
let vd = document.createElement('video');
//再生可能かどうかを判定
let result = vd.canPlayType('video/mp4');
document.getElementById('start').addEventListener('click', function () {
  if (result.match(/^(probably|maybe)$/)) {
    vd.setAttribute('src','./video/Wolf - 27400.mp4');  //動画
    vd.setAttribute('controls', '');  //コントロールを有効化
    vd.setAttribute('width','680');  //幅
    vd.setAttribute('height','280');  //高さ
    document.body.appendChild(vd);  //ページに反映
    vd.play();  //再生開始
  }
}, false);

[再生]ボタンをクリックで動画プレイヤーを表示

音声・動画ファイルの音量や再生スピードを調整する

AudioVideoオブジェクトのプロパティを設定することで、音声/動画のボリュームや再生スピードなどを設定できます。

【Audio/Videoオブジェクトの主なプロパティ】
プロパティ概要
volumeボリューム(0.0~1.0)
mutedミュートするか(true/false)
playbackRate再生速度(数値が大きいほ程速い。規定は1.0)
currentTime現在再生中の位置(秒)
preload事前読み込みは有効か(true/false)
loop繰り返し再生するか(true/false)
controlsコントロールパネルを表示するか(true/false)

たとえば以下は、スライダーでボリューム/再生速度を調整し、チェックボックスでミュートを指定する例です。

<video id="vd" src="./video/Wolf%20-%2027400.mp4" autoplay loop width="320" height="180"></video>
<div>
  音量:<input id="vol" type="range" min="0" max="1" step="0.01" value="1" />
  <span id="vol_v">1.0</span>
  [消音<input id="mute" type="checkbox" />]<br />
  速度:<input id="speed" type="range" min="0" max="2" step="0.01" value="1" />
  <span id="speed_v">1.0</span>
</div>
let vd = document.getElementById('vd');
let vol = document.getElementById('vol');
let mute = document.getElementById('mute');
let speed = document.getElementById('speed');
let volVal = document.getElementById('vol_v');
let speedVal = document.getElementById('speed_v');

//ボリューム調整
vol.addEventListener('change', function (e) {
vd.volume = vol.value;
});
	
//ミュート
mute.addEventListener('change', function (e) {
vd.muted = mute.checked;	
});

//再生速度
speed.addEventListener('change', function (e) {
vd.playbackRate = speed.value;	
});

//ボリューム(数値)の表示
vd.addEventListener('volumechange', function (e) {
volVal.textContent = vol.value;
});
	
//再生速度(数値)の表示
vd.addEventListener('ratechange', function (e) {
speedVal.textContent = speed.value;
});

ボリューム/再生速度などを変更


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です