vue中音频wavesurfer.js如何加载静态文件和接口返回文件_wavesurfer.backend is undefined

1、安装wavesurfer

npm install wavesurfer.js
1

2、在页面导入

import WaveSurfer from "wavesurfer.js"
//注:由于我使用了光标，所以引入了光标插件，具体根据需要自行引入
import CursorPlugin from "wavesurfer.js/dist/plugin/wavesurfer.cursor.js";
1
2
3

3、创建wavesurfer

   createWaveSurfer(blob){
    this.$nextTick(() => {    
      this.wavesurfer = WaveSurfer.create({
        // 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。
        container: this.$refs.waveform,
        // 光标的填充颜色，指示播放头的位置。
        cursorColor: "red",
        // 更改波形容器的背景颜色。
        backgroundColor: "transparent",
        // 光标后的波形填充颜色。
        waveColor: ["rgba(120, 130, 150, 0.25)"],
        height:'64',
        barWidth:2,
        barGap:4,
        // 光标后面的波形部分的填充色 (注：我这里使用的是渐变色，具体可参考官方文档 https://wavesurfer-js.org/example/gradient-fill-styles/index.html)
        progressColor: ["#8A27A3", "#725FBC", "#5F9BBC", "#14C3CE" ," #5F9BBC", "#725FBC","#8927A3"],
        backend: "MediaElement",
        // 音频播放时间轴
        mediaControls: false,
        // 播放音频的速度
        audioRate: "1",
        // 配置光标插件
        plugins: [
          // 光标插件
          CursorPlugin.create({
            showTime: true,
            opacity: 1,
            customShowTimeStyle: {
              "background-color": "#000",
              color: "#fff",
              padding: "2px",
              "font-size": "10px",
            },
          }),
        ],
      });    
      //三种加载音频方法
      // 1、特别提醒：此处需要使用require(相对路径)，否则会报错，可测试用读取本地音频文件
      this.wavesurfer.load(require("../mp3/test.mp3"));
      // 2、读取网络地址，接口返回链接地址可使用此方法
      this.wavesurfer.load("xxx.mp3")); 
      // 3、(接下面第四步) 接口返回文件流，将文件流转化为blob，再将blob转换为URL
      //可参考 https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
      const objectURL = URL.createObjectURL(blob)
      this.wavesurfer.load(objectURL);
      });
   },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

4、获取接口返回文件（注：我这边接口返回的是文件流）

  getSoundRecord() {
 	  let url = process.env.VUE_APP_BASE_API + '/common-api/getSoundRecord';
      const obj = await axios({
        method: "get",
        url:url,
        params:{
          callId:'302204121408075700002',
        },
        headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        'Authorization':sessionStorage.getItem('token')
        },
        responseType: "blob"
      }).then(res => {
        // 文件字符内容转变成blob地址
        let blob = new Blob([res.data]);
        //获取到blob后，调用创建方法回传blob
        this.createWaveSurfer(blob)
      })      
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

5、在mounted调用方法，一进入页面就可以加载音频

 mounted() {  
    this.getSoundRecord()
  },
1
2
3

以上就是wavesurfer.js播放音频文件方法，其他功能可具体参考 wavesurfer.js接口文档