js实现录音功能

使用Web Audio API实现录音

通过navigator.mediaDevices.getUserMedia获取麦克风权限，结合MediaRecorderAPI实现录音：

let mediaRecorder;
let audioChunks = [];

async function startRecording() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  mediaRecorder = new MediaRecorder(stream);

  mediaRecorder.ondataavailable = event => {
    audioChunks.push(event.data);
  };

  mediaRecorder.onstop = () => {
    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
    const audioUrl = URL.createObjectURL(audioBlob);
    // 处理录音结果
  };

  mediaRecorder.start();
  audioChunks = [];
}

function stopRecording() {
  mediaRecorder.stop();
  mediaRecorder.stream.getTracks().forEach(track => track.stop());
}

使用第三方库RecordRPC

对于更复杂的需求，可以使用RecordRPC库简化实现：

import RecordRPC from 'recordrtc';

let recorder;
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
  recorder = new RecordRPC(stream, { type: 'audio' });
  recorder.startRecording();
});

function stopRecording() {
  recorder.stopRecording(() => {
    const blob = recorder.getBlob();
    // 处理录音结果
  });
}

音频格式处理

将录音转换为不同格式：

• WAV格式适合高保真录音
• MP3格式适合减小文件体积
• OGG格式适合网页播放

使用audiobuffer-to-wav库转换：

import audioBufferToWav from 'audiobuffer-to-wav';

// 从Blob获取AudioBuffer
const audioContext = new AudioContext();
const arrayBuffer = await blob.arrayBuffer();
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

// 转换为WAV
const wav = audioBufferToWav(audioBuffer);
const wavBlob = new Blob([wav], { type: 'audio/wav' });

处理兼容性问题

检测浏览器支持情况：

if (!navigator.mediaDevices || !window.MediaRecorder) {
  alert('您的浏览器不支持录音功能');
}

处理不同浏览器的MIME类型限制：

const mimeType = MediaRecorder.isTypeSupported('audio/webm') 
  ? 'audio/webm' 
  : 'audio/ogg';

录音功能优化

添加可视化效果：

const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaStreamSource(stream);
source.connect(analyser);

function drawWaveform() {
  requestAnimationFrame(drawWaveform);
  const dataArray = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteTimeDomainData(dataArray);
  // 使用canvas绘制波形
}

添加录音时长限制：

const MAX_DURATION = 300000; // 5分钟
setTimeout(() => {
  stopRecording();
}, MAX_DURATION);