在前端开发中，音频处理是一个常见的需求。而 peaks.js 是一款基于 JavaScript 的音频波形可视化库，可以方便地将音频文件转换成波形图进行展示和编辑。
安装及引入
Peaks.js 可以通过 NPM 进行安装：
npm install --save peaks.js
然后在需要使用的文件中引入：
import Peaks from 'peaks.js';
初始化
初始化 Peaks.js 需要传入一个配置对象。下面是一个简单的配置示例：
-- -------------------- ---- -------
----- ------- - -
---------- -------------------------------------------
------------- --------------------------------
-------- -
------------ -------------------------
--
----------- ----- ----- ----- -----
--
----- ------------- - --------------------container是容器元素，用于显示波形图。mediaElement是媒体元素，即音频标签。dataUri是音频文件路径。zoomLevels是缩放级别，数组越大，则缩放次数越多。
基本操作
获取当前时间
可以通过 getCurrentTime() 方法获取当前播放时间（单位：秒）：
const currentTime = peaksInstance.player.getCurrentTime();
设置当前时间
可以通过 setCurrentTime(time) 方法设置当前播放时间（单位：秒）：
peaksInstance.player.setCurrentTime(10);
播放/暂停
可以通过 play()、pause() 方法控制媒体元素的播放和暂停：
peaksInstance.player.play(); peaksInstance.player.pause();
获取/设置波形图高度
可以通过 getZoomLevelIndex()、setZoomLevelIndex(index) 方法获取或设置当前缩放级别：
const zoomLevelIndex = peaksInstance.zoom.getZoomLevelIndex(); peaksInstance.zoom.setZoomLevelIndex(2);
事件监听
Peaks.js 提供了多种事件监听方法，可以根据需要进行注册。下面是一些常用的事件：
ready：Peaks.js 初始化完成时触发。zoom.update：缩放级别更新时触发。player.play：播放开始时触发。player.pause：播放暂停时触发。
例如，如果想在 Peaks.js 初始化完成后执行某些操作，可以这样写：
peaksInstance.on('ready', () => {
console.log('Peaks is ready!');
});示例代码
-- -------------------- ---- -------
---- ---------------------------
------ ----------------------------- -----------------
------- --------------
------ ----- ---- -----------
----- ------- - -
---------- -------------------------------------------
------------- --------------------------------
-------- -
------------ -------------------------
--
----------- ----- ----- ----- -----
--
----- ------------- - --------------------
------------------------- -- -- -
------------------ -- ---------
---
---------总结
通过本文，我们学习了如何使用 Peaks.js 进行音频波形可视化。除了以上介绍的基本操作和事件监听外，Peaks.js 还提供了许多其他功能，可以根据实际需求进行使用。同时，我们也可以发现，在前端开发中，合适的库和工具能够大幅提高开发效率和代码质量，因此，学会使用这些库和工具也是前端开发者必备的技能之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35804