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 elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 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中文字符串截取方法实例总结
2014/09/30 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
php session 写入数据库
2016/02/13 PHP
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
Python3模拟登录操作实例分析
2019/03/12 Python
详解Python3定时器任务代码
2019/09/23 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
django修改models重建数据库的操作
2020/03/31 Python
什么是Python中的顺序表
2020/06/02 Python
keras输出预测值和真实值方式
2020/06/27 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
应届生幼儿园求职信
2013/11/12 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
大学生村官承诺书
2014/03/28 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
MySQL中order by的执行过程
2022/06/05 MySQL