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 03 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
详解Vue的options
May 15 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 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
PHP 常见郁闷问题答解
2006/11/25 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
php防止sql注入简单分析
2015/03/18 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
用JQUERY增删元素的代码
2012/02/14 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
wxPython:python首选的GUI库实例分享
2019/10/05 Python
美国校园市场:OCM
2017/06/08 全球购物
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
行政总监岗位职责
2013/12/05 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
银行求职自荐书
2014/06/25 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
2014年度考核工作总结
2014/12/24 职场文书
离婚起诉状范本
2015/05/19 职场文书
抢劫罪辩护词
2015/05/21 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
Java8中Stream的一些神操作
2021/11/02 Java/Android