当前位置：首页 > HTML

h5 实现录音

2026-01-12 16:56:36HTML

使用Web Audio API实现录音

在H5中实现录音功能可以通过Web Audio API结合MediaRecorder API完成。Web Audio API负责音频处理，MediaRecorder API用于录制音频流。

初始化音频上下文

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

获取用户麦克风权限

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

使用MediaRecorder录制音频

MediaRecorder是浏览器提供的录制API，支持将音频流保存为指定格式。

创建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' });
  const audioUrl = URL.createObjectURL(audioBlob);
  // 可通过audio元素播放或上传服务器
};

控制录制过程

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

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

音频可视化处理

通过AnalyserNode可以实现音频波形或频谱可视化。

创建分析节点

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

// 获取频率数据
const frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(frequencyData);

兼容性处理

不同浏览器对音频格式的支持存在差异，建议使用以下方案增强兼容性：

格式检测

const mimeTypes = [
  'audio/webm',
  'audio/wav',
  'audio/mp4',
  'audio/mpeg'
].filter(type => MediaRecorder.isTypeSupported(type));

const preferredType = mimeTypes[0] || 'audio/webm';

Polyfill方案 对于不支持MediaRecorder的旧版浏览器，可引入第三方库如Recorder.js作为备选方案。

h5 实现录音

完整实现示例

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.start();
}

function stopRecording() {
  return new Promise(resolve => {
    mediaRecorder.onstop = () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
      resolve(audioBlob);
      audioChunks = [];
    };
    mediaRecorder.stop();
  });
}