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


Posted in Vue.js onApril 04, 2022

之前给大家介绍过vue中音频wavesurfer.js的使用方法,感兴趣的朋友可以点击查看,今天继续给大家普及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-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;
  /* min-height: calc(100vh - 84px); */
}
.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音频可视化播放内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
vue中div禁止点击事件的实现
Apr 02 #Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 #Vue.js
Vue+TypeScript中处理computed方式
Apr 02 #Vue.js
Vue+Flask实现图片传输功能
Apr 01 #Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 #Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 #Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 #Vue.js
You might like
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
PHP实现动态web服务器方法
2015/07/29 PHP
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
python单例模式实例分析
2015/04/08 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
python对excel文档去重及求和的实例
2018/04/18 Python
基于python实现KNN分类算法
2020/04/23 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
浅析Python 责任链设计模式
2020/09/11 Python
python中K-means算法基础知识点
2021/01/25 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
德国购买门票网站:ADticket.de
2019/10/31 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
公务员职务工作的自我评价
2013/11/01 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
优秀员工自荐书
2013/12/19 职场文书
生物制药专业求职信
2014/03/11 职场文书
汇源肾宝广告词
2014/03/20 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书