更新记录

0.1.2（2026-07-17） 下载此版本

• 删除冗余代码

0.1.1（2026-07-17） 下载此版本

• 首次发版

平台兼容性

uni-app(5.12)

LongPressRecord

LongPressRecord 是一个面向微信小程序的 uni_modules 长按语音识别组件，适合用于工单描述、问诊输入、客服备注、表单语音录入等场景。

组件已封装以下能力：

• 长按开始录音，松开结束录音
• 支持 v-model / modelValue 双向绑定文本
• 支持录音回放
• 支持接入 WebSocket 流式语音识别服务并实时回填文本
• 未配置识别服务时自动降级为仅录音模式
• 支持 camelCase 与 kebab-case 两套事件监听方式

平台兼容性

当前版本仅支持微信小程序。

目录结构

uni_modules/long-recoder/
├─ components/
│  └─ long-press-record/
│     ├─ long-press-record.vue
│     └─ longPressRecordCore.js
├─ changelog.md
├─ package.json
└─ README.md

快速开始

组件遵循 easycom 规范，安装到 uni_modules 后可直接在页面中使用。

<template>
    <view>
        <long-press-record
            v-model="form.content"
            theme-color="#e56b2f"
            :max-duration="60000"
            :max-text-length="200"
            :enable-volc-asr="enableVolcAsr"
            :volc-config="volcConfig"
            placeholder="请输入文字，或长按语音录入内容"
            @record-complete="handleRecordComplete"
            @voice-path-change="handleVoicePathChange"
        />
    </view>
</template>

<script>
export default {
    data() {
        return {
            enableVolcAsr: true,
            form: {
                content: ''
            },
            voicePath: '',
            volcConfig: {
                appKey: '你的 appKey',
                accessKey: '你的 accessKey',
                resourceId: 'volc.seedasr.sauc.duration',
                url: 'wss://openspeech.bytedance.com/api/v3/sauc/bigmodel_async',
                request: {
                    model_name: 'bigmodel',
                    enable_punc: true,
                    enable_itn: true,
                    enable_nonstream: true,
                    end_window_size: 800,
                    enable_ddc: true,
                    result_type: 'full'
                }
            }
        }
    },
    methods: {
        handleRecordComplete(result) {
            this.form.content = result.text
            this.voicePath = result.voicePath
        },
        handleVoicePathChange(voicePath) {
            this.voicePath = voicePath
        }
    }
}
</script>

演示页

仓库内已提供演示页：pages/indexTwo/indexTwo.vue

演示页特性：

• 支持切换“仅录音 / 语音识别”两种模式
• 自动读取 uni.setStorageSync('huoshan_config', ...) 保存过的识别配置
• 显示录音路径、识别结果和事件回显，便于联调

本地缓存配置示例：

Props

volcConfig 结构

{
    appKey: '',
    accessKey: '',
    resourceId: 'volc.seedasr.sauc.duration',
    url: 'wss://openspeech.bytedance.com/api/v3/sauc/bigmodel_async',
    headers: {},
    request: {
        model_name: 'bigmodel',
        enable_punc: true,
        enable_itn: true,
        enable_nonstream: true,
        end_window_size: 800,
        enable_ddc: true,
        result_type: 'full'
    }
}

说明：

• 当 enableVolcAsr = true 但 appKey、accessKey、url 不完整时，组件会自动退回为仅录音模式
• themeColor 当前支持十六进制颜色值，例如 #1fa27c、#e56b2f

事件

推荐在模板中使用 kebab-case 监听；组件内部同时兼容 camelCase 与 kebab-case。

record-start 返回结构：

{
    usedVolcAsr: true,
    maxDuration: 60000
}

record-stop 返回结构：

{
    voicePath: '',
    rawVoicePath: '',
    usedVolcAsr: true,
    duration: 3200
}

record-complete 返回结构：

{
    voicePath: '',
    rawVoicePath: '',
    text: '',
    logId: '',
    usedVolcAsr: true
}

注意事项

• 组件内部会主动申请微信小程序录音权限，但业务项目仍需在微信开发者工具和小程序后台确认相关能力配置
• 当前识别链路默认以 WebSocket 流式接口为例，如果你的服务协议不同，可改造 longPressRecordCore.js 中的 connectSocket 与数据收发逻辑
• 若只需要录音文件，不需要实时转文字，建议将 enableVolcAsr 设为 false

更新记录

详细更新请查看 changelog.md