wavesurfer.js播放pcm音频

前言

wavesurfer.js 是一个音频可视化插件，这里是一篇使用方式。
但wavesurfer.js不可直接load格式为pcm的音频文件。参考js转化pcm到wav格式与播放，wav格式实质在pcm格式前面加上44字节的文件头。这里加上文件头后由wavesurfer.js插件进行播放。

1.HTML

<!-- 时间线容器 -->
<div id="timeline" ref="timeline" />
<!-- 音频容器 -->
<div id="waveform" ref="waveform" />
<!-- 选择文件按钮 -->
<input type="file"  @change="addFile($event)" ref="file">

2. js

script标签里的内容

2.1 import

import WaveSurfer from 'wavesurfer.js'
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline'//Timeline插件
import Region from 'wavesurfer.js/dist/plugin/wavesurfer.regions'//regions插件

2.2 data

data () {
   
  return {
   
    url: '@/assets/music/ring.pcm',   //wavesurfer加载的文件路径
    wavesurfer: '',
    speed: 1,   //播放速度
  }
}

2.3 mounted

mounted () {
   
  this.wavesurfer = WaveSurfer.create({
   
    container: this.$refs.waveform,//绑定容器，第一种方法
    // container: document.querySelector('#waveform'),//第二种方法
    // container: '#waveform',//第三种方法
    audioRate: this.speed,//控制播放速度
    forceDecode: true,   
    waveColor: '#A8DBA8',
    progressColor: '#3B8686',
    backend: 'MediaElement',
    plugins: [
      Timeline.create({
   
        container: '#timeline',