Javascript Wavesurfer.js不'；无法使用Vue组件

我想使用wavesurfer.js制作一个可视音频播放器组件。但它不适用于Vue

Player.vue:

<template>
  <div><div id="wave"></div></div>
</template>

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

  export default {
    name: "Player",
    mounted() {
      this.wavesurfer = WaveSurfer.create({
        container: "#wave"
      });
      this.wavesurfer.load("../media/song.mp3");
      this.wavesurfer.on("ready", function() {
        this.wavesurfer.play();
      });
    }
  };
</script>

---

但它没有捕捉到任何错误。控制台与以前相同。

文件路径错误。在我尝试了一首外置mp3歌曲后，它工作正常

this.wavesurfer.load("http://localhost:3000/public/song.mp3");

---

您确定这行代码“this.wavesurfer.load（“../media/song.mp3”）；”有效吗？如果您尝试使用外置mp3歌曲，是否有效？我测试了你的代码，它正在工作。你能发布完整的错误异常吗。用try…catch来做这个。我的猜测是找不到mp3文件。文件路径错误。我试图像这样捕获异常，但它没有捕获任何错误mounted（）{try{this.wavesurfer=wavesurfer.create（{container:#wave“}）；this.wavesurfer.load（../media/song.mp3”）；this.wavesurfer.on（“ready”，function（）{this.wavesurfer.play（）}）}catch（错误）{console.log（错误）}”“我还认为文件路径有问题。

this.wavesurfer.load("http://localhost:3000/public/song.mp3");