ipc-app/uni_modules/nb-voice-record/readme.md
2024-06-05 16:01:16 +08:00

4.2 KiB
Raw Permalink Blame History

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 声波波峰时颜色色值

作者其他插件

一个有趣的社区

联系作者