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实现广告栏上下滚动效果
Nov 26 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
关于vue-router-link选择样式设置
Apr 30 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去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
python实现flappy bird小游戏
2018/12/24 Python
python write无法写入文件的解决方法
2019/01/23 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
《山谷中的谜底》教学反思
2014/04/26 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
给客户的感谢信
2015/01/21 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL
浅谈Python数学建模之数据导入
2021/06/23 Python
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript