第5章 音频录制功能

在本章中，我们将学习如何使用RecordRTC进行音频录制，包括配置选项、格式选择和质量控制等。

5.1 音频录制基础

音频录制是RecordRTC的重要功能，支持多种音频格式：

基本音频录制配置

// 基本音频录制配置
var options = {
    type: 'audio',              // 录制类型
    mimeType: 'audio/wav',      // 音频格式
    numberOfAudioChannels: 2,   // 声道数
    sampleRate: 44100,          // 采样率
    bufferSize: 4096            // 缓冲区大小
};

var recorder = RecordRTC(mediaStream, options);

5.2 音频格式选择

RecordRTC支持多种音频格式，可以根据需求选择：

格式 MIME类型 浏览器支持 特点
WAV audio/wav 所有浏览器 无压缩，音质好，文件大
MP3 audio/mp3 Chrome, Firefox 有损压缩，文件小，兼容性好
OGG audio/ogg Chrome, Firefox 开源格式，压缩率高

不同音频格式配置

// WAV格式（无压缩，音质最好）
var wavOptions = {
    type: 'audio',
    mimeType: 'audio/wav',
    numberOfAudioChannels: 2,
    sampleRate: 44100
};

// MP3格式（有损压缩，文件较小）
var mp3Options = {
    type: 'audio',
    mimeType: 'audio/mp3',
    numberOfAudioChannels: 2,
    sampleRate: 44100
};

// OGG格式（开源压缩格式）
var oggOptions = {
    type: 'audio',
    mimeType: 'audio/ogg',
    numberOfAudioChannels: 2,
    sampleRate: 44100
};

5.3 音频质量控制

可以通过多种参数控制音频录制质量：

音频质量配置

// 高质量音频录制
var highQualityOptions = {
    type: 'audio',
    mimeType: 'audio/wav',
    numberOfAudioChannels: 2,   // 立体声
    sampleRate: 48000,          // 48kHz采样率
    bufferSize: 4096
};

// 中等质量音频录制
var mediumQualityOptions = {
    type: 'audio',
    mimeType: 'audio/wav',
    numberOfAudioChannels: 1,   // 单声道
    sampleRate: 44100,          // 44.1kHz采样率
    bufferSize: 4096
};

// 低质量音频录制（适合网络传输）
var lowQualityOptions = {
    type: 'audio',
    mimeType: 'audio/wav',
    numberOfAudioChannels: 1,   // 单声道
    sampleRate: 22050,          // 22.05kHz采样率
    bufferSize: 2048
};

5.4 音频处理功能

录制完成后可以对音频进行处理：

音频处理示例

// 音频处理函数
function processAudio(blob) {
    // 创建音频上下文
    var audioContext = new (window.AudioContext || window.webkitAudioContext)();
    
    // 读取音频数据
    var reader = new FileReader();
    reader.onload = function(e) {
        audioContext.decodeAudioData(e.target.result, function(buffer) {
            // 处理音频数据
            console.log('音频时长:', buffer.duration);
            console.log('采样率:', buffer.sampleRate);
            console.log('声道数:', buffer.numberOfChannels);
            
            // 可以在这里进行音频处理
            // 例如：调整音量、添加效果等
        });
    };
    reader.readAsArrayBuffer(blob);
}

5.5 多麦克风支持

可以同时使用多个麦克风进行录制：

多麦克风录制

// 获取多个音频设备
async function getMultipleMicrophones() {
    try {
        // 获取所有音频输入设备
        const devices = await navigator.mediaDevices.enumerateDevices();
        const audioDevices = devices.filter(device => device.kind === 'audioinput');
        
        // 创建多个音频流
        const streams = [];
        for (let i = 0; i < Math.min(2, audioDevices.length); i++) {
            const stream = await navigator.mediaDevices.getUserMedia({
                audio: {
                    deviceId: audioDevices[i].deviceId
                },
                video: false
            });
            streams.push(stream);
        }
        
        return streams;
    } catch (error) {
        console.error('获取麦克风失败:', error);
    }
}

5.6 音频可视化

可以创建音频可视化效果：

音频可视化

// 创建音频可视化
function createAudioVisualization(stream) {
    // 创建音频上下文
    var audioContext = new (window.AudioContext || window.webkitAudioContext)();
    
    // 创建分析器
    var analyser = audioContext.createAnalyser();
    analyser.fftSize = 256;
    
    // 连接音频节点
    var source = audioContext.createMediaStreamSource(stream);
    source.connect(analyser);
    
    // 获取频域数据
    var bufferLength = analyser.frequencyBinCount;
    var dataArray = new Uint8Array(bufferLength);
    
    // 创建canvas用于可视化
    var canvas = document.getElementById('visualization');
    var canvasCtx = canvas.getContext('2d');
    
    // 绘制函数
    function draw() {
        requestAnimationFrame(draw);
        
        analyser.getByteFrequencyData(dataArray);
        
        canvasCtx.fillStyle = 'rgb(0, 0, 0)';
        canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
        
        var barWidth = (canvas.width / bufferLength) * 2.5;
        var barHeight;
        var x = 0;
        
        for(var i = 0; i < bufferLength; i++) {
            barHeight = dataArray[i];
            
            canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
            canvasCtx.fillRect(x, canvas.height-barHeight/2, barWidth, barHeight/2);
            
            x += barWidth + 1;
        }
    };
    
    draw();
}