什么是 waveform-data？
waveform-data 是一款用于处理音频波形数据的 npm 包。它提供了一些方法，可以用于计算和获取音频波形数据。使用这个包可以轻松地实现音频可视化的效果。
怎样安装？
首先，在你的项目中进入终端，然后运行以下命令即可安装：
npm install waveform-data
怎样使用？
获取音频波形数据
要获取一个音频文件的波形数据，可以使用 waveform-data 的 createSingleWaveform(url: string, options?: Options) 方法。url 参数是音频文件的地址；options 用于传递一些可选参数，指定对结果进行处理的方式，譬如返回数据类型（是个数组还是一个对象）、FFT 的长度、FFT 的类型等等。
import { createSingleWaveform } from 'waveform-data'
const options = {
mono: true, // 默认值是 false，设为 true 会将多声道合成为单声道
// other options...
}
const waveform = createSingleWaveform('http://example.com/audio.mp3', options)createSingleWaveform 方法返回的值是一个 Promise，通过 then 方法来获取数据。这个数据是一个数组或者一个对象，元素数量等于 FFT 的长度除以 2，每个元素代表的是一个频率上的能量值。如果我们在 options 中设定了 mono 参数为 true，那么返回的就是数组；否则返回的就是对象。
-- -------------------- ---- ------- ------------------ -- - ----------------- -- -- ------------ --- ------------------- -- - -- --------- ------------ ----------- ----------- ----- -- --------- ------------ ----------- ----------- ----- -- --- -- - -- -- ------------ --- ------------------ -- ------------ ----------- ----------- ---- --
计算峰值频率
想要在频谱中展示出峰值，需要先计算出波形数据中哪些频率是最强的。waveform-data 也提供了一个方法来完成这个过程： getPeaks(params, waveform)。params 参数是一个对象，包含了一些可选项来指定如何查找峰值。waveform 参数就是我们在上面获取到的用于表示音频频谱的数组或对象。最后，该方法返回一个峰值频率数组，也就是那些最明显的波峰所对应的频率。
-- -------------------- ---- ------- ------ - -------- - ---- --------------- ----- ------ - - ---------------- --- -- ---------------- -- ---- -------------------- --- -- ---------- -- -------- ------------------ -- -- ---- - ----- -------- - ---------------------------------------------------- ------------------ -- - ----- ----- - ---------------- ----- ------------------ -- ---------- --
绘制波形
最后，我们可以使用得到的波形数据来进行可视化展示。下面是一个基础的绘制波形的代码示例，注意这里我们使用了 D3.js，它是用于数据可视化的 JavaScript 库。如果你不知道该如何使用 D3，可以先学习一下相关的教程。
-- -------------------- ---- -------
------ - --------------------- -------- - ---- ---------------
------ - -- -- ---- ----
----- ------ - -
---------------- ---
-------------------- ---
------------------ --
-
----- ------- - -
--------- -----
---------- --------
-
----- -------- - ---------------------------------------------------- --------
------------------ -- -
----- ----- - ---------------- -----
----- ----- - --------------------------- -- - - ----- - ------------
----- ----- - --------------------------- ------------------------ -----
----- ------ - ----------- -- ---------- -------------------------------- ----
----- --- - -------------------------------
-------------- ----
--------------- ----
------------------
--------------
------------- -------
--------------- --------
--------------------- --
---------- ----------
--总结
本篇文章详细介绍了 npm 包 waveform-data 的使用方法，从获取音频波形数据开始，再到计算峰值频率和绘制波形，包含了一些示例代码和相关说明。希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb54bb5cbfe1ea061140e