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实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 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 什么是PEAR?(第三篇)
2009/03/19 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
alert和confirm功能介绍
2014/05/21 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
讲解Python中的递归函数
2015/04/27 Python
python排序方法实例分析
2015/04/30 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
pycharm安装及如何导入numpy
2020/04/03 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
导师评语大全
2014/04/26 职场文书
我的理想演讲稿
2014/04/30 职场文书
班级心理活动总结
2014/07/04 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
go goroutine 怎样进行错误处理
2021/07/16 Golang
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python
nginx 配置指令之location使用详解
2022/05/25 Servers
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android