HTML5 音频 - 获取全为零的频率数组

Question

我在构建音频可视化时遇到了一些麻烦。我正在使用 HTML5 音频标签：

<audio id="music" src="https://cdn.glitch.com/02dcea11-9bd2-4462-ac38-eeb6a5ad9530%2F331_full_beautiful-minds_0171_preview.mp3?1522829295082" crossorigin="use-URL-credentials" controls="true"></audio>

（歌曲来自www.premiumbeat.com）

与 AudioContext 和 Analyzer 一起使用，如下所示：

const audio = document.getElementById('music');
audio.load();
audio.play();

const ctx = new AudioContext();
const audioSrc = ctx.createMediaElementSource(audio);
const analyser = ctx.createAnalyser();
audioSrc.connect(analyser);
analyser.connect(ctx.destination);

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const frequencyData = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(frequencyData);

setTimeout(() => {
   analyser.getByteFrequencyData(frequencyData);
   console.log(frequencyData);
}, 5000);

输出： 尽管当我调用 getByteFrequencyData() 时歌曲正在播放，但输出是 128 项全为零的长数组。

预期行为： 5 秒后控制台应输出 128 项长数组的当前频率数据。（我这样做是因为 requestAnimationFrame 会滞后 window，但是我试过了，结果是一样的）。

知道我做错了什么吗？ （我使用的是 Firefox Quantum 59.0.2。）

在这里试试：JSFiddle example

谢谢！

Answer 1

根据我对网络音频的实验 api，我修改了您的脚本以使用 getByteTimeDomainData 而不是 getByteFrequencyData。

https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getByteTimeDomainData

在演示中使用间隔而不是超时。

const audio = document.getElementById('music');
audio.load();
audio.play();

const ctx = new AudioContext();
const audioSrc = ctx.createMediaElementSource(audio);
const analyser = ctx.createAnalyser();

audioSrc.connect(analyser);
analyser.connect(ctx.destination);

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const frequencyData = new Uint8Array(bufferLength);

setInterval(() => {
   analyser.getByteFrequencyData(frequencyData);
   console.log(frequencyData);
}, 1000);

<audio id="music" src="https://cdn.glitch.com/02dcea11-9bd2-4462-ac38-eeb6a5ad9530%2F331_full_beautiful-minds_0171_preview.mp3?1522829295082" crossorigin="use-URL-credentials" controls="true"></audio>

HTML5 音频 - 获取全为零的频率数组

HTML5 Audio - Getting frequency array full of zeros

javascript

html5-audio

audiocontext