Question

我正在使用WAAPISim Polyfill在音频文件的可视化中使用Web Audio API进行跨浏览器支持。 polyfill尝试按此顺序使用以下方法：“WebAudioAPI =＆gt; AudioDataAPI =＆gt; Flash”。我在JS中加载这样的音频文件：

// load the specified sound
function loadSound(url) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';

    // When loaded decode the data
    request.onload = function() {

        // decode the data
        context.decodeAudioData(request.response, function(buffer) {
            // when the audio is decoded play the sound
            playSound(buffer);
        }, onError);
    }
    request.send();
}

loadSound("audio/bird.wav");

如polyfill文档中所述，此polyfill仅支持此方法的wav格式。 “来自ArrayBuffer的createBuffer和decodeAudioData仅支持wav格式。”

现在，它只加载.wav，但我想加载.mp3（较小的文件）而不是支持它的浏览器。如何检测实现是否适用于.mp3并相应地加载正确的文件？

Full demo example

Answer 1

如果：

(new Audio()).canPlayType("audio/mp3")

返回"maybe"或"probably"，然后浏览器支持decodeAudioData中的mp3。

Answer 2

我从polyfill开发者那里得到了这个回复：

if (typeof window.waapisimContexts != 'undefined'){
            loadSound("audio/bird.wav");
        } else {
            loadSound("audio/bird.mp3");
        }

只有当浏览器要求它播放.wav时，polyfill才会创建waapisimContexts，因此这种方法会查找waapisimContexts并加载.wav（如果已定义）。否则，它会加载.mp3。

WAAPISim Polyfill - 如何使用.wav后备加载.mp3

2 个答案: