当前位置：首页 > HTML

h5页面实现录音

2026-01-13 22:43:41HTML

实现H5页面录音的方法

使用Web Audio API

Web Audio API提供音频处理能力，结合getUserMedia可实现录音。核心步骤包括请求麦克风权限、创建音频上下文和处理音频流。

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const audioContext = new AudioContext();
    const mediaStreamSource = audioContext.createMediaStreamSource(stream);
    const scriptProcessor = audioContext.createScriptProcessor(4096, 1, 1);

    let audioChunks = [];
    scriptProcessor.onaudioprocess = e => {
      audioChunks.push(e.inputBuffer.getChannelData(0));
    };

    mediaStreamSource.connect(scriptProcessor);
    scriptProcessor.connect(audioContext.destination);
  });

使用MediaRecorder API

MediaRecorder是更简单的解决方案，可直接录制媒体流为指定格式。

let mediaRecorder;
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    mediaRecorder = new MediaRecorder(stream);
    const audioChunks = [];

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

    mediaRecorder.onstop = () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
      const audioUrl = URL.createObjectURL(audioBlob);
      // 创建播放或下载链接
    };

    mediaRecorder.start();
  });

兼容性处理

不同浏览器对音频格式支持不同，建议使用audio/webm或audio/ogg格式。需检测API支持情况：

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

权限请求优化

iOS等设备需用户主动交互后才能调用麦克风，建议在按钮点击事件中初始化录音：

<button id="recordBtn">开始录音</button>
<script>
  document.getElementById('recordBtn').addEventListener('click', initRecorder);
</script>

录音控制

实现开始/暂停/停止控制逻辑：

let isRecording = false;
recordBtn.addEventListener('click', () => {
  if (!isRecording) {
    mediaRecorder.start();
    recordBtn.textContent = '停止录音';
  } else {
    mediaRecorder.stop();
    recordBtn.textContent = '开始录音';
  }
  isRecording = !isRecording;
});

音频可视化

通过AnalyserNode实现实时波形显示：

const analyser = audioContext.createAnalyser();
analyser.fftSize = 256;
mediaStreamSource.connect(analyser);

function visualize() {
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);
  analyser.getByteTimeDomainData(dataArray);

  // 使用canvas绘制波形
  requestAnimationFrame(visualize);
}