更新记录

1.0.2（2026-01-03） 下载此版本

文档示例修改

1.0.1（2026-01-03） 下载此版本

修改了录音格式bug

1.0.0（2026-01-03） 下载此版本

1.0

平台兼容性

uni-app(3.6.16)

uni-app x(3.6.16)

audio-record

UniApp 录音转WAV音频组件说明文档

✨ 组件简介

一款适用于 UniApp/H5 环境的高性能录音组件，支持麦克风录音 → WebM转标准WAV（16000Hz/单声道/16bit）→ 音频播放 → 语音转文字全流程，可全局复用、灵活传参，核心返回WAV本地播放地址，完美适配音频上传、本地播放、后端语音识别等业务场景。

✅ 核心特性

• ✔️ 支持父组件传参配置（自定义录音时长、后端接口地址）；
• ✔️ 录音完成自动返回WAV播放地址、Base64编码，支持实时监听；
• ✔️ 内置音频格式强转，生成100%标准WAV音频，后端可直接识别；
• ✔️ 集成录音倒计时、播放验证、重置录音、语音识别功能；
• ✔️ 样式独立无污染，适配移动端/浏览器，支持自定义样式覆盖；
• ✔️ 完善的异常处理：麦克风权限校验、浏览器兼容校验、网络请求兜底。

⚙️ 组件属性（Props）

🎯 组件事件（Events）

组件通过自定义事件向父组件返回核心数据，父组件通过@事件名监听接收，核心唯一事件如下：

✅ @getAudioData 【核心事件】

触发时机

1. 录音完成、成功生成WAV音频时，实时触发；
2. 点击「语音转文字」完成识别后，更新触发；
3. 点击「重新录音」重置状态时，清空触发。

📸 组件效果预览

初始状态

📌 点击录音→靠近麦克风大声说话（保证识别率） 【按钮】开始录音(10秒)

录音中状态

✅ 正在录音【请大声说话】✅ 【倒计时】10 S → 0 S（超时自动停止） 【按钮】停止录音

录音完成状态

✅ 录音完成✅ | 可播放/转文字（已优化识别率） ✅ WAV音频生成成功（标准16K格式） 【按钮】重新录音、播放录音、语音转文字

🚀 使用示例（完整可运行）

提供2种常用使用方式，覆盖「基础调用」和「高级自定义」场景，直接复制即可在项目中运行。

示例1：基础使用（默认参数，核心接收WAV地址）

最简用法，使用组件默认配置，仅监听核心的WAV地址返回，满足90%业务需求。

<template>
  <view class="demo-page">
    <!-- 1. 引入录音组件，监听返回数据   2. :recordTime 设置录音结束时长-->
    <AudioRecordToWav 
      @getAudioData="handleAudioData" :recordTime="8"
    />

    <!-- ✅ 演示：使用组件返回的WAV地址播放音频 -->
    <view class="audio-preview" v-if="audioResult.wavUrl">
      <view class="title">🎧 WAV音频预览（组件返回）</view>
      <!-- 直接将wavUrl赋值给audio标签，实现播放 -->
      <audio :src="audioResult.wavUrl" controls style="width: 100%; margin-top: 20rpx;"></audio>
      <view class="data-info">
        <text>WAV播放地址：{{ audioResult.wavUrl }}</text>
        <text v-if="audioResult.recognizeText">识别结果：{{ audioResult.recognizeText }}</text>
      </view>
    </view>
  </view>
</template>

<script>  // 2. 导入组件（局部注册）

  export default {

    data() {
      return {
        // 存储组件返回的音频数据
        audioResult: {
          wavUrl: '',
          wavBase64: '',
          recognizeText: '',
          hasRecord: false
        }
      }
    },
    methods: {
      // 3. 监听组件返回的音频数据（核心方法）
      handleAudioData(res) {
        console.log('✅ 录音组件返回base64数据', res)
        this.audioResult = res
        // 发起http请求,将音频base64数据发送后端,可进行音频文字识别
                        uni.request({
                            url: 'http://127.0.0.1:5001/api/vosk', //仅为示例，并非真实接口地址。

                            method: 'POST',
                            data: {
                                audioBase64: e
                            },
                            header: {
                                'Content-Type': 'application/json;charset=utf-8'
                            },
                            success: (res) => {
                                console.log(res.data);
                                this.text = res.data.data.recognize_text;
                            }
                        });
                        console.log(e)
                    }

      }
    }
  }
