最近在做一个演出时播放音乐的软件
尽管这种软件有破解的也有付费的，但是各种软件不同的优点就是不能集合在一个软件上。那就自己写一个呗～

半成品

导火索

这个软件最开始设计时并没有打算加入波形显示的功能，只是做一个播放进度
这个期间和回形针的前端工程师小哥哥聊了聊，并且看了他的播放器网页以后突然觉得我也应该把我的软件做的不那么“工业”，应该精致一点
于是重新设计了界面，并且也设计了波形展示的元素

WaveSurfer.js

WaveSurfer.js 是一个基于 JavaScript 的音频可视化库，主要使用 Web Audio 和 HTML5 Canvas 技术。如果浏览器不支持的话就不能使用了
使用 WaveSurfer.js 就可以方便并且优雅的在你的网页区域里绘制音频波形了

使用方法

安装

首先是安装，在 npm 上就可以安装

npm install wavesurfer.js --save-dev

挂载到页面

不需要全局注册，只需要在使用到它的组件里引用

import WaveSurfer from 'wavesurfer.js'

然后在渲染部分创建一个容器，并且设置一个 ref

<div class="player" ref="wavesurfer"></div>

然后在页面挂载时渲染

const options = {
  container: this.$refs.waveform,
  height: 30,
  barWidth: 2,
  barHeight: 1,
  barGap: 1,
  barRadius: 2,
  waveColor: '#808695',
  progressColor: '#19be6b',
  backend: 'MediaElement',
  mediaControls: false,
  audioRate: '1'
}

const wavesurfer = WaveSurfer.create(options)
// 可以挂载到 Vue 的 data 上
// this.wavesurfer = wavesurfer
// 或者 React 的 state 上
// this.setState({ wavesurfer })

以上 options 可以参考官方文档，说的还是比较详细的。英文文档看不懂的话，也可以直接用 Chrome 浏览器的翻译，还是可以理解的

载入音频文件

WaveSurfer 实际上可以理解成一个播放器
所以你不需要其他的播放器来播放音频
建议你使用 fs 来读取文件，再转换成 blob 对象
使用 WaveSurfer 实例的 .load() 方法加载文件到波形上

// 读取文件
const buf = fs.readFileSync(this.current.file)
const uint8Buffer = Uint8Array.from(buf)
const blob = new Blob([uint8Buffer])
wavesurfer.load(window.URL.createObjectURL(blob))

踩坑记录

唯一的 WaveSurfer 实例

如果组件中设计只有一个 WaveSurfer 实例，则需要在每次 create 前先销毁前一个可能存在的实例（不要问我 && 操作符是干啥用的）

wavesurfer && wavesurfer.destroy()

在 Electron 中报 AbortController is not defined 错

AbortController 是 WebAPI 中的一个接口，表示一个控制器对象，允许你根据需要中止一个或多个 Web请求。在有些浏览器（例如夸克）中是不支持的，而在 WaveSurfer 中被使用了
在 Electron 中似乎也不支持，需要安装一个 abortcontroller-polyfill 依赖

npm install abortcontroller-polyfill --save

并且在使用 WaveSurfer 的组件中引入即可

require('abortcontroller-polyfill/dist/polyfill-patch-fetch')