当前位置：首页 > JavaScript

js网页实现录音

2026-02-02 14:13:46JavaScript

使用Web Audio API和MediaRecorder实现录音

在网页中实现录音功能可以通过Web Audio API和MediaRecorder API完成。以下是一个完整的实现方案：

获取用户麦克风权限

js网页实现录音

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    // 成功获取音频流
  })
  .catch(err => {
    console.error('无法访问麦克风:', err);
  });

创建录音器实例

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);
  // 可以播放或下载录音
};

控制录音过程

js网页实现录音

// 开始录音
mediaRecorder.start();
audioChunks = []; // 每次开始前清空之前的录音片段

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

音频可视化处理

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

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);

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

录音格式设置

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

const options = {
  mimeType: 'audio/webm', // 或 'audio/wav', 'audio/mp3'等
  audioBitsPerSecond: 128000 // 比特率
};
const recorder = new MediaRecorder(stream, options);

完整示例代码

<button id="start">开始录音</button>
<button id="stop">停止录音</button>
<audio id="playback" controls></audio>
<canvas id="visualizer" width="300" height="100"></canvas>

<script>
  let mediaRecorder, audioChunks = [];

  document.getElementById('start').onclick = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    mediaRecorder = new MediaRecorder(stream);

    mediaRecorder.ondataavailable = e => audioChunks.push(e.data);
    mediaRecorder.onstop = () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
      document.getElementById('playback').src = URL.createObjectURL(audioBlob);
    };

    mediaRecorder.start();
    setupVisualizer(stream);
  };

  document.getElementById('stop').onclick = () => {
    mediaRecorder.stop();
    mediaRecorder.stream.getTracks().forEach(track => track.stop());
  };

  function setupVisualizer(stream) {
    const audioContext = new AudioContext();
    const analyser = audioContext.createAnalyser();
    audioContext.createMediaStreamSource(stream).connect(analyser);

    const canvas = document.getElementById('visualizer');
    const ctx = canvas.getContext('2d');

    function draw() {
      requestAnimationFrame(draw);
      const bufferLength = analyser.frequencyBinCount;
      const dataArray = new Uint8Array(bufferLength);
      analyser.getByteTimeDomainData(dataArray);

      ctx.fillStyle = 'rgb(200, 200, 200)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.lineWidth = 2;
      ctx.strokeStyle = 'rgb(0, 0, 0)';
      ctx.beginPath();

      const sliceWidth = canvas.width / bufferLength;
      let x = 0;

      for(let i = 0; i < bufferLength; i++) {
        const v = dataArray[i] / 128.0;
        const y = v * canvas.height/2;

        if(i === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);

        x += sliceWidth;
      }

      ctx.lineTo(canvas.width, canvas.height/2);
      ctx.stroke();
    }

    draw();
  }
</script>