html5 录制mp3音频支持采样率和比特率设置

当前位置：电视猫 > Html5>

电视猫时间： 2024-08-01 09:53:40

HTML5 录制MP3音频并支持采样率和比特率设置

概述

HTML5 的 Web Audio API 提供了在浏览器中直接录制音频的能力。然而，它默认录制的是 WAV 格式的音频。为了将录制到的音频转换为 MP3 格式，并支持自定义采样率和比特率，我们需要借助 JavaScript 库来实现。

实现步骤

引入 Web Audio API: 在 HTML 中引入 <audio> 标签，用于获取用户媒体流。
获取用户音频输入: 使用 navigator.mediaDevices.getUserMedia() 方法请求用户允许访问麦克风。
创建 AudioContext: 创建一个 AudioContext 对象，作为音频处理的上下文。
创建 MediaRecorder: 创建一个 MediaRecorder 对象，用于录制音频数据。
开始录制: 调用 MediaRecorder.start() 方法开始录制。
编码为 MP3: 使用 JavaScript 库（如 lame.js）将录制到的 WAV 格式音频数据编码为 MP3 格式。
保存音频文件: 将编码后的 MP3 数据保存为 Blob 对象，然后使用 URL.createObjectURL() 生成一个 URL，最后创建一个 <a> 标签，点击这个标签即可下载音频文件。

代码示例

JavaScript

<button id="startRecord">开始录制</button>
<button id="stopRecord">停止录制</button>

<script>
  const startButton = document.getElementById('startRecord');
  const stopButton = document.getElementById('stopRecord');

  let recorder;
  let audioChunks = [];

  function startRecording() {
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
        const audioContext = new AudioContext();
        c   1. github.com 

github.comonst mediaRecorder = new MediaRecorder(stream);

        mediaRecorder.ondataavailable = event => {
          audioChunks.push(event.data);
        };

        mediaRecorder.ons   1. github.com 

github.comtop = () => {
          const blob = new Blob(audioChunks, { 'type' : 'audio/wav;codecs=pcm' });
          // 使用 lame.js 将 Blob 编码为 MP3
          lamejs.init({
            // 设置采样率、比特率等参数
            sampleRate: 44100,
            bitRate: 128
          });
          const mp3Blob = lamejs.encode(blob);
          const url = URL.createObjectURL(mp3Blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = 'recording.mp3';
          link.click();
        };

        mediaRecorder.start();
      })
      .catch(err => console.error('Error:', err));
  }

  startButton.addEventListener('click', startRecording);
</script>

关键点

lame.js: 一个 JavaScript 库，用于将 PCM 音频数据编码为 MP3。它支持设置采样率、比特率等参数。
MediaRecorder.ondataavailable: 在每次录制到新的音频数据时触发，将数据添加到 audioChunks 数组中。
MediaRecorder.onstop: 当录制停止时触发，将 audioChunks 中的数据转换为 Blob 对象，然后使用 lame.js 编码为 MP3。
URL.createObjectURL: 创建一个 URL，指向 Blob 对象，方便下载。

注意事项

浏览器兼容性: Web Audio API 和 MediaRecorder API 的支持情况因浏览器而异。
用户权限: 确保用户允许访问麦克风。
性能: 编码 MP3 可能会消耗较多的 CPU 资源，尤其是对于长时间的录音。
lame.js 配置: 仔细阅读 lame.js 的文档，了解如何配置采样率、比特率等参数。

扩展

实时播放: 使用 AudioContext 的 createMediaStreamSource 和 createMediaStreamDestination 方法实现实时播放。
音频效果: 使用 Web Audio API 的各种节点添加音频效果，如混响、均衡等。
文件上传: 将录制好的 MP3 文件上传到服务器。