当前位置：首页 > JavaScript

js 实现录音

2026-04-06 20:25:59JavaScript

录音功能实现基础

在JavaScript中实现录音功能通常需要借助浏览器提供的Web Audio API和MediaDevices API。现代浏览器支持通过navigator.mediaDevices.getUserMedia获取麦克风权限，结合AudioContext处理音频流。

获取麦克风权限

调用getUserMedia方法请求麦克风访问权限。该方法返回一个Promise，成功时解析为MediaStream对象：

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

创建录音控制器

使用MediaRecorderAPI录制音频流。需先检查浏览器兼容性：

if (MediaRecorder.isTypeSupported('audio/webm')) {
  const recorder = new MediaRecorder(stream, {
    mimeType: 'audio/webm'
  });

  recorder.ondataavailable = (e) => {
    const audioBlob = e.data;
    // 处理录制的音频数据
  };
}

控制录音过程

实现开始/停止录音的基本控制逻辑：

let chunks = [];

recorder.onstart = () => {
  chunks = [];
};

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

function startRecording() {
  recorder.start(1000); // 每1秒收集一次数据
}

function stopRecording() {
  recorder.stop();
  const blob = new Blob(chunks, { type: 'audio/webm' });
  const audioURL = URL.createObjectURL(blob);
  // 可创建<audio>元素播放或上传服务器
}

音频可视化处理

通过AnalyserNode实现实时音频波形可视化：

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

source.connect(analyser);
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

function drawWaveform() {
  requestAnimationFrame(drawWaveform);
  analyser.getByteTimeDomainData(dataArray);
  // 使用canvas绘制波形
}

兼容性处理

对于不支持MediaRecorder的浏览器，可使用第三方库如：

js 实现录音

RecordRTC
wavesurfer.js
libvorbis.js

完整示例代码

const startBtn = document.getElementById('start');
const stopBtn = document.getElementById('stop');
const audioPlayer = document.getElementById('player');

let recorder, stream;

startBtn.onclick = async () => {
  stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  recorder = new MediaRecorder(stream);

  const chunks = [];
  recorder.ondataavailable = e => chunks.push(e.data);
  recorder.onstop = () => {
    const blob = new Blob(chunks, { type: 'audio/ogg' });
    audioPlayer.src = URL.createObjectURL(blob);
  };

  recorder.start();
};

stopBtn.onclick = () => {
  recorder.stop();
  stream.getTracks().forEach(track => track.stop());
};