更新记录
1.0.8(2022-10-24)
下载此版本
修复小程序平台报错
1.0.7(2022-10-14)
下载此版本
修改获取权限时机
1.修改获取权限时机,避免由于未获得权限导致首次长按时无法取消录音;
2.优化APP端提示文案(APP端触发longpress事件后,如果手指没有任何移动,则此时松手无法监听到touchEnd事件,小程序端无此问题)
1.0.6(2022-09-26)
下载此版本
优化震动反馈
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
nbVoiceRecord概述
- 这是个基于uni-app 符合uni_modules 的插件
- 无任何依赖、纯css动画
- nb是NeverBug的意思
主要功能
- 长按组件后弹出录音弹窗,松手完成录音,手指向上滑动可取消;
- 支持各种自定义,如弹窗高度、宽度、各处文字甚至声纹波形的尺寸和颜色;
- 已完成多端适配,自动根据授权情况提示完成授权、已获得授权才开始录音
- endRecord回调事件附带录音文件
动画预览
基本用法:
<template>
<view>
<nb-voice-record @startRecord="start" @endRecord="end" @cancelRecord="cancel"></nb-voice-record>
</view>
</template>
<script>
methods: {
start() {
// 开始录音
},
end(event) {
// 结束录音并处理得到的录音文件
// event中,app端仅有tempFilePath字段,微信小程序还有duration和fileSize两个字段
},
cancel() {
// 用户取消录音
}
}
</script>
全部支持参数
参数名 |
类型 |
默认值 |
作用 |
注意事项 |
recordOptions |
Object |
{duration:60000} |
录音配置 |
各端支持情况不同,请自行查看官方说明 |
btnStyle |
Object |
请查看源码 |
按钮样式 |
对象格式 |
btnHoverFontcolor |
String |
#000 |
按钮长按时文字颜色 |
|
btnHoverBgcolor |
String |
whitesmoke |
按钮长按时背景颜色 |
|
btnDefaultText |
String |
长按开始录音 |
初始按钮文字 |
|
btnRecordingText |
String |
录音中 |
录制时按钮文字 |
|
vibrate |
Boolean |
true |
震动反馈 |
弹窗、滑动取消时 |
popupTitle |
String |
正在录制音频 |
弹窗顶部文字 |
|
popupDefaultTips |
String |
松手完成录音 |
录制时弹窗底部提示 |
|
popupCancelTips |
String |
松手取消录音 |
滑动取消时弹窗底部提示 |
|
popupMaxWidth |
Number |
600 |
弹窗展开后宽度 |
注意这里几个单位都是rpx |
popupMaxHeight |
Number |
300 |
弹窗展开后高度 |
|
popupFixBottom |
Number |
200 |
弹窗展开后距底部高度 |
|
popupBgColor |
String |
whitesmoke |
弹窗背景颜色 |
|
lineHeight |
Number |
50 |
声波高度 |
|
lineStartColor |
String |
royalblue |
声波波谷时颜色色值 |
色值或者颜色名均可 |
lineEndColor |
String |
indianred |
声波波峰时颜色色值 |
|
作者其他插件
一个有趣的社区
联系作者
- QQ:123060128
- Email:karma.zhao@gmail.com
- 官网:https://brand.neverbug.cn