vue中音频wavesurfer.js的使用方法


Posted in Vue.js onFebruary 20, 2020

本文为大家分享了vue中音频wavesurfer.js的使用方法,供大家参考,具体内容如下

效果图

vue中音频wavesurfer.js的使用方法

首先引入wavesurfer.js

vue中音频wavesurfer.js的使用方法

其次 封装 wavesurfer.js`

<template>
 <div class="waveformOuter">
 <div id="waveform" ref="waveform" />
 <div class="play" @click="playMusic">
  <svg-icon v-if="!isPlaying" icon-class="play" class="icon myplay" />
  <svg-icon v-else icon-class="stop" class="icon mystop" />
  <p>{{ time }}</p>
 </div>
  <!-- <p>{{ url }}</p> -->
 </div>
</template>
<script>
import WaveSurfer from '@/assets/js/wavesurfer'
export default {
 props: ['url', 'toStopMusic', 'loadWave'],
 data() {
 return {
  isPlaying: false,
  time: '00:00',
  wavesurfer: null,
 }
 },
 watch: {
 'loadWave': function() {
  this.loadMusic()
 },
 'url': function() {
  // return this.wavesurfer.getCurrentTime()
  this.loadMusic(true)
  console.log('url---------------------------------------')
 },
 'toStopMusic': function() {
  console.log('toStopMusic---------------------------------------')
  if (this.wavesurfer) {
  this.wavesurfer.pause()
  }
 }
 },
 mounted() {
 this.$nextTick(() => {
  if (this.loadWave) {
  console.log('haha')
  this.loadMusic()
  }
 })
 },
 methods: {
 itemClick(node) {
  console.log(node.model.id)
 },
 buZero(num) {
  return num > 9 ? num : '0' + num
 },
 loadMusic(bool) {
  console.log('this.WaveSurfer--------------------------------------', WaveSurfer)
  if (this.wavesurfer) {
  if (bool) {
   this.time = '00:00'
   this.wavesurfer.load(this.url)
  }
  } else {
  this.wavesurfer = WaveSurfer.create({
   container: this.$refs.waveform,
   waveColor: 'violet',
   progressColor: 'purple'
  })
  this.wavesurfer.load(this.url)
  this.wavesurfer.on('ready', () => {
   // this.wavesurfer.play()
  })
  this.wavesurfer.on('audioprocess', (e) => {
   const times = Math.floor(e)
   this.time = this.buZero(Math.floor(times / 60)) + ':' + this.buZero(times % 60)
  })
  this.wavesurfer.on('finish', () => {
   this.isPlaying = false
  })
  }
 },
 stopMusic(){
  if (this.wavesurfer) {
   this.wavesurfer.stop();
  }
 },
 playMusic() {
  console.log("开始")
  console.log(this.wavesurfer)
  console.log("点击开始播放按钮",this.url)
  if (this.wavesurfer) {
  if (this.wavesurfer.isPlaying()) {
   this.isPlaying = false
  debugger
   this.wavesurfer.pause()
  } else {
   this.isPlaying = true
   this.wavesurfer.play()
  }
  }
 }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.myplay{
 position: absolute;
 top: 50%;
 font-size: 17px;
 margin: -10px 0 0 -9px;
 left: 50%;
}
.mystop{
 position: absolute;
 top: 50%;
 margin: -15px 0 0 -18px;
 left: 50%;
 font-size: 25px;
}
#waveform{
 width: calc(100% - 150px);
 height:128px;
 float: left;
 margin-right: 22px;
 background: black;
}
.play{
 position: relative;
 width: 128px;
 height:128px;
 border-radius:3px;
 background-color:#EBEEF5;
 float: left;
 text-align: center;
}
.play p{
 margin-top: 85px;
 color: #3683FA;
}

.waveformOuter{
 margin-bottom: 20px;
 overflow: hidden;
}
</style>

再然后 在需要的组件中引入

<div class="luyin" v-if="this.isYinyin">
 <!-- {{this.isYinyin}} -->
 <my-wave-sufer ref="handleDialogClose" :url="luyinUrl" :load-wave="showDialog" :to-stop-music="!showDialog" />
</div>
isYinyin: false,//是否加载录音组件
showDialog: true, //是否初始化录音组件
luyinUrl: "", //录音url 
数据库录音格式 123.wav

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
详解Vue router路由
Nov 20 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
vue使用vant中的checkbox实现全选功能
Nov 17 #Vue.js
vue+vant实现购物车全选和反选功能
Nov 17 #Vue.js
在vue中通过render函数给子组件设置ref操作
Nov 17 #Vue.js
vue+iview分页组件的封装
Nov 17 #Vue.js
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 #Vue.js
vue+iview实现分页及查询功能
Nov 17 #Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 #Vue.js
You might like
解析PHP中ob_start()函数的用法
2013/06/24 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php中上传文件的的解决方案
2018/09/25 PHP
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
vue2配置scss的方法步骤
2019/06/06 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
浅谈JavaScript 声明提升
2020/09/14 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
pandas 时间格式转换的实现
2019/07/06 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
介绍一下#error预处理
2015/09/25 面试题
大学毕业登记表自我鉴定
2013/10/09 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
经典商业广告词
2014/03/13 职场文书
水知道答案观后感
2015/06/08 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS