WAAPISim Polyfill-如何使用.wav回退加载.mp3

WAAPISim Polyfill - how to load .mp3 with .wav fallback

本文关键字：回退 加载 mp3 wav 何使用 Polyfill- WAAPISim      更新时间：2023-09-26

我正在使用WAAPISim Polyfill，使用Web audio API从音频文件进行可视化，以提供跨浏览器支持。polyfill尝试按以下顺序使用以下方法："WebAudioAPI=>AudioDataAPI=>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和decodeAudioData的createBuffer只支持wav格式。"

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

完整的演示示例

如果：

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

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

我从polyfill开发人员那里得到了这个响应：

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

polyfill只有在浏览器要求播放.wav时才会创建waapisimContexts，因此这种方法会查找waapisimContext，并在定义了.wav的情况下加载它。否则，它将加载.mp3。

相关文章：