Peaks.js

https://www.toutiao.com/article/7312246249351397900/

Peaks.js？

参考资料
https://github.com/bbc/peaks.js

什么是 Peaks.js
Peaks.js 是用于在浏览器中显示音频波形并与之交互的客户端 JavaScript 组件。

Peaks.js 使用 HTML Canvas 元素以不同的缩放级别显示波形，并具有配置选项以允许开发者自定义波形视图。 Peaks.js 允许用户与波形视图进行交互，包括：缩放和滚动，以及创建点或段标记来表示要剪辑或参考的内容，例如：区分音乐和语音或识别不同的音乐曲目。

Peaks.js 的典型特征包括：

可缩放和可滚动的波形视图
固定宽度波形视图
支持鼠标、触摸、滚轮和键盘交互
使用 Web Audio API 进行客户端波形计算
服务器端波形计算，提高效率
单声道、立体声或多通道波形视图
创建点或线段标记注释
可定制的波形视图
目前 Peaks.js 在 Github 上开源，有超过 3k 的 star、是一个值得关注的前端开源项目。

如何使用 Peaks.js
将 Peaks.js 添加到网页
要将 Peaks.js 包含在网页中，开发者需要添加 Peaks.js 将用于渲染波形视图的容器\

元素，以及用于音频或视频内容的 media 元素。下面是一个 HTML 片段示例：

<div id="zoomview-container"></div>
<div id="overview-container"></div>
<audio id="audio">
  <source src="sample.mp3" type="audio/mpeg">
  <source src="sample.ogg" type='audio/ogg codecs="vorbis"'>
</audio>

容器 div 应留空，如上所示，因为内容将被波形视图 canvas 元素替换。同时，样式还应该具有所需的宽度和高度：

#zoomview-container, #overview-container {
  width: 1000px;
  height: 100px;
}

初始化 Peaks.js
下一步是使用 Peaks.init() 和配置选项初始化 Peaks 实例,以下示例展示了如何使用最少的配置来初始化 Peaks.js。

<script src="https://unpkg.com/peaks.js/dist/peaks.js"></script>
<script>
(function(Peaks) {
  const options = {
    zoomview: {
      container: document.getElementById('zoomview-container')
    },
    overview: {
      container: document.getElementById('overview-container')
    },
    mediaElement: document.getElementById('audio'),
    webAudio: {
      audioContext: new AudioContext()
    }
  };

  Peaks.init(options, function(err, peaks) {
    if (err) {
      console.error(`Failed to initialize Peaks instance: ${err.message}`);
      return;
    }
  });
})(peaks);
</script>

生成波形数据
Peaks.js 通过处理音频来生成波形数据来创建音频波形可视化，开发者可以通过两种方式执行此操作：

使用 audiowaveform 预先计算音频的波形数据，并将数据从 Web 服务器提供给 Peaks.js
使用 Web Audio API 在浏览器中计算波形数据
使用 Web Audio API 可以很好地处理短音频文件，但需要将整个音频文件下载到浏览器，并且会占用 CPU 资源。 对于较长的音频文件，预计算波形数据更合适，因为它可以节省用户的带宽并允许更快地渲染波形。

Peaks.js 可以使用 Web Audio API 生成波形，这意味着开发者不必事先预先计算波形数据文件。

要使用 Web Audio，请省略 dataUri 选项，而是传递包含 AudioContext 实例的 webAudio 对象，当然浏览器必须支持 Web Audio API。

import Peaks from 'peaks.js';
const audioContext = new AudioContext();
const options = {
  zoomview: {
    container: document.getElementById('zoomview-container'),
  },
  overview: {
    container: document.getElementById('overview-container'),
  },
  mediaElement: document.getElementById('audio'),
  webAudio: {
    audioContext: audioContext,
    scale: 128,
    multiChannel: false,
  },
};

Peaks.init(options, function (err, peaks) {
  // Do something when the waveform is displayed and ready, or handle errors
});

更多关于 Peaks.js 的内容可以参考文末的资料，本文不再过多展开。

参考资料
https://github.com/bbc/peaks.js

https://waveform.prototyping.bbc.co.uk/

https://qiita.com/rxoxixyxd/items/ff0c44745db834123922

https://codesandbox.io/p/sandbox/wavesurfer-react-app-0kvem