HTML5音频获取频率数组全零

HTML5 Audio - Getting frequency array full of zeros(HTML5音频获取频率数组全零)

本文介绍了HTML5音频获取频率数组全零的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在构建音频可视化时遇到了一些问题。我正在使用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和Analyser配合使用,如下所示:

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条长数组的当前频率数据。(我这样做是因为questAnimationFrame会延迟窗口,但我尝试了一下,结果是一样的)。

知道我做错了什么吗?(我使用的是Firefox Quantum 59.0.2。)

在此试用:JSFiddle example

谢谢!

推荐答案

在我使用Web音频API进行实验后,我将您的脚本修改为使用getByteTimeDomainData而不是getByteFrequencyData

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

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
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音频获取频率数组全零

基础教程推荐