H5录音效果 html录音 html5麦克风权限

H5 录音代码

以下demo仅供参考具体备注在代码中可以看到
注意：想要获取音频权限必须要在https环境下运行。可以使用内网穿透等工具达到https的效果
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页录音示例</title>
  <script src="//i2.wp.com/unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
  <script>
    // VConsole 默认会挂载到 `window.VConsole` 上
    var vConsole = new window.VConsole();
    // 接下来即可照常使用 `console` 等方法
    console.log('Hello world');

    // 结束调试后，可移除掉
    // vConsole.destroy();
  </script>
</head>

<body>
  <button id="startRecord">开始录音</button>
  <button id="stopRecord" disabled>停止录音并保存</button>
  <audio controls id="player"></audio>

  <script>

    const startButton = document.getElementById('startRecord');// 开始录音
    const stopButton = document.getElementById('stopRecord');// 停止录音
    const player = document.getElementById('player');// 播放

    let mediaStream;// 音频流
    let recorder;// 录音器

    // 获取用户媒体设备（麦克风）
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
        mediaStream = stream;
        startButton.disabled = false;
        console.log('成功获取音频输入源')
      })
      .catch(err => {
        console.log('无法获取音频输入源', err);
      });

    // 开始录音
    let chunks = [];
    startButton.addEventListener('click', () => {
      // 获取音频流
      recorder = new MediaRecorder(mediaStream);
      // 处理音频数据
      recorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          chunks.push(event.data);
        }
      };
      // 完成录音
      recorder.start();
      // 停止录音
      stopButton.disabled = false;
      startButton.disabled = true;
      console.log('开始录音...');
    });

    // 停止录音并生成文件
    stopButton.addEventListener('click', () => {
      // 停止录音
      recorder.stop();

      startButton.disabled = false;
      stopButton.disabled = true;

      recorder.onstop = () => {
        console.log('录音已停止');
        // 音频类型 ogg webm mp3
        const blob = new Blob(chunks, { type: 'audio/mp3; codecs=opus' });
        // 将录音设置为可播放
        const url = URL.createObjectURL(blob);
        player.src = url;
        console.log('尝试播放录音');
      };
    });
  </script>
</body>

</html>