如何使用WebRTC实现录音功能？```markdown # WebRTC录音功能实现指南 ## 核心实现步骤 ###

# WebRTC录音功能实现指南

## 核心实现步骤

### 1. 获取用户麦克风权限

```javascript
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    // 成功获取音频流
    handleSuccess(stream);
  })
  .catch(err => {
    console.error('麦克风访问被拒绝:', err);
  });

2. 创建MediaRecorder实例

let mediaRecorder;
let audioChunks = [];

function handleSuccess(stream) {
  mediaRecorder = new MediaRecorder(stream);
  
  mediaRecorder.ondataavailable = event => {
    if (event.data.size > 0) {
      audioChunks.push(event.data);
    }
  };

  mediaRecorder.onstop = () => {
    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
    const audioUrl = URL.createObjectURL(audioBlob);
    // 使用audio元素播放录音
    const audioElement = new Audio(audioUrl);
    audioElement.controls = true;
    document.body.appendChild(audioElement);
    audioChunks = [];
  };
}

3. 控制录音过程

// 开始录音
function startRecording() {
  mediaRecorder.start();
  console.log('录音开始');
}

// 停止录音
function stopRecording() {
  if (mediaRecorder.state !== 'inactive') {
    mediaRecorder.stop();
    console.log('录音停止');
  }
}

// 暂停录音
function pauseRecording() {
  if (mediaRecorder.state === 'recording') {
    mediaRecorder.pause();
    console.log('录音暂停');
  }
}

// 恢复录音
function resumeRecording() {
  if (mediaRecorder.state === 'paused') {
    mediaRecorder.resume();
    console.log('录音恢复');
  }
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>WebRTC录音示例</title>
</head>
<body>
  <button id="start">开始录音</button>
  <button id="stop" disabled>停止录音</button>
  <button id="pause" disabled>暂停录音</button>
  <button id="resume" disabled>恢复录音</button>
  
  <script>
    let mediaRecorder;
    let audioChunks = [];
    
    document.getElementById('start').addEventListener('click', async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        setupRecorder(stream);
        
        document.getElementById('start').disabled = true;
        document.getElementById('stop').disabled = false;
        document.getElementById('pause').disabled = false;
      } catch (err) {
        console.error('录音初始化失败:', err);
      }
    });
    
    function setupRecorder(stream) {
      mediaRecorder = new MediaRecorder(stream);
      
      mediaRecorder.ondataavailable = event => {
        if (event.data.size > 0) {
          audioChunks.push(event.data);
        }
      };
      
      mediaRecorder.onstop = () => {
        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
        const audioUrl = URL.createObjectURL(audioBlob);
        
        const audioElement = new Audio(audioUrl);
        audioElement.controls = true;
        document.body.appendChild(audioElement);
        
        audioChunks = [];
        document.getElementById('start').disabled = false;
        document.getElementById('stop').disabled = true;
        document.getElementById('pause').disabled = true;
        document.getElementById('resume').disabled = true;
      };
      
      mediaRecorder.start();
    }
    
    document.getElementById('stop').addEventListener('click', () => {
      mediaRecorder.stop();
      // 停止所有音频轨道
      mediaRecorder.stream.getTracks().forEach(track => track.stop());
    });
    
    document.getElementById('pause').addEventListener('click', () => {
      mediaRecorder.pause();
      document.getElementById('pause').disabled = true;
      document.getElementById('resume').disabled = false;
    });
    
    document.getElementById('resume').addEventListener('click', () => {
      mediaRecorder.resume();
      document.getElementById('pause').disabled = false;
      document.getElementById('resume').disabled = true;
    });
  </script>
</body>
</html>

关键注意事项

浏览器兼容性：
- Chrome、Firefox、Edge等现代浏览器支持良好
- Safari需要特定配置