更新记录

1.0.8(2022-10-24)

修复小程序平台报错

1.0.7(2022-10-14)

修改获取权限时机

1.修改获取权限时机,避免由于未获得权限导致首次长按时无法取消录音; 2.优化APP端提示文案(APP端触发longpress事件后,如果手指没有任何移动,则此时松手无法监听到touchEnd事件,小程序端无此问题)

1.0.6(2022-09-26)

优化震动反馈

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问