将分析仪连接到咆哮声

Question

我已经尝试了一段时间将分析仪连接到咆哮声音而没有任何成功.

我像这样创建我的咆哮声:

var sound = new Howl({
    urls: [
        '/media/sounds/genesis.mp3',
    ]
});

然后我使用Howler全局上下文创建我的分析器,如下所示:

var ctx = Howler.ctx;
var analyser = ctx.createAnalyser();
var dataArray = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteTimeDomainData(dataArray);

我是网络音频API的新手.我想我错过了某个地方的联系,但我不知道我在咆哮中连接它有什么.

Answer 1

Web Audio使用一系列"节点"将源文件连接到目标,而分析器是一种可以沿路径存在的节点(这里是一个很好的概述).要在Howler流中获取分析器,您需要将其插入到Howler创建的节点序列中.幸运的是,Howler公开了其节点序列的核心元素.

最简单的用例是为所有Howler的音频输出创建一个分析器,即"主".Howler中的每个Howl,插件和失真节点都流经masterGain节点,该节点直接连接到目标节点.这就是我们放置分析仪的地方.

// Create an analyser node in the Howler WebAudio context
var analyser = Howler.ctx.createAnalyser();

// Connect the masterGain -> analyser (disconnecting masterGain -> destination)
Howler.masterGain.connect(analyser);

// Connect the analyser -> destination
analyser.connect(Howler.ctx.destination);

*编辑(2018-04-25):似乎目前不需要将分析仪重新连接到原始吼声目的地,实际上会导致严重的音质问题.最后一行应该省略.

现在你的分析仪连接到咆哮,咆哮播放的任何东西都可以通过analyser.getByteTimeDomainData(dataArray)等等方式获得.从这里你可以运行你想要的任何分析器/可视化方法,我从这些开始.