时间戳

首页 > 解决方案 > Wavesurfer.js 不适用于 Vue 组件

javascript - Wavesurfer.js 不适用于 Vue 组件

问题描述

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

播放器.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);
    }
  }

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

标签： javascriptvue.jswavesurfer.js

解决方案

文件路径有问题。在我尝试使用外部 mp3 歌曲后，它工作正常。

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

推荐阅读