如何将本地音频文件加载到 Wavesurfer.js 中？（feat Vue.js）答案

【问题标题】：How to load a local audio file into Wavesurfer.js?(feat Vue.js)如何将本地音频文件加载到 Wavesurfer.js 中？（feat Vue.js）
【发布时间】：2021-04-05 06:17:56
【问题描述】：

我想加载本地 mp3 文件。
我的项目创建 vue cli
我可以在浏览器中看到 wave 标签，但不能显示 mp3 文件。

我的项目目录

[在此处输入图片描述][1] [1]：https://i.stack.imgur.com/2zizN.png

代码

<template>
  <div id="app">
    <div id="waveform"></div>
  </div>
</template>

<script>
import WaveSurfer from 'wavesurfer.js';

export default {
  name: 'App',
  data() {
    return {
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.wavesurfer = WaveSurfer.create({
          container: '#waveform',
          waveColor: 'violet',
          progressColor: 'purple'
      })
      this.wavesurfer.load('@/mp3/sample.mp3');
    })
  },
}
</script>

<style></style>

package.json

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "wavesurfer.js": "^4.6.0"
},

【问题讨论】：

标签： vue.js wavesurfer.js

【解决方案1】：

尝试使用引用：

<template>
  <div id="app">
    <div ref="waveform"></div>
  </div>
</template>

<script>
import WaveSurfer from 'wavesurfer.js'

export default {
  name: 'App',
  data () {
    return {
      wavesurfer: null
    }
  },
  mounted () {
    this.wavesurfer = WaveSurfer.create({
      container: this.$refs.waveform,
      waveColor: 'violet',
      progressColor: 'purple'
    })
    this.wavesurfer.load('@/mp3/sample.mp3')
  },
}
</script>

【讨论】：