当前位置：首页 > HTML

h5实现录音

2026-03-06 09:17:06HTML

使用Web Audio API实现录音

Web Audio API提供了录音功能的核心接口，通过MediaRecorder和getUserMedia实现。需要用户授权麦克风权限。

// 请求麦克风权限
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const mediaRecorder = new MediaRecorder(stream);
    const audioChunks = [];

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

    mediaRecorder.onstop = () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
      const audioUrl = URL.createObjectURL(audioBlob);
      const audio = new Audio(audioUrl);
      audio.play(); // 播放录音
    };
  });

录音控制方法

开始录音调用start()方法，停止使用stop()。可设置时间片自动分割数据：

h5实现录音

mediaRecorder.start(); // 开始录音
// 每1秒收集一次数据（可选）
mediaRecorder.start(1000); 

// 停止录音
document.getElementById('stop').addEventListener('click', () => {
  mediaRecorder.stop();
});

音频格式设置

通过mimeType指定录制格式，支持audio/webm、audio/mp4等：

const options = { 
  mimeType: 'audio/webm;codecs=opus' 
};
const mediaRecorder = new MediaRecorder(stream, options);

保存录音文件

将Blob数据转换为可下载文件：

h5实现录音

mediaRecorder.onstop = () => {
  const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(audioBlob);
  downloadLink.download = 'recording.wav';
  document.body.appendChild(downloadLink);
  downloadLink.click();
};

兼容性处理

检测API支持情况并提供备用方案：

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

实时音频可视化

结合AudioContext实现波形显示：

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

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

注意事项

HTTPS环境下才能获取麦克风权限（localhost除外）
iOS Safari需要用户主动交互（如点击事件）才能启动录音
不同浏览器支持的音频编解码器可能不同
录音时长可能受浏览器内存限制

完整示例代码

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

<script>
  let mediaRecorder, audioChunks = [];

  document.getElementById('start').addEventListener('click', async () => {
    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);
      document.getElementById('playback').src = audioUrl;
      audioChunks = [];
    };

    mediaRecorder.start();
  });

  document.getElementById('stop').addEventListener('click', () => {
    mediaRecorder.stop();
    mediaRecorder.stream.getTracks().forEach(track => track.stop());
  });
</script>

分享给朋友：