当前位置：首页 > HTML

h5页面实现录音

2026-03-06 10:24:25HTML

实现H5页面录音功能

在H5页面中实现录音功能可以通过浏览器的MediaRecorder API完成。以下是具体实现方法：

环境准备 确保使用现代浏览器（Chrome、Firefox、Edge等），部分API需要HTTPS环境或localhost才能正常工作。iOS Safari有额外限制，可能需要用户手动触发。

基本实现步骤

获取用户麦克风权限

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

创建MediaRecorder实例

const mediaRecorder = new MediaRecorder(stream);
let audioChunks = [];

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

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

控制录音过程

// 开始录音
mediaRecorder.start();

// 停止录音
mediaRecorder.stop();

完整示例代码

<button id="start">开始录音</button>
<button id="stop" disabled>停止</button>
<audio id="playback" controls></audio>

<script>
  const startBtn = document.getElementById('start');
  const stopBtn = document.getElementById('stop');
  const playback = document.getElementById('playback');
  let mediaRecorder, audioStream;

  startBtn.addEventListener('click', async () => {
    try {
      audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
      mediaRecorder = new MediaRecorder(audioStream);
      const audioChunks = [];

      mediaRecorder.addEventListener("dataavailable", event => {
        audioChunks.push(event.data);
      });

      mediaRecorder.addEventListener("stop", () => {
        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
        const audioUrl = URL.createObjectURL(audioBlob);
        playback.src = audioUrl;
      });

      mediaRecorder.start();
      startBtn.disabled = true;
      stopBtn.disabled = false;
    } catch (err) {
      console.error('Error:', err);
    }
  });

  stopBtn.addEventListener('click', () => {
    mediaRecorder.stop();
    audioStream.getTracks().forEach(track => track.stop());
    startBtn.disabled = false;
    stopBtn.disabled = true;
  });
</script>

兼容性处理 对于不支持MediaRecorder API的浏览器，可以考虑使用第三方库如：