</script>

<style scoped>
  .demo-page {
    padding: 30rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
  }
  .audio-preview {
    margin-top: 40rpx;
    padding: 25rpx;
    background: #fff;
    border-radius: 12rpx;
  }
  .title {
    font-size: 28rpx;
    color: #07c160;
    font-weight: bold;
  }
  .data-info {
    margin-top: 20rpx;
    font-size: 24rpx;
    color: #666;
    line-height: 1.6;
  }
</style>

🎨 样式自定义

组件内置移动端适配样式，可通过父组件样式穿透或直接修改组件内部样式两种方式自定义外观，满足项目UI需求。

方式1：父组件样式穿透（推荐，不修改组件源码）

在父组件中使用 ::v-deep 穿透组件的scoped样式，覆盖指定样式：

/* 父组件样式中 */
::v-deep .record-wrap {
  background: #ffffff !important; /* 修改组件背景色 */
}
::v-deep .btn-start {
  background: #1989fa !important; /* 修改「开始录音」按钮颜色 */
}
::v-deep .status {
  font-size: 26rpx !important;
  color: #333 !important; /* 修改状态文字样式 */
}

方式2：直接修改组件源码

打开 AudioRecordToWav.vue 的 <style scoped> 部分，直接修改样式属性（如颜色、尺寸、间距等），直观高效。

🚨 常见问题与解决方案

❌ 问题1：录音时报错「麦克风权限被拒」

✅ 解决方案：

1. 浏览器环境：必须在 localhost/127.0.0.1 或 HTTPS 协议下运行，HTTP非本地域名会被禁止获取麦克风；
2. 移动端：UniApp打包后，需在 manifest.json 中配置麦克风权限：

   "app-plus": {
    "permissions": {
      "MICROPHONE": { "desc": "用于录音功能" }
    }
   }

❌ 问题2：录音完成后，播放录音无声音

✅ 解决方案：

1. 检查设备音量是否开启、是否处于静音状态；
2. 确认录音时麦克风正常收音（录音时大声说话，保证音频有数据）；
3. 组件已内置格式强转，若仍无声，可重新录音重试。

❌ 问题3：调用语音转文字时报错「网络请求失败」

✅ 解决方案：

1. 父组件传递的 apiUrl 需替换为电脑本机IP，禁止使用 127.0.0.1/localhost（手机无法访问）；
2. 确保手机/前端设备与后端服务所在电脑连接同一WiFi；
3. 关闭电脑防火墙，放行后端端口（默认5001）；
4. 检查后端服务是否正常启动（执行 python app.py）。

❌ 问题4：WAV地址页面刷新后失效

✅ 解决方案：

• wavUrl 是浏览器临时生成的Blob地址，页面刷新后会失效，如需持久化存储，建议使用组件返回的 wavBase64（Base64编码可永久保存，后续可转回Blob/WAV）。

📋 核心方法说明（组件内部）

组件内置核心方法，无需手动调用，了解后可按需扩展：

1. startRecord()：开始录音，触发麦克风权限校验、录音倒计时；
2. stopRecord()：停止录音，触发WebM转WAV格式转换；
3. resetRecord()：重置录音状态，清空所有音频数据；
4. playAudio()：播放生成的WAV音频，验证音频有效性；
5. callVoskApi()：调用后端接口，实现语音转文字；
6. emitResultData()：统一向父组件返回数据的核心方法。

✅ 兼容性说明

📌 版本更新日志

v1.0.0（初始版本）

• ✅ 实现核心功能：录音→转WAV→播放→语音转文字；
• ✅ 支持父组件传参、子组件返回WAV地址；
• ✅ 内置格式强转、异常处理、样式适配。

💡 拓展业务建议

1. 音频上传：使用组件返回的 wavBase64 上传到后端，后端可解码为WAV文件存储；
2. 多段录音：在父组件中监听返回数据，实现多段录音数据的存储与切换；
3. 语音识别优化：对接讯飞、百度等第三方语音识别接口，替换内置的Vosk接口；
4. 音频下载：将 wavUrl 转换为下载链接，实现WAV音频本地下载。

组件维护说明：组件基于UniApp/Vue2开发，无第三方依赖，可根据项目需求自由扩展功能，如有问题可参考「常见问题」或调整源码适配。