JavaScript

レシピ

音声

audio要素/video要素のプロパティ、メソッド、イベント一覧

audio要素video要素でそれぞれ使用することができるプロパティやメソッド、および発生するイベントについて解説します。

目次

audio要素/video要素について

ページに音楽ファイルを読み込むためのaudio要素と、動画ファイルを読み込むvideo要素はいずれもHTMLMediaElementの子孫要素です。

HTML要素の子孫関係
HTML要素の子孫関係

親要素が共通しているので、2つの要素は使えるプロパティ、メソッド、イベントのほとんどが共通しています。
一部、要素ごとに独自のプロパティやメソッドが用意されています。

以降は、audio要素video要素が使用できるプロパティ、メソッド、イベントの内容を解説していきます。

プロパティ

audio要素video要素で使用できるプロパティの一覧です。
内容の中にある「メディアファイル」は音楽ファイルと動画ファイルの両方を指す総称として使います。

「読み取りのみ」が「○」になっているプロパティは値の取得のみで、あとから変更することはできません。

プロパティ名内容読取のみ
audioTracksaudio要素video要素に含まれる音声トラックリスト。値はAudioTrackListオブジェクトで返す。
autoplay自動再生を開始する。有効のときはtrue、無効のときはfalse。ただし、消音でないときはほとんどのブラウザで自動再生が無効になる。
bufferedブラウザがバッファリングしているメディアファイルの長さ。値はTimeRangesオブジェクト
controller要素に割りてられたコントローラを表す。初期値はNULL
controlsコントーラの表示の有無。表示するときはtrue、非表示のときはfalse
crossOrigin異なるドメインからメディアファイルを読み込むかどうか。同じドメインからの読み込みのみ許可するときはanonymous、クロスドメイン(異なるドメイン)からの読み込みを許可するときはuse-credentials
currentSrc再生しているメディアのメディアファイルのパス。値は文字列。
currentTime再生しているメディアファイルの再生位置。値は開始時点の0〜再生時間(durationプロパティ)の間の浮動小数点数。
defaultMutedメディアファイルを再生したときにデフォルトで消音(ミュート)を有効にするかどうか。デフォルトで消音のときはtrue、それ以外はfalse。消音設定を動的に変更するときはmutedプロパティを使う。
defaultPlaybackRateデフォルトの再生速度。値の変更はplaybackRateプロパティを使う
durationメディアファイルの全体の再生時間。値は浮動小数点数。リソースファイルが読み込めなかったときは0、再生時間が不明なときはNaN、ファイル情報よりも音声ファイルの長さが短いときはInf
endedメディアファイルの再生が終了したらtrue、終了していなければfalse
errorメディアファイルの再生についてエラーが発生していたらMediaErrorオブジェクトが入る。エラーがない場合はnull
loopメディアファイルの再生が終了した後にまた開始地点から再生するときはtrue、再生しないで停止するときはfalse
mediaGroupaudio要素video要素にに設定されたmediagroup属性の値。
muted消音になっていたらtrue、消音解除しているときはfalse
networkStateインターネットから取得するメディアファイルの取得状況。値は以下のいずれかの状態にあわせて03の数値が入ります。

定数状態
0NETWORK_EMPTYまだデータがない状態
1NETWORK_IDLEメディアファイルを選択した状態でネットワーク未接続の状態
2NETWORK_LOADINGメディアファイルをダウンロードしている状態
3NETWORK_NO_SOURCEsrc属性のメディアファイルが見つからない状態
onerrorイベントerrorを処理するためのイベントハンドラ。
paused一時停止しているときはtrue、再生中のときはfalse
playbackRateメディアファイルの再生速度。通常の速度は1.01.1以上は早送り、0.9以下の数値はスロー再生、-1.0など負の値は逆再生。2020年10月時点では、逆再生に対応しているブラウザはSafariのみ。
readyState

メディアファイルの再生準備状態。

