JavaScriptで動画や音声ファイルの再生に対応しているかどうかを確認する方法として、`canPlayType()`メソッドがあります。このメソッドを使用することで、ブラウザが特定のメディアフォーマットに対応しているかを事前にチェックできます。

canPlayType()メソッドの基本

`canPlayType()`メソッドは、HTMLMediaElement（audio要素やvideo要素）のメソッドで、以下のような形式で使用します：

const audio = document.createElement('audio');
const result = audio.canPlayType('audio/mp3');

戻り値について

`canPlayType()`メソッドは以下の3つの文字列のいずれかを返します：

  • `"probably"`: 高い確率で再生可能
  • `"maybe"`: おそらく再生可能
  • `""` (空文字): 再生不可能

実装例

function checkAudioSupport() {
    const audio = document.createElement('audio');
    
    const formats = {
        mp3: 'audio/mpeg',
        wav: 'audio/wav',
        ogg: 'audio/ogg',
        m4a: 'audio/mp4'
    };

    for (const [format, mimeType] of Object.entries(formats)) {
        const support = audio.canPlayType(mimeType);
        console.log(`${format}: ${support || '非対応'}`);
    }
}

checkAudioSupport();

コーデックの指定

より詳細な対応確認を行うために、コーデックを指定することもできます：

const video = document.createElement('video');
const h264Support = video.canPlayType('video/mp4; codecs="avc1.42E01E"');

実践的な使用例

function isSupportedAudioFormat(format) {
    const audio = document.createElement('audio');
    const mimeTypes = {
        mp3: 'audio/mpeg',
        wav: 'audio/wav',
        ogg: 'audio/ogg',
        m4a: 'audio/mp4'
    };

    const support = audio.canPlayType(mimeTypes[format]);
    return support !== '';
}

if (isSupportedAudioFormat('mp3')) {
    // MP3ファイルを再生する処理
} else {
    // 代替の処理
}

エラー処理

`canPlayType()`メソッドは、無効な引数が渡された場合でもエラーを投げずに空文字を返します。ただし、より堅牢なコードにするために、以下のようなエラーハンドリングを実装することをお勧めします：

function checkMediaSupport(mimeType) {
    try {
        const media = document.createElement('audio');
        const result = media.canPlayType(mimeType);
        
        if (result === '') {
            console.log(`${mimeType}は非対応です`);
            return false;
        }
        
        console.log(`${mimeType}は${result}で対応しています`);
        return true;
    } catch (error) {
        console.error('メディア対応確認中にエラーが発生しました:', error);
        return false;
    }
}

まとめ

`canPlayType()`メソッドは、ブラウザの対応状況を確認する便利な方法です。特に以下のような場面で活用できます：

  • ユーザーのブラウザで再生可能なフォーマットを事前に確認
  • 代替フォーマットの提供判断
  • メディアプレーヤーの機能制限の設定

ブラウザの互換性を考慮したメディア再生機能を実装する際には、`canPlayType()`メソッドを活用することで、より良いユーザー体験を提供できます。