我想使用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);
}
}
但它没有发现任何错误。控制台和以前一样。