当前位置：首页 > JavaScript

js网页实现录音

2026-03-15 14:26:22JavaScript

实现网页录音的基本步骤

使用浏览器提供的Web Audio API和MediaDevices接口可以实现网页录音功能。以下是具体实现方法：

获取用户麦克风权限

通过navigator.mediaDevices.getUserMedia()方法请求麦克风访问权限：

js网页实现录音

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

创建音频处理节点

获取音频流后，需要创建音频上下文和处理器：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const mediaStreamSource = audioContext.createMediaStreamSource(stream);
const scriptProcessor = audioContext.createScriptProcessor(4096, 1, 1);

设置录音数据处理

通过脚本处理器捕获音频数据：

js网页实现录音

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

开始和停止录音

连接节点并控制录音流程：

// 开始录音
mediaStreamSource.connect(scriptProcessor);
scriptProcessor.connect(audioContext.destination);

// 停止录音
scriptProcessor.disconnect();
stream.getTracks().forEach(track => track.stop());

处理录音数据

将采集的PCM数据转换为可播放格式：

function encodeWAV(samples) {
  const buffer = new ArrayBuffer(44 + samples.length * 2);
  const view = new DataView(buffer);
  // 写入WAV文件头
  // 写入PCM数据
  return buffer;
}

完整示例代码

let recorder, audioChunks = [];

async function startRecording() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const audioContext = new AudioContext();
  recorder = new MediaRecorder(stream);

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

  recorder.start();
}

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