如何解决如何将本地音频文件加载到 Wavesurfer.js 中?壮举 Vue.js
我想加载本地 mp3 文件。
我的项目创建 vue cli
我可以在浏览器中看到 wave 标签,但无法显示 mp3 文件。
我的项目目录
[在此处输入图片描述][1] [1]:https://i.stack.imgur.com/2zizN.png
<template>
<div id="app">
<div id="waveform"></div>
</div>
</template>
<script>
import WaveSurfer from 'wavesurfer.js';
export default {
name: 'App',data() {
return {
}
},mounted () {
this.$nextTick(() => {
this.wavesurfer = WaveSurfer.create({
container: '#waveform',waveColor: 'violet',progressColor: 'purple'
})
this.wavesurfer.load('@/mp3/sample.mp3');
})
},}
</script>
<style></style>
package.json
"dependencies": {
"core-js": "^3.6.5","vue": "^2.6.11","wavesurfer.js": "^4.6.0"
},
解决方法
尝试使用引用:
<template>
<div id="app">
<div ref="waveform"></div>
</div>
</template>
<script>
import WaveSurfer from 'wavesurfer.js'
export default {
name: 'App',data () {
return {
wavesurfer: null
}
},mounted () {
this.wavesurfer = WaveSurfer.create({
container: this.$refs.waveform,waveColor: 'violet',progressColor: 'purple'
})
this.wavesurfer.load('@/mp3/sample.mp3')
},}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。