前言
在前端开发中，音频处理是一个十分重要的需求。尤其是在音乐播放器等项目中，频谱图展示是一项必不可少的功能。而 audio-waveform-svg-path 这个 npm 包，可以帮助我们展示频谱图。本文将会详细介绍如何使用这个 npm 包来实现频谱图的展示。
安装
在使用之前，需要先进行安装。可以通过以下命令进行安装。
npm install audio-waveform-svg-path --save-dev
使用
前置工作
在使用之前，需要先获取音频数据，并且对不同格式的音频数据进行不同的处理。以下是对不同格式的音频数据获取的处理方法。
音频文件
对于音频文件，需要使用 wavefile 这个 npm 包获取数据。以下是获取音频数据的示例代码。
-- -------------------- ---- -------
------ -------- ---- -----------
----------------------
-------------- -- -----------------------
------------ -- --- -----------------
-------------- -- -
----- ---------- - --------------------
----- ----------- - ---------------------
-- ----
---音频实时录音
对于实时录音，可以通过 getUserMedia 进行获取，并使用 DataView 进行解析。以下是获取音频数据的示例代码。
-- -------------------- ---- -------
----- ------- - --- ---------------
----- ---------- - -----
------------------------------------- ------ ---- --
------------ -- -
----- ------ - ----------------------------------------
----- --------- - ----------------------------------------- -- ---
------------------------ - ----- -- -
----- ---- - ------------------------------------
----- ---- - --- ------------ -------------------------
----- ---------- - ----------- ----
--- ---- - - -- - - ----------- ---- -
--------------- - -- ------- - ----------- ------
-
----- ----------- - --- ----------------------- -- ------------
-- ----
--
--------------------------
---------------------------------------
--
------------ -- --------------------音频流
对于音频流，需要使用 web-audio-api 进行处理。以下是获取音频数据的示例代码。
-- -------------------- ---- -------
----- ------- - --- ---------------
----- ------ - -----------------------------
----- -------- - -------------------------
----------------------
-------------- -- ----------------
---------- -- --- --------------- -- -
----- ---------- - --- -------------
----------------- - -- -- ---------------------------
-----------------------------------
---
----------------- -- -------------------------------------
----------------- -- -
----- ---------- - -----------------------
----- ----------- - ------------------------------
-- ----
---使用 audio-waveform-svg-path
在获取了音频数据之后，可以对数据进行处理，并使用 audio-waveform-svg-path 进行进行绘制。以下是一个绘制频谱图的完整代码。
-- -------------------- ---- -------
------ -------- ---- -----------
------ - ------------------ - ---- --------------------------
----- ----- - ----
----- ------ - ----
----- ------ - ---------------------------------
------------ - ------
------------- - -------
----------------------------------
----- ------- - ------------------------
----------------------
-------------- -- -----------------------
------------ -- --- -----------------
-------------- -- -
----- ----------- - ---------------------
----- ------ - --------------------------- ----- -- -
----- --- - ------------------
----- --- - ------------------
---------- - -------------------- -----
---------- - -------------------- -----
------ -------
-- - ---- ---------- ---- -------- ---
----- ----- - ------ - ----------- - ------------
----- -------- - --------------------
------------ ---------------
------ ------
------- -------
------
---
------------------- - --------
----------------- - --
--------------------
----- ---- - --- -----------------
---------------------
---总结
使用 audio-waveform-svg-path 可以帮助我们实现音乐播放器等项目的频谱图展示功能。在使用之前，需要对音频数据进行获取，并使用不同的处理方法进行解析。有了这个 npm 包，我们可以更加轻松、快速地实现频谱图的展示效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055afe81e8991b448d8a7a