Wavesurfer.js不适用于Vue组件

Question

我想使用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>

控制台上有一条错误消息：

​

​

在页面中呈现一个空白区域：

​

​

我试着抓住这样的错误。

  mounted() {
    try {
      this.wavesurfer = WaveSurfer.create({
        container: "#wave"
      });
      this.wavesurfer.load("../media/song .ogg");
      this.wavesurfer.on("ready", function() {
        this.wavesurfer.play();
      });
    } catch (error) {
      console.log(error);
    }
  }

但它没有发现任何错误。控制台和以前一样。

Answer 1

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

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