Detectar formatos de áudio suportados com JavaScript

À medida que o streaming se torna nossa principal fonte de entretenimento e os fornecedores lutam para criar o melhor formato de vídeo, será cada vez mais importante que detectemos o suporte a vídeo do dispositivo e do navegador antes de publicar vídeos em nossos sites. Pensamos menos em áudio, mas o mesmo princípio se aplica: detectar se um determinado formato de áudio é compatível ou não antes de usá-lo. Então, como detectamos se um determinado tipo de áudio é compatível?

Podemos detectar o suporte ao formato de áudio com HTMLAudioElement.prototype.canPlayType, a mesma estratégia usada com vídeo:

// Create an audio element so we can use the canPlayType method
const audio = document.createElement('audio');

// Does the device support mp3?
audio.canPlayType('audio/mpeg'); // "probably"

Há três resultados possíveis do canPlayType:

• "probably" : O tipo de mídia parece ser reproduzível
• "maybe": Não é possível saber se o tipo de mídia é reproduzível sem reproduzi-la
• "": O tipo de mídia não pode ser reproduzido

Podemos criar uma função muito parecida com a minha supportsVideoType para facilitar a detecção de áudio:

function supportsAudioType(type) {
  let audio;

  // Allow user to create shortcuts, i.e. just "mp3"
  let formats = {
    mp3: 'audio/mpeg',
    mp4: 'audio/mp4',
    aif: 'audio/x-aiff'
  };

  if(!audio) {
    audio = document.createElement('audio')
  }

  return audio.canPlayType(formats[type] || type);
}

// Usage
if(supportsVideoType('mp3') === "probably") {
  // Set the video to mp3
}
else {
  // Set the video to wav or other format
}

Vale a pena dedicar algum tempo para detectar formatos de áudio e vídeo de ponta, o que lhe permite fornecer mídia mais clara com melhor compactação para melhorar o tempo de carregamento. Tenha em mente essas funções JavaScript para seu site de mídia grande ou pequeno!