uni —app 录音_uniapp如何实现录音功能
uniapp实现录音功能的方法：使用函数【uni.getRecorderManager()】实现，代码为【methods: {startRecord() {console.log('开始录音');this.recorderManager】。
本教程操作环境：windows7系统、uni-app2.5.1版本，该方法适用于所有品牌电脑。
推荐(免费)：
uniapp实现录音功能的方法：
这里就需要用到uni.getRecorderManager()export default {
data: {
recorderManager: {},
innerAudioContext: {},
},
onLoad(options) {
this.recorderManager = uni.getRecorderManager();
this.innerAudioContext = uni.createInnerAudioContext();
// 为了防止苹果手机静音无法播放
uni.setInnerAudioOption({
obeyMuteSwitch: false
})
this.innerAudioContext.autoplay = true;
console.log("uni.getRecorderManager()",uni.getRecorderManager())
let self = this;
this.recorderManager.onStop(function (res) {
console.log('recorder stop' + JSON.stringify(res));
self.voicePath = res.tempFilePath;
});
},
methods: {
startRecord() {
console.log('开始录音');
this.recorderManager.start();
},
endRecord() {
console.log('录音结束');
this.recorderManager.stop();
},
playVoice() {
console.log('播放录音');
console.log('this.voicePath',this.voicePath);
if (this.voicePath) {
this.innerAudioContext.src = this.voicePath;
this.innerAudioContext.play();
}
},
}
}
这一段是苹果手机静音时无法播放uni.setInnerAudioOption({
obeyMuteSwitch: false
})
这里录音展示是使用了插件luno-audio，
需要引入import luchAudio from '@/components/luch-audio/luch-audio.vue'、注册(在components内注册即可)并使用
开始录音
停止录音
播放录音
v-if="audioContent"
:src="audioContent"
:play.sync="audioPlayNew"
>
添加后运行即可。相关免费学习推荐：
uni —app 录音_uniapp如何实现录音功能相关推荐
- uni —app 录音_uni-app 录音（十六）
uni.getRecorderManager() 获取全局唯一的录音管理器 recorderManager. 平台支持 小程序 5+APP recorderManager 对象的方法列表 方法 参数 ...
- uni —app 录音_uni-app的音频录音和播放问题
开始录音 停止录音 播放录音 var recorderManager = uni.getRecorderManager(); var innerAudioContext = uni.createInn ...
- uni app 录音结束监听_全新重构，uni-app实现微信端性能翻倍
多次论证.数月研发,我们重写部分Vue底层.重构uni-app框架,实现了微信端性能翻倍及更多Vue语法支持. 背景 uni-app在初期借鉴了mpvue,实现了微信小程序端的快速兼容,感谢美团点评团 ...
- HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
- 切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言 本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
- uni app map 地图 漂浮问题及方案
uni app map 地图 漂浮问题及方案 文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
- uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
- uni app中使用图表
关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
- uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
- HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
最新文章
- Visual C++ 2011-8-15
- linux将字符串转小写_Python教程第10讲：字符串的使用
- Fabric核心模块之Peer解析
- java linux 调用32位so_Linux上TCP的几个内核参数调优
- c语言更改编译时字体,c习题编译时出现空的字符常量，怎么修改？
- 如何给U盘设置一张妖娆又骚气的图标
- 系统之家win11最新旗舰版64位镜像v2021.07
- jquery选择器之属性选择器
- 【华为云技术分享】云小课 | 购买的数据盘在服务器看不到？磁盘初始化很重要！
- 04Linux与Unix的关系
- Trees on the level UVA - 122 (二叉树的层次遍历）
- GDAL中MEM格式的简单使用示例
- 列表页 编辑页 删除页
- 块层介绍 第一篇: bio层
- SylixOS armv8 任务切换
- 智能门锁主要有哪些优势，具体是怎么分类的？
- 在王者荣耀角度下分析面向对象程序设计B中23种设计模式之享元模式
- [原创][Java]一个简单高效的线程安全队列的JAVA实现
- 数字转换成中文汉字数字
- element的table组件，表头合并(合并表头单元格)