将分析仪连接到咆哮声答案

【问题标题】：Connect analyzer to Howler sound将分析仪连接到咆哮声
【发布时间】：2015-09-08 14:13:59
【问题描述】：

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

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

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 中连接什么。

【问题讨论】：

标签： audio web-audio-api howler.js

【解决方案1】：

Web Audio 使用一系列“节点”将源文件连接到目标，分析器是一种可以沿路径存在的节点 (here's a great overview)。要在 Howler 流中获取分析器，您需要将其插入到 Howler 创建的节点序列中。幸运的是，Howler 公开了其节点序列的核心元素。

最简单的用例是为 Howler 的所有音频输出创建一个分析器，也就是“主控器”。 Howler 中的每个 Howl、插件和失真节点都流经 masterGain 节点，该节点直接连接到 destination 节点。这就是我们放置分析仪的地方。

// 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。

【讨论】：

感谢您的解释

【解决方案2】：

您需要将输出要分析的音频的节点连接到分析器节点，然后将分析器节点连接到上下文目标（或另一个节点）。所以是这样的：

//this is a bufferSource with a decoded buffer that we want to analyse
source.connect(analyser);
analyser.connect(context.destination);

完成此操作后，您应该能够根据https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode 开始请求分析结果

【讨论】：

感谢@Oskar Eriksson 的回答。我对Howler 的问题是我不知道如何获取source 元素。
我建议用纯网络音频做一些简单的事情。使用振荡器作为源。弄清楚如何让分析仪做你想做的事。如果你有麻烦回到这里。如果你想通了，那就想办法让 Howler 做你想做的事。（我对咆哮一无所知。）