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");