当前位置：首页 > JavaScript

js实现录音功能

2026-03-16 02:51:40JavaScript

使用Web Audio API实现录音

通过navigator.mediaDevices.getUserMedia获取麦克风权限，结合MediaRecorderAPI进行录音。

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

    mediaRecorder.addEventListener("dataavailable", event => {
      audioChunks.push(event.data);
    });

    mediaRecorder.addEventListener("stop", () => {
      const audioBlob = new Blob(audioChunks);
      const audioUrl = URL.createObjectURL(audioBlob);
      const audio = new Audio(audioUrl);
      audio.play();
    });

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

    // 停止录音
    setTimeout(() => {
      mediaRecorder.stop();
    }, 3000);
  });

录音格式设置

MediaRecorder支持多种音频格式，通过mimeType参数指定。

js实现录音功能

const options = {
  audioBitsPerSecond: 128000,
  mimeType: 'audio/webm' // 或 'audio/mp3', 'audio/wav'
};
const mediaRecorder = new MediaRecorder(stream, options);

处理录音数据

将录音数据转换为可下载的文件。

mediaRecorder.addEventListener("stop", () => {
  const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
  const audioUrl = URL.createObjectURL(audioBlob);

  // 创建下载链接
  const downloadLink = document.createElement('a');
  downloadLink.href = audioUrl;
  downloadLink.download = 'recording.wav';
  downloadLink.click();
});

错误处理

添加权限拒绝和错误处理逻辑。

js实现录音功能

navigator.mediaDevices.getUserMedia({ audio: true })
  .catch(err => {
    console.error('Error accessing microphone:', err);
    alert('无法访问麦克风，请检查权限设置');
  });

兼容性处理

检查浏览器是否支持相关API。

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

实时音频处理

使用AudioContext对录音进行实时处理。

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

source.connect(analyser);
analyser.connect(audioContext.destination);

// 获取音频数据
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);