定数状態
0HAVE_NOTHINGメディアファイルの情報がない状態。
1HAVE_METADATAメディアファイルのメタデータ属性を初期化するのに十分な状態。
2HAVE_CURRENT_DATA現在の再生位置のデータはあるが、続きを再生する分のデータは不十分な状態。
3HAVE_FUTURE_DATA現在の再生位置から続きを再生できるだけのデータがある状態。
4HAVE_ENOUGH_DATAメディアファイルの終わりまで中断せずに再生できる状態。
seekableユーザーがシークできる再生時間の範囲内かどうか。値はTimeRangesオブジェクト
src再生するメディアファイルのパス。値は文字列。
src​Object音声ファイルのメディアファイル。MediaSteamオブジェクトMediaSourceオブジェクトBlobオブジェクトFileオブジェクトのいずれかを指定。
videoTracksaudio要素video要素に含まれる動画トラックリスト。値はVideoTrackListオブジェクト
volume再生する音量。値は0(無音)〜1.0(最大音量)の間で指定する。mutedプロパティによる消音が有効になっていたら、そちらを優先して適用する。

メソッド

audio要素video要素で使用できるメソッドの一覧です。

メソッド名内容戻り値
canPlayType()audio/mp3」など指定したメディアタイプを再生できるか確認する。

文字列で以下のいずれか。

  • ‘probably’ – 再生可能なメディアタイプ
  • ‘maybe’ – メディアタイプは再生可能でも実際に再生してみないと分からない
  • (空) – 再生できないメディアタイプ
captureStream()audio要素video要素で読み込んでいるメディアファイルをキャプチャしたMediaStreamオブジェクトを取得する。MediaStreamオブジェクト
load()audio要素video要素をリセットしてメディアファイルを読み込みし直す。
pause()メディアファイルを一時停止する
play()メディアファイルの再生を開始するPromiseオブジェクト

イベント

audio要素video要素で発生するイベント一覧です。

イベント名発生するタイミング
abortメディアファイルを完全に読み込めなかったときに発生する。
canplayメディアファイル読み込み中に再生できる状態になると発生する。
canplaythroughメディアファイルを途中で中断せずに最後まで再生できる状態になったときに発生する。
durationchange読み込んだメディアファイルの再生時間を表すdurationプロパティの値が更新されたときに発生する。
emptiedメディアファイルが空になったときに発生する。
endedメディアファイルの再生時間の長さに再生位置が到達したときに発生する。
error指定したメディアファイルが見つからなかったり、ネットワークが繋がってなくて読み込めなかったときに発生する。
loadeddataメディアファイルの再生位置部分の読み込みが完了したときに発生する。
loadedmetadataメディアファイルのメタデータが読み込まれたときに発生する。
loadstartメディアファイルの読み込みを開始したときに発生する。
pause再生を一時停止したときに発生する。
play再生を開始したときに発生する。
progressメディアファイルを読み込んでいる間に継続的に発生する。
ratechange再生レートを変更したとき。playbackRateプロパティの値を変更すると発生する。
seekedシーク操作(再生位置の移動)が完了するときに発生する。currentTimeプロパティの値を変更すると、変更直後に発生する。
seekingシーク操作(再生位置の移動)を開始するときに発生する。currentTimeプロパティの値を変更すると、変更直前に発生する。
stalledメディアファイルのデータを読み込もうとしても失敗したときに発生する。
suspendメディアファイルの読み込みが中断されたときに発生する。
timeupdate再生位置を示すcurrentTimeプロパティの値が更新されたときに発生する。再生中は頻繁に発生。
volumechange音量を変更したときに発生する。volumeプロパティのみでなく、muteプロパティによる消音の有効/無効の切り替えでも発生。
waitingネットワーク回線の遅延などによって、メディアファイルの再生するデータが不足して再生を続けられないときに発生する。

発生したイベントを検出するときはaddEventListenerメソッドを使うか、イベントハンドラを使う2種類の方法があります。

addEventListenerメソッドを使う場合

addEventListenerメソッドを使う場合は、発生を検出したいイベントをイベントリスナーに登録します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const videoElement = document.querySelector("video");

  audioElement.addEventListener("play", (e) => {
    console.log("Play start");
  });

});

イベントハンドラを使う場合

イベントハンドラで発生したイベントを検出するときは、上記イベント一覧にあるイベント名の前に「on」を加えて設定します。
例えばイベント「play」であれば「onplay」として、以下のように設定して使います。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const videoElement = document.querySelector("video");

  audioElement.onplay = (e) => {
    console.log("Play start");
  };

});

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。