2020.12.31レシピ音声メディアファイルを再生できるか確認する音声ファイルや動画ファイルを表示しているブラウザで再生できるか確認する方法について解説します。この記事のポイントページを表示したブラウザがメディアファイルの再生に対応しているか調べるときはcanPlayTypeメソッドを使う戻り値が「probably」か「maybe」であれば再生できる可能性が高いファイルのMIMEタイプから再生できるか確認するサイトのページ上で音声や動画を再生するときに、そのメディアタイプの再生をブラウザが対応しているか調べるときはcanPlayTypeメソッドを使います。audioElement.canPlayType('audio/mp3');このメソッドはパラメータに「audio/mp3」などのメディアファイルのMIMEタイプを渡すと、ページを表示している環境で再生できるかどうかを調べて以下のいずれかの文字列を返します。メディアタイプは再生可能。再生できないメディアタイプ以下の例はaudio要素を変数audioElementに取得し、video要素をvideoElementに取得してそれぞれcanPlayTypeメソッドを呼び出して戻り値をコンソールに出力します。v86.0.4240.80で実行した結果です。出力結果は実行するブラウザによって異なります。''});canPlayTypeメソッドはHTMLMediaElementのメソッドであるため、audio要素やvideo要素を取得してから使いますが、src属性で読み込んだファイルのMIMEタイプとメソッドのパラメータは一致する必要はありません。そのため、audio要素でcanPlayTypeメソッドを実行するときにパラメータを動画ファイルの形式である「'video/mp4'」を指定して再生できるか確認することも可能です。2020年11月の各種最新版ブラウザでcanPlayTypeメソッド実行した結果は以下のようになります。''メソッドの実行結果を並べてみると、音声ファイルは「audio/aac」、「audio/mp3」、「audio/wav」の3種類、動画ファイルは「video/mp4」であればほとんどのブラウザで再生できる可能性の高い形式になります。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。要件を満たすコードをササッと書けて、どこでも通用するような凄いエンジニアになりたい。エンジニアをやっていると、そんな憧れや「個人の能力・スキル」重視の思考に陥ったことが一度はあるのではないでしょうか。本書はそんな個人思考から脱却し、より広い視点を持ちながら効率良い開発を進められるようなエンジニアの参考にすべき考え方が詰まっています。