如何调用浏览器录音功能，加生成.wav

崛起的帝皇蟹

已于 2023-10-16 09:48:49 修改

阅读量1.2k

点赞数 3

分类专栏： JavaScript 文章标签： html5 javascript 前端

于 2023-04-24 20:44:39 首次发布

本文链接：https://blog.csdn.net/m0_65629667/article/details/130351101

版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

该文章展示了如何在网页上实现录音功能，通过调用window.navigator.mediaDevices.getUserMedia获取用户音频权限，然后利用MediaRecorder进行录音。当用户点击开始和结束按钮时，会触发录音和停止录音的操作。录音结束后，数据流会被转换为Blob对象并生成一个.wav文件供用户下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现思路

首先写一个立即调用函数，通过调用window.navigator.mediaDevices.getUserMedia获取用户同意权限，获取之后返回权限数据创建MediaRecorder返回给他，做一个记录操作数据

HTML

<div id="startRecord">点我录音</div>
<div id="topRecord">结束录音</div>

1.获取用户权限

    //页面加载完毕后调用
    const stream = await (async function () {
          if (window.navigator.mediaDevices.getUserMedia) {
            return await window.navigator.mediaDevices
              .getUserMedia({ audio: true })
              .then((mediaStream) => {
                //以拥有录音权限 返回出去
                return mediaStream;
              })
              .catch((err) => {
                console.log("拒绝", err);
              });
          } else {
            console.error("浏览器不支持 getUserMedia");
          }
        })();

2.获取事件按钮

  const recordBtn = document.querySelector("#startRecord");//点击开始
  const topRecord = document.querySelector("#topRecord"); // 点击结束
  const mediaStream = new MediaRecorder(stream); // 注册实例化

3开始录音

recordBtn.onclick = function () {
          mediaStream.start();
          console.log("录音中...");
          console.log(mediaStream.state);
 };

4.结束录音

 topRecord.onclick = function () {
          if (mediaStream.state === "recording") {
            mediaStream.stop();
            console.log("录音结束");
            console.log(mediaStream.state);
          }
};

5.结束后调 mediaStream.ondataavailable 获取数据流生成wav文件

mediaStream.ondataavailable = function (value) {
          mediaStream.onstop = function () {//点击stop结束后
            let blob = new Blob([value.data], { type: "audio/ogg; codecs=opus" });
            console.log("blob: ", blob);
            var audioURL = URL.createObjectURL(blob);
            let a = document.createElement("a"); // 创建一个a标签
            a.href = audioURL;
            a.download = Date.now() + ".wav"; //下载文件
            a.click(); // 创建点击事件
          };
};

最后附上全部源码

<!DOCTYPE html>
<html>
<body>
    <div>
      <button id="startRecord">点我录音</button>
      <button id="topRecord">点我结束录音</button>
    </div>

    <script>
      window.onload = async function () {
        // 立即执行函数 获取用户权限
        const stream = await (async function () {
          if (window.navigator.mediaDevices.getUserMedia) {
            return await window.navigator.mediaDevices
              .getUserMedia({ audio: true }) // audio开启获取录音权限
              .then((mediaStream) => {
                //以拥有录音权限 返回出去
                return mediaStream;
              })
              .catch((err) => {
                console.log("拒绝", err);
              });
          } else {
            console.error("浏览器不支持 getUserMedia");
          }
        })();
        const recordBtn = document.querySelector("#startRecord");//点击开始
        const topRecord = document.querySelector("#topRecord"); // 点击结束
        const mediaStream = new MediaRecorder(stream); // 注册实例化
       
        //录音开始
        recordBtn.onclick = function () {
          mediaStream.start();
          console.log("录音中...");
          console.log(mediaStream.state);
        };
        // 结束录音
        topRecord.onclick = function () {
          if (mediaStream.state === "recording") {
            mediaStream.stop();
            console.log("录音结束");
            console.log(mediaStream.state);
          }
        };
        mediaStream.ondataavailable = function (value) {
          mediaStream.onstop = function () {
            let blob = new Blob([value.data], { type: "audio/ogg; codecs=opus" });
            console.log("blob: ", blob);
            var audioURL = URL.createObjectURL(blob);
            let a = document.createElement("a"); // 创建一个a标签
            a.href = audioURL;
            a.download = Date.now() + ".wav"; //下载文件
            a.click(); // 创建点击事件
          };
        };
      };
    </script>
  </body>
</html>