【MediaRecorder】音频处理：探索MediaRecorder API的应用与技巧

😁 作者简介：一名大四的学生，致力学习前端开发技术
⭐️个人主页：夜宵饽饽的主页
❔ 系列专栏：JavaScript小贴士
👐学习格言：成功不是终点，失败也并非末日，最重要的是继续前进的勇气

​🔥​前言：

这是我自己整理的音频学习的笔记,前端在录取音频文件，无论如何都绕不完MediaRecorder这个API接口,了解这个接口有助于我们对音频文件的处理,希望可以帮助到大家，欢迎大家的补充和纠正

前端音频API

MediaRecorder对象

前提

🌟要录取用户声音或者视频，是需要用户授权的，用户有权对自己的设备控制权，所以我们要使用一个网页的API来提示用户给予使用媒体输入的许可MediaDevices.getUserMedia()
语法：

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

参数：
1、constrains：是一个包含了video 和 audio两个成员的MediaStreamConstraints 对象，用于说明请求的媒体类型
❗** 注意：必须至少一个类型或者两个同时可以被指定，不然Promise对象就会处于失败的状态**

audio和video属性值可以为布尔类型，也可以是对象类型

• 布尔类型：{ audio: true, video: true },就表示得到的结果的流中就需要有此种类型的轨道
• 对象类型：{video:{width:1280,height:720},表示录取视频的时候需要使用1280x720的摄像头分辨率

返回值：
返回一个Promise，这个Promise成功后的回调函数带一个MediaStream对象作为其参数。

概念

MediaRecorder()构造函数会创建一个对指定的MediaStream进行录制的MediaRecorder对象

语法

var mediaRecorder=new MediaRecorder(stream,[,options]))

参数

• stream将要录制的数据流，可以来自于使用navigator.mediaDevices.getUserMedia创建的流或者来自于<audio>,<video>,<canvas>DOM元素。
• options：一个字典东西，它包含以下属性
  • mimeType：为新构建的MediaRecorder指定录制容器的MIME类型，在应用中通过调用MediaRecorder.isTypeSupported()来检查浏览器是否支持此种mimeType，常见的值有以下几种
    • audio：wav,mp3,ogg,mpeg - 值格式：audio/wav
    • video：mp4,webm,ogg,mpeg - 值格式：video/mp4
  • audioBitsPerSecond：指定音频的比特率
  • videoBitsPerSecond：指定视频的比特率
  • bitsPerSecond：指定音频和视频的比特率，此属性可以用来指定上面两个属性。如果上面两个属性只有其中之一和此属性被指定，则此属性可以用于设定另外一个属性

实例属性

1. audioBitrateMode：音频的比特率
2. audioBitPerSecond：
3. mimeType：录制的类型，决定生成的音频或者视频文件的格式
4. state：表示录制器的状态，它可以有以下三种状态，inactive:处于空闲，recording：录制正在进行中，paused：录制处于暂停状态
5. stream：数据流
6. videoBitsPerSecond：视频的比特率

静态方法

1、isTypeSupported()

概念：判断其MIME格式能否被客户端录制
参数：

• mimeType：需要检查的MIME格式

返回值：如果MediaRecorder在浏览器上的具体实现能够支持指定MIME类型的Blob对象就会返回true，如果没有足够的资源来录制和编码任务，最终录制依然会失败，如果返回结果是false，用户的浏览器就无法录制指定的格式

实例方法

1、pause()

用于暂停录制音频或视频数据，但不停止或结束录制过程，录制器的状态属性state将会变为paused的状态

2、resume()

用于恢复录制，继续录制音频或视频数据，会从暂停的位置继续录制，录制起的状态属性state将会变为recording

3、requestDate()

该方法用于手动请求和获取已经录制的音频或者视频数据调用该方法时，MediaRecorder会立即生成一个包含当前已经录制的Blob对象，并触发dataavailable事件，从而可以获取录制的音频或视频数据

4、MediaRecorder.start()

该方法用于开始录制音频或视频，并将数据保存到指定的文件或数据流

🍄注意：在MDN文档中这个方法可以传递一个参数timeslice，用于将文件分割为一个单独的区块，这个方法分割的媒体文件会有一些问题，大概解释就是媒体文件有两种数据一种是元信息，另外一种是数据，只有当这两种数据同时存在的时候，媒体文件才可以播放，但是分割出来的区块会导致元信息的丢失，所以录制的媒体文件区块，只有第一个文件可以正常播放，其他的文件会无法播放

5、MediaRecord.stop()

该方法会停止录制，同时触发datavailable事件，返回一个存储Blob内容的录制数据，之后不再记录

事件处理

1、MediaRecorder.ondataavailable

概念：调用它用来处理datavailable事件，该事件可用于获取录制的媒体资源（在事件的data属性中会提供一个可用的Blob对象）
语法：

MediaRecorder.ondataavailable = function(event) {
      // 将数据块（Blob）存储到 chunks 数组中
    chunks.push(event.data);
}
MediaRecorder.addEventListener('dataavailable', function(event) { ... })

触发情况：

• 媒体流结束时，所有尚未传递到ondatavailbable处理程序的媒体数据都将在单个Blob中传递
• 当调用MediaRecorder.stop()时，自记录开始或datavailable事件最后一次发生以来已捕获的所有媒体数据都将传递到Blob中，此后捕获结束。
• 调用MediaRecorder.requesData()时，将传递自记录开始或事件最后一次发生以来捕获的所有媒体数据，然后Blob创建一个新文件，并将媒体捕获继续到该blob中。
• 如果为stop方法设置timeslice属性，datavaliable则每timeslice毫秒触发一次事件

2、MediaRecorder.onerror

发生错误时，会触发MediaRecorder接口的error事件：例如，因为不允许录制或尝试使用不受支持的编解码进行录制。
此事件不可取消，也不会起泡
语法：

addEventListener("event",(event)=>{});

onevent=(event)=>{}

错误名的含义：

• SecurityError：表示MediaStream被配置为不允许录制，例如，当用户拒绝使用使用输入设备的权限时，使用getUserMedia()获得的源可能就是这种情况。
• InvalidModificationError：表示正在录制的流中的曲目发生了变化，录制媒体时，您无法添加和删除曲目
• UnknownError:发生了与安全无关的错误，无法进行其他的分类。

3、MediaRecorder.onpause

用来处理pause事件的，该事件在媒体暂停录制时触发
语法：

mediaRecorder.onpause = function(event) {
    console.log('录制已暂停');
};

4、MediaRecorder.onresume

用来处理resume事件，该事件在暂停后回复录制视频时触发
语法：

mediaRecorder.onresume=function(event){
    console.log('录制继续')
}

5、MediaRecorder.onstart

用来处理start事件，该事件在媒体开始录制时触发
语法：

mediaRecorder.onstart=functino(event){
    console.log('录制开始')
}

6、MediaRecorder.onstop

用来处理stop事件，该事件会在媒体录制结束时，媒体流结束时，或者调用MediaRecorder.stop()方法后触发

mediaRecorder.onstop = function(event) {
    console.log('录制已暂停');
};