vue里实现页面录音功能
vue里实现页面录音功能
经过项目实践总结到两个比较好用的录音依赖，是前辈已经封装好的。以下是两个依赖的链接(会说明两个的区别，可以选择适合自己的)
录音依赖1 网址 https://github.com/2fps/recorder
依赖1在线demo 网址 https://recorder.zhuyuntao.cn/
录音依赖2 网址 https://github.com/xiangyuecn/Recorder
依赖2在线demo网址 https://xiangyuecn.github.io/Recorder/
依赖1 README.md文件里面有比较详细的描述，包括封装的各种方法以及会用到的数据。
录音之后是wav格式的，我们知道wav格式的文件会比较大，同样的这个依赖录音之后的wav格式会使存放数据的blob对象size特别大。
依赖2 README.md里有使用方法，但是不太好用，可以使用的方法没有依赖1多。录音之后的数据直接是mp3格式的，size比较小
以上之所以强调了一下size的问题是我的项目里需要将录音数据传给后台，后台要处理，时间过长暂且不说，数据过大会出现413错误。
先说一下我的需求，然后再说一下我的选择。
因为需要有停止播放按钮，但是依赖2没有停止播放的方法，所以我选择了依赖1。
按照readme完全可以使用。(其实看readme.md就可以看出来依赖1非常简洁好用，很有条理)有什么问题留言一起交流。
项目完结之后我总结了一下，因为当时wav转mp3的时候用了很长的时间，我觉得如果直接选择依赖2可能会好一点。于是我在想是不是可以自己封装一个停止播放按钮。但是有一个发现让我觉得可能不用，因为H5的audio标签原来只有一个播放条和一个暂停按钮，然后很久之后再用audio标签发现后面多了一个可以点击的，点击之后发现是可以下载这个audio。于是去查了查audio标签，发现有很多H5就有的方法。
这个是暂停的方法，但是我的项目里的播放按钮是为了让用户之后自己有没有录到声音，不严格的话其实用户不想继续听暂停也是一样的效果，其实这个在我的项目里就可以用了。
有时间可以尝试一下。
vue里实现页面录音功能相关推荐
- vue里页面的缓存详解
关于vue里页面的缓存详解 实用的例子ABC 往下查看 keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 在keep-alive标签内部添加 i ...
- 工作160:总结VUE几种页面刷新方法
有时候在页面里做了某些操作以后,需要页面刷新一下来重新获取数据.试了几种方法,以下总结: 1.this.$router.go(0) 这种方法页面会一瞬间的白屏,体验不是很好,虽然只是一行代码的事 2. ...
- vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏
vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...
- vue实现不同页面显示不同标题
我们需要在vue里不同的页面实现不同的标题, 可以利用路由的meta标签和路由守卫来实现 // index.jsimport Vue from 'vue'import Router from 'vue ...
- vue数据更新，页面不更新
vue数据更新,页面不更新.反正百度看了两页还是没解决.vue单页面应用,改变data里整个数组.而且是请求接口后改变.点击事件:需要页面的值请求到新数组处理后就变化.花了够两个小时,实在没辙了,我自 ...
- Vue 里，多级菜单要如何设计才显得专业？
老生常谈了! 虽然我们是 Java 猿,但是写起来前端代码也不含糊!今天我想来和大家聊聊这个前端的动态菜单,要如何设计才显得专业!还是以我们的 TienChin 项目为例,大家一起来看看. 先来一张截 ...
- Vue的使用 -- 基于Vue搭建前端页面
Vue的使用 – 基于Vue搭建前端页面 首先,用到的前端技术只有 Vue.Element-ui.axios.Echarts,至于其它的技术点,我一个后端很少接触. 其次,Echarts 我也不怎么会 ...
- Vue里如何实现excel转json的功能
前言: 因为做微信小程序云开发,在云开发导入数据需要json格式的,然鹅我们市场部的小姐姐给我的文档是excel文件,导致我需要去手动录入,后来在网上搜了下. 有通过复制excel文件内容粘贴后生成的 ...
- vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
最新文章
- 让页面先发送ajax,Ajax, 了解一下
- lucene升级至5.x版本出现 ：IllegalStateException: IllegalStateException: unexpected docvalues type NONE...
- linux tips 技巧笔记一
- (七)准备在云中训练深度伪造模型
- 12306一直提示网络有问题_春运攻略：西安网友买票遇到的这些问题，这里有答案...
- cisco ADSL配置
- Robust.ai 获得 1500 万美元融资，嘴炮 Gary Marcus 也难逃真香定律
- [转载] python radians函数_Python numpy.radians() 使用实例
- python 类 super_python的类的super（）
- 《程序开发心理学——银年纪念版》前言
- ATL之深入浅出书评(转)
- 【转】如何向App Sotre提交应用
- android格式化sd卡软件,SD/TF卡格式化程序
- Windows Audio无法启动 错误 0x80070005:拒绝访问
- 基于STM32f407的TSL2561模块的使用
- android studio 跳转后保留原页面数据_这些技巧和习惯，让你的原生 Android 手机更好用（上篇）...
- 华为服务器批量系统软件,华为云ECS批量管理工具
- android线程改变布局,震惊！Android子线程也能修改UI？(第二篇)
- java健康检查代码_SpringBoot实现项目健康检查与监控
- win2003 IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAd