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 element实现表格合并行数据
Nov 30 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
ant design vue的form表单取值方法
Jun 01 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和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
python的exec、eval使用分析
2017/12/11 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
小学教师岗位职责
2013/11/25 职场文书
挂职自我鉴定
2014/02/26 职场文书
逃课检讨书
2015/01/26 职场文书
小学校本教研总结
2015/08/13 职场文书
《落花生》教学反思
2016/02/16 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android