Detekce podporovaných zvukových formátů pomocí JavaScriptu

Streamování se stává naším hlavním zdrojem zábavy a prodejci bojují o vytvoření nejlepšího formátu videa, a proto bude stále důležitější, abychom před zveřejňováním videí na našich webech zjišťovali podporu videa v zařízení a prohlížeči. Méně přemýšlíme o zvuku, ale platí stejný princip:  před použitím zjistěte, zda je daný zvukový formát podporován. Jak tedy zjistíme, zda je daný typ zvuku podporován?

Podporu audio formátu můžeme zjistit pomocí HTMLAudioElement.prototype.canPlayType , stejná strategie, která se používá u videa:

// 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"

Existují tři možné výsledky z canPlayType :

  • "probably" :Zdá se, že typ média lze přehrát
  • "maybe" : Nelze zjistit, zda lze daný typ média přehrát bez přehrání
  • "" :Typ média nelze přehrát

Můžeme vytvořit funkci podobnou mému supportsVideoType funkce pro usnadnění detekce zvuku:

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
}

Věnovat čas detekci okrajových zvukových a obrazových formátů se vyplatí, což vám umožní poskytovat čistší média s lepší kompresí a zkrátit tak dobu načítání. Mějte na paměti tyto funkce JavaScriptu pro váš velký nebo malý mediální web!