交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • JavaScript实现页面中录音功能的方法

    前言

    页面中实现录音需要使用浏览器提供的 Media​Recorder API,所以前提是需要浏览器支持 MediaStream Recording 相关的功能。

    以下代码默认工作在 Chrome 环境中。

    准备页面

    首先准备一个页面,其中内容很简单,一个录音按钮,一个用于播放的 <audio> 标签。

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>audio record</title>
    </head>
    <body>
     <div class="app">
      <button class="record-btn">record</button>
      <audio controls class="audio-player"></audio>
     </div>
     <script src="./recorder.js"></script>
    </body>
    </html>

    获取录音权限

    因为录音需要使用设备的话筒,所以第一步应该是向用户索要录音的权限。这是通过 Media​Devices​.get​User​Media()
    来完成的,其用法为:

    var promise = navigator.mediaDevices.getUserMedia(constraints);

    其中 constraints 为需要获取的权限列表,这里只需要指定音频 audio 即可。

    其返回是个 Promise,因为用户何时进行授权是不确定的。通过在 Promise 的回调中进行授权成功或失败的处理。

    在使用前需要判断浏览器是否已经支持相应的 API,此时得到如下的代码:

    if (navigator.mediaDevices.getUserMedia) {
     const constraints = { audio: true };
     navigator.mediaDevices.getUserMedia(constraints).then(
     stream => {
      console.log("授权成功!");
     },
     () => {
      console.error("授权失败!");
     }
     );
    } else {
     console.error("浏览器不支持 getUserMedia");
    }

    其中成功回调里得到的入参 stream 为 MediaStream 对象。

    此时运行后可看到浏览器展示出了让用户授权使用麦克风的提示。

    向用户索要麦克风使用权限

    创建录音实例

    将上一步获取到的 MediaStream 传入 Media​Recorder 的构造器创建一个录音器的实例。

    var mediaRecorder = new MediaRecorder(stream);

    启动录音

    通过监听页面中录音按钮的点击来启动录音。

    const recordBtn = document.querySelector(".record-btn");
    const mediaRecorder = new MediaRecorder(stream);
    recordBtn.onclick = () => {
     mediaRecorder.start();
     console.log("录音中...");
    };

    MediaRecorder 实例上有个 state 状态,可用来判断录音器当前的活动状态,总共有三种值:

    • inactive:处于休息状态,要么是没开始,要么是开始后已经停止。
    • recording:录音中
    • paused:已经开始,但被暂停了,不是停止也没有被恢复。

    所以通过这个状态,我们可以实现再次点击按钮时,结束录音。

    recordBtn.onclick = () => {
     if (mediaRecorder.state === "recording") {
      mediaRecorder.stop();
      recordBtn.textContent = "record";
      console.log("录音结束");
     } else {
      mediaRecorder.start();
      console.log("录音中...");
      recordBtn.textContent = "stop";
     }
     console.log("录音器状态:", mediaRecorder.state);
    };

    音频数据的获取

    上面按钮处理来自用户的交互,只负责启动或停止录音。音频的数据还是从 Media​Recorder 实例上通过监听其相应的事件来完成的。

    当录音开始时,会触发其 MediaRecorder.ondataavailable 事件,从该事件回调的入参为 BlobEvent,从它身上取到 event.data 便是我们需要的音频数据。因为数据是一段一段产生的,所以需要暂存到一个数组中。

    const chunks = [];
    mediaRecorder.ondataavailable = function(e) {
     chunks.push(e.data);
    };

    目前为止完成的代码应该是这样的:

     recorder.js

    录音状态的查看

    录音结束及音频的播放

    通过监听 MediaRecorder.onstop 事件,将收集好的音频数据创建成Blob 对象,然后 通过 URL.createObjectURL 创建成 HTML 中 <audio> 标签可使用的资源链接。

    mediaRecorder.onstop = e => {
     var blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
     chunks = [];
     var audioURL = window.URL.createObjectURL(blob);
     audio.src = audioURL;
    };

    其中,在使用完收到到的音频数据后,将 chunks 置空方便下次录音时使用。

    目前为止完成的代码应该是这样的:

     recorder.js

    运行

    完成上面步骤后,实现了一个简单的录音功能,可通过此地址在线体验。完整的代码可在仓库 wayou/audio-recorder 中获取到。

    相关资源

    • Media​Recorder
    • MediaRecorder.onstop
    • URL.createObjectURL

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对北冥有鱼的支持。

    您可能感兴趣的文章:

    • 基于JS实现web端录音与播放功能
    • 微信开发之微信jssdk录音功能开发示例
    • 基于JS开发微信网页录音功能的实例代码

    广而告之:
    热门推荐:
    用HTML5实现手机摇一摇的功能的教程

    在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:1、  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如···

    精心收集的jQuery常用的插件1000

    1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal accordion: jQuery 热点图书:www.hotbook.cn jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion。 jQuery-Horizontal Accordion jQuery plugin: Accordion 用于创···

    jQuery 常见小例汇总

    1 //这段代码展示了在用户未输入值时, //如何在文本类型的input域中保留 //一个默认值 wap_val = []; $(".swap").each(function(i){ wap_val[i] = $(this).val(); $(this).focusin(function(){ if ($(this).val() == swap_val[i]) { $(this).val(""); } }).focusout(function···

    Hibernate Oracle sequence的使用技巧

    一、为表创建自增长自段有两种,一种是不同的表使用各自的Sequence,方法如下:   1、在Oracle sequence首先创建sequence   create sequence seq_idminvalue 1start with 1increment by 1cache 20;   2、在你的hbm.xml中的配置   seq_id   这样再插入数据的时候,Hi···

    php数据入库前清理 注意php intval与mysql的int取值范围不同

    php保存数据到mysql 打算在dao层进行数据入库前的清理,比如varchar进行trim,int进行intval。 有一天突然想起,php intval的取值范围与mysql的int类型一样吗? 查了一下,不一样…… http://php.net/manual/en/function.intval.phphttp://dev.mysql.com/doc/refman/5.1/zh···

    AngularJS的依赖注入实例分析(使用module和injector)

    本文实例分析了AngularJS的依赖注入。分享给大家供大家参考,具体如下: 依赖注入(DI)的好处不再赘言,使用过spring框架的都知道。AngularJS作为前台js框架,也提供了对DI的支持,这是JavaScript/jQuery不具备的特性。angularjs中与DI相关有angular.module()、angular.inject···

    微信小程序6位或多位验证码密码输入框功能的实现代码

    在做小程序过程中做一个6位验证码输入框,本以为很简单,但是在写的时候遇到各种各样的阻力,在网上查阅资料也寥寥无几,后来经过一番思考,终于敲定下来本人最满意的方案,特意发出来让大家参考一下,希望能帮到大家! 一、效果图如下: 二、代码部分 wxml: <form b···

    PHP学习 变量使用总结

    1.定义常量define("CONSTANT", "Hello world."); 常量只能包含标量数据(boolean,integer,float 和 string)。 调用常量时,只需要简单的用名称取得常量的值,而不能加“$”符号,如:echo CONSTANT; 注: 常量和(全局)变量在不同的名字空间中。这意味着例如 TRUE 和 $···

    JavaScript实现水平进度条拖拽效果

    本文实例为大家分享水平进度条拖拽效果的js具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .scroll{ mar···

    常见php与mysql中文乱码问题解决办法

    乱码问题1:用PHPmyAdmin操作MySQL数据库汉字显示正常,但用PHP网页显示MySQL数据时所有汉字都变成了?号。 症状:用PHPmyAdmin输入汉字正常,但当PHP网页显示MySQL数据时汉字就变成了?号,并且有多少个汉字就有多少个?号。 原因:没有在PHP网页中用代码告诉MySQ···