vue使用wavesurfer.js解决音频可视化播放问题
短信预约 -IT技能 免费直播动态提醒
之前给大家介绍过vue中音频wavesurfer.js的使用方法，感兴趣的朋友可以点击查看，今天继续给大家普及vue解决音频可视化播放，使用wavesurfer.js问题，效果图如下所示：
上效果：
1.安装wavesurfer
npm install wavesurfer.js2.在页面导入
import WaveSurfer from 'wavesurfer.js'注:我没有使用时间轴，所以没有引入，如果需要再引入
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js'3.上源码
<template>
<el-row>
<el-card class="card" :body-style="{ padding: '10px' }">
<div id="waveform" ref="waveform">
</div>
</el-card>
</el-row>
<div>
<el-button type="primary" @click="playMusic">
<i class="el-icon-video-play"></i>
播放 /
<i class="el-icon-video-pausee"></i>
暂停
</el-button>
</template>
<script>
import WaveSurfer from "wavesurfer.js";
// import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";
export default {
name: "Details",
data() {
return {
wavesurfer: null,
};
},
mounted() {
this.$nextTick(() => {
this.wavesurfer = WaveSurfer.create({
container: this.$refs.waveform,
// waveColor: '#409EFF',
barWidth: 1,
cursorColor: "black",
progressColor: "blue",
backend: "MediaElement",
// mediaControls: false,
audioRate: "1",
//使用时间轴插件
});
// 特别提醒：此处需要使用require(相对路径)，否则会报错
this.wavesurfer.load(require("../mp3/living.mp3"));
});
methods: {
playMusic() {
//"播放/暂停"按钮的单击触发事件，暂停的话单击则播放，正在播放的话单击则暂停播放
this.wavesurfer.playPause.bind(this.wavesurfer)();
},
};
</script>
<style >
.mixin-components-container {
width: 100% !important;
#f0f2f5;
padding: 30px;
}
.el-card__body {
height: 70px !important;
padding: 0 auto !important;
.card {
height: 70px;
#waveform {
wave {
height: 50px !important;
</style>4.注释：
这个插件实在太吊了，官方文档太厉害，上链接：https://wavesurfer-js.org/
我用到了几个方法：
4.1.
this.wavesurfer.play(0, 212); 指定开始时间和结束时间，以秒为单位，0秒开始，212秒结束4.2.
this.wavesurfer.on("pause", () => {
console.log('我暂停了')
});监听暂停
4.3.
this.wavesurfer.load(require("../mp3/living.mp3")); 读取目录路径里面的Mp3文件，可以测试用
this.wavesurfer.load('xxx.mp3')); 读取网络地址，有接口就用这个到此这篇关于vue使用wavesurfer.js解决音频可视化播放的文章就介绍到这了,更多相关vue音频可视化播放内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
