475 lines
15 KiB
JavaScript
475 lines
15 KiB
JavaScript
import {
|
||
ref,
|
||
onUnmounted
|
||
} from 'vue';
|
||
|
||
export function useAudioRecorder(wsUrl) {
|
||
|
||
// 状态变量
|
||
const isRecording = ref(false);
|
||
const isStopping = ref(false);
|
||
const isSocketConnected = ref(false);
|
||
const recordingDuration = ref(0);
|
||
const bufferPressure = ref(0); // 缓冲区压力 (0-100)
|
||
const currentInterval = ref(0); // 当前发送间隔
|
||
|
||
// 音频相关
|
||
const audioContext = ref(null);
|
||
const mediaStream = ref(null);
|
||
const workletNode = ref(null);
|
||
|
||
// 网络相关
|
||
const socket = ref(null);
|
||
const audioBuffer = ref([]);
|
||
const bufferInterval = ref(null);
|
||
|
||
// 配置常量
|
||
const SAMPLE_RATE = 16000;
|
||
const BASE_INTERVAL_MS = 300; // 基础发送间隔
|
||
const MIN_INTERVAL_MS = 100; // 最小发送间隔
|
||
const MAX_BUFFER_SIZE = 20; // 最大缓冲区块数
|
||
const PRESSURE_THRESHOLD = 0.7; // 加快发送的阈值 (70%)
|
||
|
||
// AudioWorklet处理器代码
|
||
const workletProcessorCode = `
|
||
class AudioProcessor extends AudioWorkletProcessor {
|
||
constructor(options) {
|
||
super();
|
||
this.sampleRate = options.processorOptions.sampleRate;
|
||
this.samplesPerChunk = Math.floor(this.sampleRate * 0.1); // 每100ms的样本数
|
||
this.buffer = new Int16Array(this.samplesPerChunk);
|
||
this.index = 0;
|
||
}
|
||
|
||
process(inputs) {
|
||
const input = inputs[0];
|
||
if (input.length > 0) {
|
||
const inputChannel = input[0];
|
||
|
||
for (let i = 0; i < inputChannel.length; i++) {
|
||
// 转换为16位PCM
|
||
this.buffer[this.index++] = Math.max(-32768, Math.min(32767, inputChannel[i] * 32767));
|
||
|
||
// 当缓冲区满时发送
|
||
if (this.index >= this.samplesPerChunk) {
|
||
this.port.postMessage({
|
||
audioData: this.buffer.buffer,
|
||
timestamp: Date.now()
|
||
}, [this.buffer.buffer]);
|
||
|
||
// 创建新缓冲区
|
||
this.buffer = new Int16Array(this.samplesPerChunk);
|
||
this.index = 0;
|
||
}
|
||
}
|
||
}
|
||
return true;
|
||
}
|
||
}
|
||
|
||
registerProcessor('audio-processor', AudioProcessor);
|
||
`;
|
||
|
||
// 初始化WebSocket连接
|
||
const initSocket = (wsUrl) => {
|
||
return new Promise((resolve, reject) => {
|
||
socket.value = new WebSocket(wsUrl);
|
||
|
||
socket.value.onopen = () => {
|
||
isSocketConnected.value = true;
|
||
console.log('WebSocket连接已建立');
|
||
resolve();
|
||
};
|
||
|
||
socket.value.onerror = (error) => {
|
||
console.error('WebSocket连接错误:', error);
|
||
reject(error);
|
||
};
|
||
|
||
socket.value.onclose = (event) => {
|
||
console.log(`WebSocket连接关闭，代码: ${event.code}, 原因: ${event.reason}`);
|
||
isSocketConnected.value = false;
|
||
console.log('WebSocket连接已关闭');
|
||
};
|
||
});
|
||
};
|
||
|
||
// 计算动态发送间隔
|
||
const calculateDynamicInterval = () => {
|
||
const pressureFactor = bufferPressure.value / 100;
|
||
// 压力越大，间隔越小（发送越快）
|
||
return Math.max(
|
||
MIN_INTERVAL_MS,
|
||
BASE_INTERVAL_MS - (pressureFactor * (BASE_INTERVAL_MS - MIN_INTERVAL_MS))
|
||
);
|
||
};
|
||
|
||
// 发送缓冲的音频数据
|
||
const sendBufferedAudio = () => {
|
||
if (audioBuffer.value.length === 0 || !socket.value || socket.value.readyState !== WebSocket.OPEN) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 将缓冲区大小限制为8000字节 (小于8192)
|
||
const MAX_CHUNK_SIZE = 8000 / 2; // 16位 = 2字节，所以4000个样本
|
||
|
||
let samplesToSend = [];
|
||
let totalSamples = 0;
|
||
|
||
// 收集不超过限制的样本
|
||
while (audioBuffer.value.length > 0 && totalSamples < MAX_CHUNK_SIZE) {
|
||
const buffer = audioBuffer.value[0];
|
||
const samples = new Int16Array(buffer);
|
||
const remainingSpace = MAX_CHUNK_SIZE - totalSamples;
|
||
|
||
if (samples.length <= remainingSpace) {
|
||
samplesToSend.push(samples);
|
||
totalSamples += samples.length;
|
||
audioBuffer.value.shift();
|
||
} else {
|
||
// 只取部分样本
|
||
samplesToSend.push(samples.slice(0, remainingSpace));
|
||
audioBuffer.value[0] = samples.slice(remainingSpace).buffer;
|
||
totalSamples = MAX_CHUNK_SIZE;
|
||
}
|
||
}
|
||
|
||
// 合并样本并发送
|
||
if (totalSamples > 0) {
|
||
const combined = new Int16Array(totalSamples);
|
||
let offset = 0;
|
||
|
||
samplesToSend.forEach(chunk => {
|
||
combined.set(chunk, offset);
|
||
offset += chunk.length;
|
||
});
|
||
|
||
socket.value.send(combined.buffer);
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('发送音频数据时出错:', error);
|
||
}
|
||
};
|
||
|
||
// 开始录音
|
||
const startRecording = async () => {
|
||
if (isRecording.value) return;
|
||
|
||
try {
|
||
// 重置状态
|
||
recordingDuration.value = 0;
|
||
audioBuffer.value = [];
|
||
bufferPressure.value = 0;
|
||
currentInterval.value = BASE_INTERVAL_MS;
|
||
console.log('正在初始化WebSocket连接...');
|
||
// 初始化WebSocket
|
||
await initSocket(wsUrl);
|
||
console.log('正在获取音频设备权限...');
|
||
// 获取音频流
|
||
mediaStream.value = await navigator.mediaDevices.getUserMedia({
|
||
audio: {
|
||
sampleRate: SAMPLE_RATE,
|
||
channelCount: 1,
|
||
echoCancellation: false,
|
||
noiseSuppression: false,
|
||
autoGainControl: false
|
||
},
|
||
video: false
|
||
});
|
||
console.log('正在初始化音频上下文...');
|
||
// 创建音频上下文
|
||
audioContext.value = new(window.AudioContext || window.webkitAudioContext)({
|
||
sampleRate: SAMPLE_RATE,
|
||
latencyHint: 'interactive'
|
||
});
|
||
|
||
// 注册AudioWorklet
|
||
const blob = new Blob([workletProcessorCode], {
|
||
type: 'application/javascript'
|
||
});
|
||
const workletUrl = URL.createObjectURL(blob);
|
||
await audioContext.value.audioWorklet.addModule(workletUrl);
|
||
URL.revokeObjectURL(workletUrl);
|
||
|
||
// 创建AudioWorkletNode
|
||
workletNode.value = new AudioWorkletNode(audioContext.value, 'audio-processor', {
|
||
numberOfInputs: 1,
|
||
numberOfOutputs: 1,
|
||
outputChannelCount: [1],
|
||
processorOptions: {
|
||
sampleRate: SAMPLE_RATE
|
||
}
|
||
});
|
||
|
||
// 处理音频数据
|
||
workletNode.value.port.onmessage = (e) => {
|
||
if (e.data.audioData instanceof ArrayBuffer) {
|
||
audioBuffer.value.push(e.data.audioData);
|
||
|
||
// 当缓冲区压力超过阈值时立即尝试发送
|
||
if (audioBuffer.value.length / MAX_BUFFER_SIZE > PRESSURE_THRESHOLD) {
|
||
sendBufferedAudio();
|
||
}
|
||
}
|
||
};
|
||
|
||
// 连接音频节点
|
||
const source = audioContext.value.createMediaStreamSource(mediaStream.value);
|
||
source.connect(workletNode.value);
|
||
workletNode.value.connect(audioContext.value.destination);
|
||
|
||
// 启动定时发送
|
||
bufferInterval.value = setInterval(sendBufferedAudio, currentInterval.value);
|
||
console.log('录音初始化完成，开始录制');
|
||
// 更新状态
|
||
isRecording.value = true;
|
||
console.log(`开始录音，采样率: ${audioContext.value.sampleRate}Hz`);
|
||
|
||
} catch (error) {
|
||
console.error('启动录音失败:', error);
|
||
cleanup();
|
||
throw error;
|
||
}
|
||
};
|
||
|
||
// 停止录音并保存
|
||
const stopRecording = async () => {
|
||
if (!isRecording.value || isStopping.value) return;
|
||
|
||
isStopping.value = true;
|
||
|
||
try {
|
||
// 停止定时器
|
||
if (bufferInterval.value) {
|
||
clearInterval(bufferInterval.value);
|
||
bufferInterval.value = null;
|
||
}
|
||
|
||
// 发送剩余音频数据
|
||
if (audioBuffer.value.length > 0) {
|
||
console.log(`正在发送剩余 ${audioBuffer.value.length} 个音频块...`);
|
||
sendBufferedAudio();
|
||
}
|
||
|
||
// 发送结束标记
|
||
if (socket.value?.readyState === WebSocket.OPEN) {
|
||
console.log('发送结束标记...');
|
||
socket.value.send(JSON.stringify({
|
||
action: 'end',
|
||
duration: recordingDuration.value
|
||
}));
|
||
|
||
// 等待数据发送完成
|
||
await new Promise((resolve) => {
|
||
if (socket.value.bufferedAmount === 0) {
|
||
resolve();
|
||
} else {
|
||
console.log(`等待 ${socket.value.bufferedAmount} 字节数据发送...`);
|
||
const timer = setInterval(() => {
|
||
if (socket.value.bufferedAmount === 0) {
|
||
clearInterval(timer);
|
||
resolve();
|
||
}
|
||
}, 50);
|
||
}
|
||
});
|
||
|
||
// 关闭连接
|
||
console.log('正在关闭WebSocket连接...');
|
||
socket.value.close();
|
||
}
|
||
|
||
cleanup();
|
||
console.log('录音已停止并保存');
|
||
|
||
} catch (error) {
|
||
console.error('停止录音时出错:', error);
|
||
throw error;
|
||
} finally {
|
||
isStopping.value = false;
|
||
}
|
||
};
|
||
|
||
// 取消录音
|
||
const cancelRecording = async () => {
|
||
if (!isRecording.value || isStopping.value) return;
|
||
|
||
isStopping.value = true;
|
||
|
||
try {
|
||
// 停止定时器
|
||
if (bufferInterval.value) {
|
||
clearInterval(bufferInterval.value);
|
||
bufferInterval.value = null;
|
||
}
|
||
|
||
// 发送取消标记
|
||
if (socket.value?.readyState === WebSocket.OPEN) {
|
||
console.log('发送结束标记...');
|
||
socket.value.send(JSON.stringify({
|
||
action: 'cancel'
|
||
}));
|
||
socket.value.close();
|
||
}
|
||
console.log('清理资源...');
|
||
cleanup();
|
||
console.log('录音已成功停止');
|
||
console.log('录音已取消');
|
||
|
||
} catch (error) {
|
||
console.error('取消录音时出错:', error);
|
||
throw error;
|
||
} finally {
|
||
isStopping.value = false;
|
||
}
|
||
};
|
||
|
||
// 清理资源
|
||
const cleanup = () => {
|
||
// 清除定时器
|
||
if (bufferInterval.value) {
|
||
clearInterval(bufferInterval.value);
|
||
bufferInterval.value = null;
|
||
}
|
||
|
||
// 关闭音频流
|
||
if (mediaStream.value) {
|
||
console.log('正在停止媒体流...');
|
||
mediaStream.value.getTracks().forEach(track => track.stop());
|
||
mediaStream.value = null;
|
||
}
|
||
|
||
// 断开音频节点
|
||
if (workletNode.value) {
|
||
workletNode.value.disconnect();
|
||
workletNode.value.port.onmessage = null;
|
||
workletNode.value = null;
|
||
}
|
||
|
||
// 关闭音频上下文
|
||
if (audioContext.value) {
|
||
if (audioContext.value.state !== 'closed') {
|
||
audioContext.value.close().catch(e => {
|
||
console.warn('关闭AudioContext时出错:', e);
|
||
});
|
||
}
|
||
audioContext.value = null;
|
||
}
|
||
|
||
// 清空缓冲区
|
||
audioBuffer.value = [];
|
||
bufferPressure.value = 0;
|
||
|
||
// 重置状态
|
||
isRecording.value = false;
|
||
isSocketConnected.value = false;
|
||
};
|
||
|
||
// 组件卸载时自动清理
|
||
onUnmounted(() => {
|
||
if (isRecording.value) {
|
||
cancelRecording();
|
||
}
|
||
});
|
||
|
||
return {
|
||
isRecording,
|
||
isStopping,
|
||
isSocketConnected,
|
||
recordingDuration,
|
||
bufferPressure,
|
||
currentInterval,
|
||
startRecording,
|
||
stopRecording,
|
||
cancelRecording
|
||
};
|
||
}
|
||
|
||
|
||
// import {
|
||
// ref
|
||
// } from 'vue'
|
||
// export function useRealtimeRecorder(wsUrl) {
|
||
// const isRecording = ref(false)
|
||
// const mediaRecorder = ref(null)
|
||
// const socket = ref(null)
|
||
// const recognizedText = ref('')
|
||
|
||
// const startRecording = async () => {
|
||
// if (!navigator.mediaDevices?.getUserMedia) {
|
||
// uni.showToast({
|
||
// title: '当前环境不支持录音',
|
||
// icon: 'none'
|
||
// })
|
||
// return
|
||
// }
|
||
// recognizedText.value = ''
|
||
// const stream = await navigator.mediaDevices.getUserMedia({
|
||
// audio: {
|
||
// sampleRate: 16000,
|
||
// channelCount: 1,
|
||
// echoCancellation: false,
|
||
// noiseSuppression: false,
|
||
// autoGainControl: false
|
||
// },
|
||
// video: false
|
||
// })
|
||
// socket.value = new WebSocket(wsUrl)
|
||
|
||
// socket.value.onopen = () => {
|
||
// console.log('[WebSocket] 连接已建立')
|
||
// }
|
||
|
||
// socket.value.onmessage = (event) => {
|
||
// recognizedText.value = JSON.parse(event.data).text
|
||
// }
|
||
|
||
// const recorder = new MediaRecorder(stream, {
|
||
// mimeType: 'audio/webm;codecs=opus',
|
||
// audioBitsPerSecond: 16000,
|
||
// })
|
||
|
||
// recorder.ondataavailable = (e) => {
|
||
// if (e.data.size > 0 && socket.value?.readyState === WebSocket.OPEN) {
|
||
// socket.value.send(e.data)
|
||
// }
|
||
// }
|
||
|
||
// recorder.start(300) // 每 300ms 发送一段数据
|
||
// mediaRecorder.value = recorder
|
||
// isRecording.value = true
|
||
// }
|
||
|
||
// const stopRecording = () => {
|
||
// mediaRecorder.value?.stop()
|
||
// mediaRecorder.value = null
|
||
// isRecording.value = false
|
||
|
||
// if (socket.value?.readyState === WebSocket.OPEN) {
|
||
// socket.value.send('[end]')
|
||
// socket.value.close()
|
||
// }
|
||
// }
|
||
|
||
// const cancelRecording = () => {
|
||
// mediaRecorder.value?.stop()
|
||
// mediaRecorder.value = null
|
||
// isRecording.value = false
|
||
// recognizedText.value = ''
|
||
|
||
// if (socket.value?.readyState === WebSocket.OPEN) {
|
||
// socket.value.send('[cancel]')
|
||
// socket.value.close()
|
||
// }
|
||
// }
|
||
|
||
// return {
|
||
// isRecording,
|
||
// recognizedText,
|
||
// startRecording,
|
||
// stopRecording,
|
||
// cancelRecording
|
||
// }
|
||
// }
|