Live Recorder - Web实时录音库

实时音频录制和传输库

功能特性

• 🎤 实时音频录制：支持麦克风音频实时录制
• 🌊 音频可视化：提供音频波形和功率显示
• 📡 WebSocket 传输：通过 Socket.IO 实时传输音频数据
• 🗜️ 数据压缩：使用 pako 压缩音频数据，减少传输带宽
• 🔇 静音检测：自动检测和处理静音片段
• 📦 模块化设计：可作为独立库集成到其他项目
• ⚡ 实时功率监控：提供PowerEvent事件监听音频功率变化
• 🧹 资源管理：提供dispose方法确保资源正确清理

核心组件

• LiveRecorder：主录音器类，管理 WebSocket 连接和音频录制
• AudioRecorder：音频录制核心，处理麦克风输入和数据处理

技术栈

• 前端框架：Vue 3 + TypeScript
• 构建工具：Vite
• 音频处理：recorder-core
• 数据压缩：pako
• 实时通信：socket.io-client

使用示例

import LiveRecorder from 'metaverse-meeting-live-recorder';


// 创建录音器实例
// liveWsUrl WebSocket服务器地址
// powerSelector 可选参数，音频功率显示元素的CSS选择器，用于显示录音音量大小
// waveSelector 可选参数，音频波形可视化元素的CSS选择器，用于显示录音波形图
const recorder = new LiveRecorder('wss://your-websocket-server.com', '.power-display', '.wave-display');

// 定义事件处理器函数（保存引用以便后续移除）
const powerEventHandler = (event) => {
    const audioPower = event.detail;
    console.log('当前音频功率:', audioPower);
};

// 监听音频功率变化事件
recorder.addEventListener(LiveRecorder.PowerEvent, powerEventHandler);

// 连接到服务器
// uId  声网UID
// meetingId  声网CHANNEL
await recorder.connect('user123', 'meeting456');

// 开始录音（异步操作）
try {
    await recorder.startMic();
    console.log('录音已开始');
} catch (error) {
    console.error('开始录音失败:', error);
}

// 停止录音（异步操作）
try {
    await recorder.stopMic();
    console.log('录音已停止');
} catch (error) {
    console.error('停止录音失败:', error);
}

// 移除事件监听器（可选，dispose方法会自动处理）
recorder.removeEventListener(LiveRecorder.PowerEvent, powerEventHandler);


// 卸载录音器，清理所有资源（推荐在组件销毁时调用）
try {
    await recorder.dispose();
    console.log('录音器已卸载');
} catch (error) {
    console.error('卸载录音器失败:', error);
}

API 文档

LiveRecorder

构造函数

constructor(liveWsUrl: string, powerSelector?: string, waveSelector?: string)

参数：

• liveWsUrl: WebSocket服务器地址
• powerSelector: 可选，音频功率显示元素的CSS选择器
• waveSelector: 可选，音频波形可视化元素的CSS选择器

方法

• connect(uId: string, meetingId: string): Promise<void> - 连接到服务器
• disconnect(): void - 断开连接
• startMic(): Promise<AudioRecorder> - 开始录音，返回Promise，成功时返回AudioRecorder实例
• stopMic(): Promise<AudioRecorder> - 停止录音，返回Promise，成功时返回AudioRecorder实例
• getAudioRecorder(): AudioRecorder - 获取音频录制器实例
• dispose(): Promise<void> - 卸载录音器，清理所有资源（停止录音、断开连接、移除事件监听器）

事件

• PowerEvent: 音频功率变化事件，事件详情包含当前音频功率值

许可证

MIT License