audio - 将分析仪连接到咆哮声

Question

我一直在尝试将分析仪连接到 Howler 声音，但没有成功。

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

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 很陌生。我想我在某处缺少连接，但我不知道我必须在 Howler 中连接它。

Answer 1

Web Audio 使用一系列“节点”将源文件连接到目标，而分析器是一种可以沿路径存在的节点 ( here's a great overview )。要在 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):目前似乎不需要将分析仪重新连接到原始咆哮目的地，实际上会导致严重的音质问题。最后一行应该被省略。

现在，您的分析仪已连接到 Howler，您可以通过 analyser.getByteTimeDomainData(dataArray) 获得 Howler 播放的任何内容。 ，等等。从这里您可以运行您想要的任何分析器/可视化方法，I started with these .