近期公司需要一个页面录音的小功能，因此调研了Web Audio API,因为一直也没怎么做过js开发，期间踩坑无数，在此做一记录，希望能帮到后面有需要的人。
1.Web Audio介绍
Web Audio API 官方文档不但提供了在Web上控制音频的一个非常有效通用的系统，而且提供了大量音频相关的基础知识，对入门音频编程有极大的帮助,允许开发者机型自选音频源,对音频添加特效，使音频可视化，添加空间效果等功能的开发。
一个简单而典型的Web audio流程如下:
- 1.创建音频上下文
- 2.在音频上下文理创建源 例如 振荡器, 流
- 3.创建效果节点，例如混响、双二阶滤波器、平移、压缩
- 4.为音频选择一个目的地，例如你的系统扬声器
- 5.连接源到效果器，对目的地进行效果输出
详细信息请参考官方网站,网站地址:
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API
2.JS this指针说明
开发过程中关于JavaScript this踩了无数坑。在函数调用过程中，this绑定的对象各种出错，因此本节中特意给出JavaScript this 的官方说明.
官方参考文档:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this
3.录音源码Demo
鉴于在开发过程中未找到合适的参考代码，把源码公布如下:
/*!
* Record Javascript Library
*/
'use strict';
/**
* AudioRecorder类.
* @constructor
*/
function AudioRecorder(){
//麦克风
this.mDevice = null;
//从麦克风获取的音频流
this.mMediaStream = null;
this.mAudioContext = null;
this.mAudioFromMicrophone = null;
this.mMediaRecorder = null;
this.mStatus = "stop";
this.mChunks = [];
//回调函数
this.onStopCallBack = null;
}
AudioRecorder.prototype={
/**
* 获取录音机对象设备
* @method getAudioRecorderDevice
* @for AudioRecorder
* @returns {Promise} 返回一个promise对象
*/
getAudioRecorderDevice: function(){
//仅用来进行录音
var constraints = { audio: true};
// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if(navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
if(navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
// 首先，如果有getUserMedia的话，就获得它
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if(!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// 否则，为老的navigator.getUserMedia方法包裹一个Promise
this.mDevice = new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
else
{
this.mDevice = navigator.mediaDevices.getUserMedia(constraints);
}
if(this.mDevice != null)
{
this.mDevice.then((mediaStream) => { this.openDeviceSuccess.call(this,mediaStream) },this.openDeviceFailure);
}
},
addOnStopCallback : function (onStop)
{
this.onStopCallBack = onStop;
},
openDeviceSuccess : function(mediaStream)
{
this.mMediaStream = mediaStream;
},
openDeviceFailure : (reason) =>
{
let errorMessage;
switch(reason.name) {
// 用户拒绝
case 'NotAllowedError':
case 'PermissionDeniedError':
errorMessage = '用户已禁止网页调用录音设备';
break;
// 没接入录音设备
case 'NotFoundError':
case 'DevicesNotFoundError':
errorMessage = '录音设备未找到';
break;
// 其它错误
case 'NotSupportedError':
errorMessage = '不支持录音功能';
break;
default:
errorMessage = '录音调用错误';
window.console.log(error);
}
alert(errorMessage);
},
/**
* 开始录音
* @method startRecord
* @for AudioRecorder
* @return {Boolean}
*/
startRecord : function(){
let retValue = false;
if(this.mStatus == "stop")
{
this.mChunks = [];
if(this.mMediaRecorder == null)
{
const AudioContext = window.AudioContext || window.webkitAudioContext;
this.mAudioContext = new AudioContext();
//创建音频源
this.mAudioFromMicrophone= this.mAudioContext.createMediaStreamSource(this.mMediaStream);
//创建目的节点
var destination = this.mAudioContext.createMediaStreamDestination();
this.mMediaRecorder = new MediaRecorder(destination.stream);
this.mAudioFromMicrophone.connect(destination);
this.mMediaRecorder.ondataavailable = (audioData) => { this.onProcessData.call(this,audioData)};
this.mMediaRecorder.onstop = (event) => { this.onStop.call(this,event)};
}
this.mMediaRecorder.start();
this.mStatus = "record";
retValue = true;
}
return retValue;
},
onProcessData : function(audioData)
{
this.mChunks.push(audioData.data);
},
onStop : function (event)
{
//var blob = new Blob(this.mChunks, { 'type' : 'audio/ogg; codecs=opus' });
var blob = new Blob(this.mChunks, { 'type' : 'audio/mpeg' });
var mp3URL = URL.createObjectURL(blob);
if(this.onStopCallBack != null)
{
this.onStopCallBack(mp3URL);
}
},
/**
* 结束录音
* @method stopRecord
* @for AudioRecorder
*/
stopRecord: function(){
if(this.mStatus == "record")
{
this.mMediaRecorder.requestData();
this.mMediaRecorder.stop();
this.mStatus = "stop";
}
}
}
4.结束语
这次小功能的调研，发现Web Audio API的功能强大，可以完成各种音频处理的工作，后续如果有时间可以写一个页面版的音频应用。
参考:
https://github.com/mdn/webaudio-examples
https://mdn.github.io/webaudio-examples/create-media-stream-destination/
