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开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
php中Smarty模板初体验
2011/08/08 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
javascript静态的url如何传递
2007/05/03 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
python的else子句使用指南
2016/02/27 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
美国性感内衣店:Yandy
2018/06/12 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
技术总监岗位职责
2013/12/05 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
ktv筹备计划书
2014/05/03 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
党支部三会一课计划
2014/09/24 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
创业计划书之干洗店
2019/09/10 职场文书