将分析仪连接到咆哮声 [英] Connect analyzer to Howler sound

问题描述

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

I have been trying for a while to connect an analyser to a Howler sound without any success.

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

I create my Howler sound like this:

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

然后我像这样使用Howler全局上下文创建我的分析器:

And then I create my analyser using Howler global context like this:

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

我对网络音频API很陌生.我想我在某处缺少连接，但是我不知道在Howler中要连接什么.

I am quite new to the web audio API. I think I am missing a connection somewhere but I don't know to what I have to connect it in Howler.

推荐答案

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

Web Audio uses a sequence of "nodes" to connect a source file to a destination, and an analyser is a type of node that can exist along the route (here's a great overview). To get an analyser in the Howler flow, you need to insert it into the node sequence that Howler has created. Fortunately, Howler exposes the core elements of its node sequence.

最简单的用例是为所有Howler的音频输出(也称为主")创建一个分析器.咆哮中的每个咆哮，插件和失真节点都流经 masterGain 节点，该节点直接连接到目的地节点.那是我们放置分析器的地方.

The simplest use case would be to create an analyser for ALL of Howler's audio output, aka the "master". Every Howl, plugin, and distortion node in Howler flows through the masterGain node, which connects directly to the destination node. That's where we'll put our analyser.

// 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);

* Edit(2018-04-25):似乎当前没有必要将分析仪重新连接到原始啸叫目的地，并且实际上会导致严重的声音质量问题.最后一行应省略.

*Edit (2018-04-25): It seems that reconnecting the analyzer to the original howler destination is not currently necessary, and in fact causes severe sound quality issues. The final line should be ommitted.

现在您的分析仪已连接到Howler，并且Howler播放的所有内容都可以通过analyser.getByteTimeDomainData(dataArray)等获得.在这里，您可以运行所需的任何分析器/可视化方法，我是从这些开始的.

Now your analyser is connected to Howler and anything that Howler plays will be available through analyser.getByteTimeDomainData(dataArray), et cetera. From here you can run any analyser/visualization methods you want, I started with these.

这篇关于将分析仪连接到咆哮声的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！