vue怎么使用wavesurfer.js解决音频可视化播放问题

这篇文章主要介绍“Vue怎么使用wavesurfer.js解决音频可视化播放问题”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue怎么使用wavesurfer.js解决音频可视化播放问题”文章能帮助大家解决问题。

效果图如下所示：

1.安装wavesurfer

npm install wavesurfer.js

2.在页面导入

import WaveSurfer from 'wavesurfer.js'

注:我没有使用时间轴，所以没有引入，如果需要再引入

import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js'

3.上源码

<template>  <el-row>    <el-card class="card" :body->      <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/

我用到了几个方法：

1.

this.wavesurfer.play(0, 212); 指定开始时间和结束时间，以秒为单位，0秒开始，212秒结束

2.

this.wavesurfer.on("pause", () => {console.log('我暂停了')});

监听暂停

3.

this.wavesurfer.load(require("../mp3/living.mp3")); 读取目录路径里面的Mp3文件，可以测试用this.wavesurfer.load('xxx.mp3')); 读取网络地址，有接口就用这个

关于“vue怎么使用wavesurfer.js解决音频可视化播放问题”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。