如何将本地音频文件加载到 Wavesurfer.js 中？壮举 Vue.js

问题描述

我想加载本地 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"
},

解决方法

尝试使用引用：

<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>