隨著流媒體成為我們的主要娛樂來源，并且供應(yīng)商正在努力創(chuàng)造最佳的視頻格式，在我們將視頻 發(fā)布到我們的網(wǎng)站上之前，檢測設(shè)備和瀏覽器視頻支持將變得越來越重要。我們對音頻的考慮較少，但適用相同的原理：在使用給定音頻格式之前，先檢查是否支持該格式。那么，如何檢測給定的音頻類型是否受支持？

我們可以使用來檢測音頻格式支持HTMLAudioElement.prototype.canPlayType，該策略與視頻使用的策略相同：

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

有以下三種可能的結(jié)果 canPlayType：

• "probably" ：媒體類型似乎可以播放

• "maybe"：如果不播放，則無法確定媒體類型是否可播放

• ""：媒體類型不可播放

我們可以創(chuàng)建一個類似于我的supportsVideoType 函數(shù)的函數(shù)來簡化音頻檢測：

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
}

花時間檢測邊緣音頻和視頻格式是非常值得的，它使您可以提供更清晰的媒體并進(jìn)行更好的壓縮以縮短加載時間。在大型或小型媒體網(wǎng)站上都請牢記這些JavaScript函數(shù)！