如果你正在寻找一种简单的方法来展示音频波形图，那么 peaks npm 包就是你需要的。
在本篇文章中，我们将介绍如何使用 npm 包 peaks ，并展示如何集成它以显示你的音频文件波形图。
peaks 简介
peaks 是一个用于显示音频波形图的独立库，它是基于 Web Audio API 实现的。Peaks 可以识别音频文件的所有元数据，同时允许你轻松地在音频中添加音符、书签等等。
为了在你的 web 应用程序中使用 peaks ，你可以通过 npm 包管理器安装该软件包。
安装 npm 包 peaks
安装 peaks 很简单，只需要运行以下命令即可：
npm install peaks.js
安装完成后，你可以使用以下代码片段在你的应用程序中集成 peaks ：
// Peaks 开始初始化
let myPeaksInstance = Peaks.init({
container: document.querySelector('#peaks-container'),
mediaElement: document.querySelector('#my-audio'),
dataUri: './media/track.json'
})在上述代码中，我们创建了一个叫做 myPeaksInstance 的 Peaks 实例。该实例使用在 HTML 中声明的 ID 为“peaks-container”的容器节点。
注意：我们还需要定义一个音频节点，并将其媒体元素引用传递给 Peaks 实例。在这个例子中，我们使用 ID 为“my-audio”的 <audio> 元素。
最后，我们将定义 Peaks 实例使用的数据 URI。在本例中，我们将数据 JSON 文件存储在网站根目录下的 Media 文件夹中。
将 Peaks 集成到应用程序中
一旦你已经安装并初始化了 peaks ，你可以使用 Peaks API 集成 peaks 到你的应用程序中。
例如，下面是如何使用 “zoomview” 扩展在 Peaks 中实现缩放功能的示例代码：
-- -------------------- ---- -------
-- --- ----- --
--- --------------- - ------------
---------- -------------------------------------------
------------- ------------------------------------
-------- --------------------
--
-- -- -------- --
----------------------------------------------------------------------------
-- ------
-----------------------------在上述示例中，我们首先创建并初始化 Peaks 实例。之后，我们添加 ZoomView 扩展以及与 Peaks 相对应的适配器。
最后，我们执行缩放操作并将波形图刻度设置为每 20 毫秒的一次。
结论
在本教程中，我们介绍了如何使用 npm 包 peaks 显示音频波形图，并演示了如何集成 peaks 到你的 web 应用程序中。
尽管 peaks 比一些其他的库都要庞大，但我们相信，使用它能使你的用户体验更加独特且有质量。如果你有兴趣了解更多有关 peaks 的细节，你可以查看 peaks 文档或访问它的 GitHub 存储库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557cc81e8991b448d4d64