JavaScript

レシピ

音声

メディアファイルを再生できるか確認する

音声ファイルや動画ファイルを表示しているブラウザで再生できるか確認する方法について解説します。

この記事のポイント

  • ページを表示したブラウザがメディアファイルの再生に対応しているか調べるときはcanPlayTypeメソッドを使う
  • 戻り値が「probably」か「maybe」であれば再生できる可能性が高い

ファイルのMIMEタイプから再生できるか確認する

サイトのページ上で音声や動画を再生するときに、そのメディアタイプの再生をブラウザが対応しているか調べるときはcanPlayTypeメソッドを使います。

audioElement.canPlayType('audio/mp3');

このメソッドはパラメータに「audio/mp3」などのメディアファイルのMIMEタイプを渡すと、ページを表示している環境で再生できるかどうかを調べて以下のいずれかの文字列を返します。

  • ‘probably’ – 再生可能なメディアタイプ
  • ‘maybe’ – メディアタイプは再生可能。ただし実際に再生してみないと分からない
  • (空文字列) – 再生できないメディアタイプ

以下の例はaudio要素を変数audioElementに取得し、video要素videoElementに取得してそれぞれcanPlayTypeメソッドを呼び出して戻り値をコンソールに出力します。

以下の出力結果は2020年11月時点の最新版Chrome v86.0.4240.80で実行した結果です。
出力結果は実行するブラウザによって異なります。

JavaScript コード例

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

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

  console.log(audioElement.canPlayType('audio/aac')); // 'probably'
  console.log(audioElement.canPlayType('audio/mp3')); // 'probably'
  console.log(audioElement.canPlayType('audio/ogg')); // 'maybe'
  console.log(audioElement.canPlayType('audio/midi')); // ''
  console.log(audioElement.canPlayType('audio/wav')); // 'maybe'

  console.log(videoElement.canPlayType('video/mpeg')); // ''
  console.log(videoElement.canPlayType('video/mp4')); // 'maybe'
  console.log(videoElement.canPlayType('video/webm')); // 'maybe'
  console.log(videoElement.canPlayType('video/ogg')); // 'maybe'
  console.log(videoElement.canPlayType('video/quicktime')); // ''
  console.log(videoElement.canPlayType('video/x-msvideo')); // ''
  console.log(videoElement.canPlayType('application/x-shockwave-flash')); // ''
});

canPlayTypeメソッドHTMLMediaElementのメソッドであるため、audio要素video要素を取得してから使いますが、src属性で読み込んだファイルのMIMEタイプとメソッドのパラメータは一致する必要はありません。
そのため、audio要素canPlayTypeメソッドを実行するときにパラメータを動画ファイルの形式である「‘video/mp4’」を指定して再生できるか確認することも可能です。

2020年11月の各種最新版ブラウザでcanPlayTypeメソッド実行した結果は以下のようになります。

パラメータで指定するMIMEタイプChromeFirefoxSafariEdge
‘audio/aac’‘probably’‘maybe’‘maybe’‘probably’
‘audio/mp3’‘probably’‘maybe’‘maybe’‘probably’
‘audio/ogg’‘maybe’‘maybe’‘maybe’
‘audio/midi’
‘audio/wav’‘maybe’‘maybe’‘maybe’‘maybe’
‘video/mpeg’‘maybe’
‘video/mp4’‘maybe’‘maybe’‘maybe’‘maybe’
‘video/webm’‘maybe’‘maybe’‘maybe’
‘video/ogg’‘maybe’‘maybe’‘maybe’
‘video/quicktime’‘maybe’‘maybe’
‘video/x-msvideo’
‘application/x-shockwave-flash’

メソッドの実行結果を並べてみると、音声ファイルは「audio/aac」、「audio/mp3」、「audio/wav」の3種類、動画ファイルは「video/mp4」であればほとんどのブラウザで再生できる可能性の高い形式になります。

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

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

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