uniapp 实时语音转文字 使用 App-Plus（WKWebView）环境下，直接用 navigator.mediaDevices.getUserMedia获取音频buffer，可以直接在安卓和iOS和H5使用

返回发过火

<template>
<!--
视图层模板：
- 使用动态绑定将options和status传递给renderjs模块
- change:options 监听options变化，触发record.startRecord方法
- change:status 监听status变化，触发record.onStop方法
-->
<view :options="options" :change:options="record.startRecord"
:status="status" :change:status="record.onStop">
</view>
</template>

<script>
// Vue组件脚本 - 负责逻辑控制
export default {
data() {
return {
options: null, // 录制配置参数
status: null, // 录制状态控制
// 新增：用于页面显示的时间
recordingTime: '00:00', // 格式化显示的时间字符串
durationInSeconds: 0 // 录音时长（秒）
}
},
methods: {
// 开始录音方法
start(option) {
this.recordingTime = '00:00'; // 重置时间显示
this.options = option; // 设置录制参数
this.status = 'start'; // 触发renderjs开始录制
},

// 停止录音方法
stop() {
this.status = 'stop'; // 触发renderjs停止录制
this.options = null; // 清空配置
},

// 更新计时器
async updateTimer(seconds) {
this.durationInSeconds = seconds; // 记录总秒数
this.recordingTime = await this.formatTime(seconds); // 格式化时间
this.$emit("onUpdateTime", this.recordingTime) // 向父组件发送时间更新事件
},

// 时间格式化工具：将秒数转换为 MM:SS 格式
formatTime(seconds) {
const m = Math.floor(seconds / 60); // 计算分钟
const s = Math.floor(seconds % 60); // 计算秒数
return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`; // 格式化为两位数字
},

// 处理音频帧数据
frameRecorded({ isLastFrame, frameBuffer }) {
// 向父组件发送音频帧数据事件
this.$emit('onFrameRecorded', {
isLastFrame,
frameBuffer: this.base64ToUint8Array(frameBuffer) // 将base64转换为Uint8Array
})
},

// Base64转Uint8Array工具函数
base64ToUint8Array(base64) {
const binaryString = atob(base64.split(',')[1] || base64); // 解码base64
const len = binaryString.length;
const bytes = new Uint8Array(len);

for (let i = 0; i < len; i++) {
bytes[i] = binaryString.charCodeAt(i); // 将字符转换为字节
}

return bytes;
},

// 错误处理：显示错误信息并停止录音
toShowToast() {
// uni.showToast({
// title: '发生错误,请检查是否有麦克风权限',
// icon: 'none'
// });
this.stop(); // 停止录音
},

// 录音完成回调
recordedChunks(base64) {
this.$emit('onStop', base64) // 向父组件发送完整的录音数据
},
}
}
</script>

<script module="record" lang="renderjs">
// RenderJS模块 - 运行在WebView渲染层，处理音频录制核心逻辑
// 注意：RenderJS可以操作DOM和浏览器API，性能更好

// 全局变量保存音频相关引用，便于资源释放
let mediaStream; // 媒体流对象
let audioContext; // 音频上下文
let processor; // 音频处理器

// 全局变量存储录音数据
let recordedChunks = []; // 存储音频数据块
let currentTotalByteLength = 0; // 当前总字节长度，用于计算录音时长

export default {
data() {
return {}
},
methods: {
// 开始录音主函数
async startRecord(options) {
console.log(options, "==========")
if (options == null) return; // 参数验证
if (audioContext) return; // 防止重复启动

try {
// 重置录音数据
recordedChunks = [];
currentTotalByteLength = 0;

// 创建音频上下文
audioContext = new AudioContext();
const devSampleRate = audioContext.sampleRate; // 获取设备采样率
console.log(audioContext, "-------------------")

// 加载并初始化AudioWorklet处理器
await audioContext.audioWorklet.addModule('static/js/processor.worklet.js');

// 获取麦克风权限并创建媒体流
mediaStream = await navigator.mediaDevices.getUserMedia({
audio: {
sampleRate: options.sampleRate, // 设置采样率
}
});

// 获取并打印音频轨道配置
const track = mediaStream.getAudioTracks()[0];
const settings = track.getSettings();
console.log(settings.sampleRate, settings.channelCount)

// 创建音频源节点
const source = audioContext.createMediaStreamSource(mediaStream);

// 创建音频工作节点
processor = new AudioWorkletNode(audioContext, 'processor-worklet');

// 初始化处理器参数
processor.port.postMessage({
type: 'init',
data: {
frameSize: options.frameSize, // 帧大小（样本数）
fromSampleRate: devSampleRate, // 输入采样率
toSampleRate: options.sampleRate, // 输出采样率
arrayBufferType: 'short16' // 音频数据类型
}
});

// 设置音频数据处理回调
processor.port.onmessage = (t) => {
var r = t.data,
o = r.frameBuffer,
n = r.isLastFrame;

if (null == o ? void 0 : o.byteLength) {
// 累计音频数据字节数
currentTotalByteLength += o.byteLength;
// 计算当前录音时长（字节数 ÷ (采样率 × 2字节/样本)）
const currentSeconds = currentTotalByteLength / (options.sampleRate * 2)
// 更新Vue组件中的计时器
this.$ownerInstance.callMethod('updateTimer', currentSeconds)

// 按帧大小分割音频数据
for (var a = 0; a < o.byteLength;) {
const frameData = {
isLastFrame: n && a + s >= o.byteLength,
frameBuffer: t.data.frameBuffer.slice(a, a + s) // 切割单帧数据
};
// 处理单帧数据
this.onFrameRecorded(frameData);

// 存储录音数据（用于后续合并）
recordedChunks.push(frameData.frameBuffer);

a += s; // 移动到下一帧
}
} else {
// 处理无音频数据的情况
this.onFrameRecorded(t.data);
}
};

// 连接音频节点：source → processor → destination
source.connect(processor);
processor.connect(audioContext.destination);

} catch (err) {
// 错误处理
this.$ownerInstance.callMethod('toShowToast');
console.log(err, "555555555141414");
}
},

// 处理单帧音频数据
onFrameRecorded({ isLastFrame, frameBuffer }) {
// 将音频数据发送到Vue组件
this.$ownerInstance.callMethod('frameRecorded', {
isLastFrame,
frameBuffer: this.toBase64(frameBuffer) // 转换为base64传输
});
},

// ArrayBuffer转Base64工具函数
toBase64(buffer) {
let binary = "";
const bytes = new Uint8Array(buffer);
const len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]); // 将字节转为字符
}
return window.btoa(binary); // 编码为base64
},

// 合并所有音频数据块并生成WAV文件
async onRecordedChunks(chunks) {
// 1. 合并所有音频buffer
var mergedBuffer = this.mergeAudioBuffers(chunks);

// 2. 将PCM数据封装为WAV格式（添加WAV文件头）
const wavBlob = this.createWavBlob(mergedBuffer, 1, 16000); // 单声道，16000Hz采样率

// 3. 将WAV Blob转换为Base64
const base64 = await this.blobToBase64(wavBlob);

// 4. 发送到Vue组件
this.$ownerInstance.callMethod('recordedChunks', base64)
},

// 停止录音处理
onStop(value) {
if (value !== 'stop') return; // 状态验证

// 发送最后一帧标记
this.onFrameRecorded({
isLastFrame: true,
frameBuffer: ''
});

// 处理已录制的音频数据
this.onRecordedChunks(recordedChunks);

// 释放资源
if (mediaStream) {
// 停止所有媒体轨道
mediaStream.getTracks().forEach(track => track.stop());
mediaStream = null;
}

if (processor) {
// 断开音频节点连接
processor.disconnect();
processor = null;
}

if (audioContext) {
// 关闭音频上下文
audioContext.close().then(() => {
audioContext = null;
});
}
},

// 合并多个ArrayBuffer
mergeAudioBuffers(buffers) {
// 计算总长度
let totalLength = buffers.reduce((acc, buf) => acc + buf.byteLength, 0);

// 创建合并后的buffer
const result = new Uint8Array(totalLength);
let offset = 0;

// 逐个复制buffer
buffers.forEach(buffer => {
result.set(new Uint8Array(buffer), offset);
offset += buffer.byteLength;
});

// 验证长度
if (offset !== totalLength) console.error("合并后的长度不符！");

return result.buffer;
},

// 创建WAV格式的Blob（添加WAV文件头）
createWavBlob(pcmData, numChannels, sampleRate) {
const bytesPerSample = 2; // 16-bit PCM，每样本2字节
const blockAlign = numChannels * bytesPerSample; // 每个采样帧的字节数
const byteRate = sampleRate * blockAlign; // 每秒字节数
const bufferLength = pcmData.byteLength; // PCM数据长度
const totalLength = 44 + bufferLength; // WAV头(44字节) + 音频数据

// 创建DataView写入WAV头
const buffer = new ArrayBuffer(totalLength);
const view = new DataView(buffer);

// 写入RIFF头
this.writeString(view, 0, 'RIFF'); // 文件标识
view.setUint32(4, totalLength - 8, true); // 文件大小（不包括RIFF标识和大小字段）
this.writeString(view, 8, 'WAVE'); // 格式类型

// 写入fmt子块
this.writeString(view, 12, 'fmt '); // fmt块标识
view.setUint32(16, 16, true); // fmt块大小
view.setUint16(20, 1, true); // 音频格式（PCM = 1）
view.setUint16(22, numChannels, true); // 声道数
view.setUint32(24, sampleRate, true); // 采样率
view.setUint32(28, byteRate, true); // 字节率
view.setUint16(32, blockAlign, true); // 块对齐
view.setUint16(34, 16, true); // 位深（16位）

// 写入data子块
this.writeString(view, 36, 'data'); // data块标识
view.setUint32(40, bufferLength, true); // 音频数据大小

// 写入PCM音频数据（16位小端序）
const pcm16 = new Int16Array(pcmData);
for (let i = 0; i < pcm16.length; i++) {
view.setInt16(44 + i * 2, pcm16[i], true); // 44字节偏移后开始写音频数据
}

// 返回WAV格式的Blob
return new Blob([buffer], {
type: 'audio/wav'
});
},

// Blob转Base64工具函数
blobToBase64(blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result); // 读取完成
reader.onerror = reject; // 读取错误
reader.readAsDataURL(blob); // 读取为DataURL格式
});
},

// 辅助函数：将字符串写入DataView
writeString(view, offset, string) {
for (let i = 0; i < string.length; i++) {
view.setUint8(offset + i, string.charCodeAt(i)); // 写入字符的ASCII码
}
}
}
}
</script>

<style></style>

1. 架构设计：

   • 使用uni-app的RenderJS技术处理音频录制，将性能敏感的操作放在渲染层

   • Vue组件层负责状态管理和事件传递

   • RenderJS层负责音频处理、编码和文件生成

2. 音频处理流程：

   • 获取麦克风权限 → 创建音频流 → 采样率转换 → 分帧处理 → 合并为WAV文件

3. 数据流转：

   • PCM音频数据 → 分帧 → Base64编码 → Vue组件 → Uint8Array解码

4. 资源管理：

   • 全局变量保存音频相关引用，确保正确释放资源

   • 完整的错误处理和资源清理机制

5. 功能特点：

   • 实时录音时长计算和显示

   • 支持实时音频帧传输

   • 最终生成标准WAV格式文件

   • 支持自定义采样率和帧大小