npm 包 spectrum-analyzer 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，频谱分析器是一款非常有用的工具。spectrum-analyzer 是一个通过实时音频数据生成频谱图的 npm 包，在 Web 开发中被广泛应用。本篇文章将为大家介绍该 npm 包的使用方法。

安装

在开始使用 spectrum-analyzer 之前，我们需要先安装它。在项目目录下运行以下指令进行安装：

npm install spectrum-analyzer

使用

spectrum-analyzer 的主要接口为 SpectrumAnalyzer() 。

创建实例

首先，我们需要用 SpectrumAnalyzer() 函数创建一个分析器实例。可以通过以下代码实现：

import { SpectrumAnalyzer } from 'spectrum-analyzer';

const audioContext = new AudioContext();
const analyzer = new SpectrumAnalyzer(audioContext);

注意，在实例化 SpectrumAnalyzer 的时候需要传入一个 AudioContext 对象。这相当于一个音频环境，我们可以用它来控制音频的参数设置和播放等。

获取音频数据

获取音频数据的方法有两种：

通过 MediaStream 对象获取实时音频数据
手动输入音频数据

通过 `MediaStream` 对象获取实时音频数据

首先需要创建一个 MediaStream 对象：

navigator.mediaDevices.getUserMedia({audio: true})
.then(function(stream) {
  const source = audioContext.createMediaStreamSource(stream);
  analyzer.connect(source);
})
.catch(function(err) {
  console.log('getUserMedia failed: ' + err);
});

创建 MediaStream 对象后，我们可以将其通过 AudioContext 对象的 createMediaStreamSource 函数转换为一个可连接到分析器的音频源对象。将音频源对象连接到分析器：

analyzer.connect(source);

连接完成后，可以通过 analyzer.analyze() 方法获取分析结果，如下所示：

const data = analyzer.analyze();

手动输入音频数据

我们也可以手动输入音频数据作为参数传递给分析器，这样就可以分析本地的音频文件。这里默认本地的音频文件是一个音频数组，如下所示：

const audioBuffer = audioContext.createBuffer(1, audioArray.length, sampleRate);
const audioData = audioBuffer.getChannelData(0);
for (let i = 0; i < audioArray.length; i++) {
  audioData[i] = audioArray[i];
}
analyzer.analyze(audioBuffer);

获取频谱数据

分析器在分析音频数据后，会生成一个包含频率和振幅数据的数组。我们可以通过 analyzer.getFrequencyData() 方法来获取该数组。

const frequencyData = analyzer.getFrequencyData();

可视化呈现

得到频率和振幅数据后，我们需要将其进行可视化呈现。这里推荐使用 Canvas , 以 canvas 元素的绘制功能来实现频谱可视化效果。

以下是一个基本的频谱可视化代码：

-- -------------------- ---- -------
----- ------ - ---------------------------------
----- --------- - ------------------------

----- ----- - -------------
----- ------ - --------------

-------- ------ -
  ----------------------------
  ----- ------------- - ----------------------------

  ---------------------- -- ------ --------
  ------------------- - ------- -- ----
  --------------------- -- ------ --------

  ----- -------- - ------ - --------------------- - ----
  --- - - --

  --- ---- - - -- - - --------------------- ---- -
    ----- --------- - ---------------- - --

    ------------------- - ------ - ---------- - ---- - ----------
    --------------------- ------ - --------- - -- --------- --------- - ---

    - -- -------- - --
  -
--

-------

效果

使用以上代码，我们可以得到以下效果图：

总结

使用 spectrum-analyzer 包可以让我们很方便地对音频数据进行频谱分析，并对其进行可视化操作。本篇文章详细介绍了使用步骤，希望大家可以通过此教程更好的运用该工具。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005556c81e8991b448d29c2

npm 包 spectrum-analyzer 使用教程

安装

使用