当前位置：首页 > JavaScript

js实现录音

2026-03-02 05:55:23JavaScript

使用Web Audio API实现录音

Web Audio API提供了一套完整的音频处理系统，可以通过JavaScript在浏览器中实现录音功能。以下是一个基本的实现方法：

js实现录音

// 获取音频上下文
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// 请求麦克风权限
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(function(stream) {
    // 创建音频源节点
    const source = audioContext.createMediaStreamSource(stream);

    // 创建录音处理器
    const recorder = audioContext.createScriptProcessor(4096, 1, 1);

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

    // 连接节点
    source.connect(recorder);
    recorder.connect(audioContext.destination);

    // 开始录音
    function startRecording() {
      audioChunks = [];
    }

    // 停止录音
    function stopRecording() {
      const audioBuffer = audioContext.createBuffer(1, 
        audioChunks.length * 4096, 
        audioContext.sampleRate);

      const channelData = audioBuffer.getChannelData(0);
      for (let i = 0; i < audioChunks.length; i++) {
        channelData.set(audioChunks[i], i * 4096);
      }

      return audioBuffer;
    }
  })
  .catch(function(err) {
    console.error('无法获取麦克风:', err);
  });

使用MediaRecorder API实现录音

MediaRecorder API是更简单的录音方案，可以直接录制媒体流：

js实现录音

let mediaRecorder;
let audioChunks = [];

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(function(stream) {
    mediaRecorder = new MediaRecorder(stream);

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

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

    // 开始录音
    document.getElementById('start').onclick = function() {
      audioChunks = [];
      mediaRecorder.start();
    };

    // 停止录音
    document.getElementById('stop').onclick = function() {
      mediaRecorder.stop();
    };
  });

录音格式处理

录制完成后通常需要将音频数据转换为可用格式：

// 将Blob转换为Base64
function blobToBase64(blob) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

// 下载录音文件
function downloadAudio(audioBlob, filename = 'recording.wav') {
  const url = URL.createObjectURL(audioBlob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
}

注意事项

浏览器兼容性需要考虑，不同浏览器对音频API的支持程度不同。建议在使用前检测API可用性：

if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
  alert('您的浏览器不支持录音功能');
}

if (!window.MediaRecorder) {
  alert('您的浏览器不支持MediaRecorder API');
}

录音功能需要HTTPS环境或在localhost开发环境下才能正常工作，这是浏览器安全策略的要求。

标签: js