使用HTML5和JavaScript的音频可视化仅输出零

Question

我正在尝试在JavaScript中创建一个Audio visualizer以在网站上显示。我希望可视化工具在本地工作（所以没有nodejs或服务器）。这就是我到目前为止所做的：

obtrusiveness

我的index.html文件中还有一个Audio元素，如下所示：

var audioContext,mediaElementSource,analyzer,analyzerBytes;

function initAudio(){
    audio = new Audio();
    audio.source = 'music.mp3';
    audio.loop = true;


    if (!audioContext){

        audioContext = new AudioContext();
        mediaElementSource = audioContext.createMediaElementSource(audio);
        analyzer = audioContext.createAnalyser();
        mediaElementSource.connect(analyzer);
        analyzer.connect(audioContext.destination);
        analyzerBytes = new Uint8Array(analyzer.frequencyBinCount);
        audio.play();

        window.setInterval(function() {

          analyzer.getByteFrequencyData(analyzerBytes);
          console.log(analyzerBytes);


        }, 50);
    }
}

我的问题是，当我播放音频（工作正常）时，控制台显示analyzerBytes数组只包含零。这意味着我没有得到正在播放的频率，因此无法对信息进行任何可视化。

我错过了什么或者我完全错了吗？我一直在寻找其他人解决问题的方法，但是当我尝试他们的代码时，我仍然只得到一个充满零的数组，因为它们充满了频率。