Web Audio-Browser 采集microphone 音频数据

　　Web Audio-Browser 采集microphone 音频数据

　　背景

　　关于Web Audio，上期小编介绍了如何解析音频数据和绘制音频频谱图，和大家一起初步了解Web Audio强大的API。在本文中，小编继续探索Web Audio领域，我将向您介绍采集如何在浏览器中执行麦克风音频数据。以及如何在采集过程中绘制实时动态音频频谱。

　　实施思路

　　我们还是先介绍一下整体思路。 采集音频，首先我们通过navigator.mediaDevices.getUserMedia方法获取麦克风并录制声音。 （Navigator是浏览器的NavigatorID标准接口的实现，你可以用它来查询当前运行脚本的应用程序的一些相关信息。这里不讨论这个对象，只介绍如何使用它来录制音频） getUserMedia 可以用于录制声音 获取音频流。然后我们使用 Web Audio 相关的 API 将音频流转换为实时音频数据。最后通过canvas将实时音频数据绘制成地图，重复这个过程就达到动态绘制实时地图的效果。大体流程如下：

　　

　　获得麦克风权限，录音

　　浏览器的安全策略规定navigator.mediaDevices.getUserMedia方法只能在https协议或localhost域名下有效。所以这里我们先用node搭建一个极简版的本地web服务器，然后获取麦克风权限，录音。

　　// server.js

const http = require('http');

const path = require('path');

const fs = require('fs');

http.createServer((request, response) => {

// 请求体

console.log(new Date(), ':', JSON.stringify(request));

// 需要加载的html文件

const file = path.resolve(__dirname, './demo2.html');

// 判断文件是否存在

fs.exists(file, exists => {

if(!exists) console.log ('文件不存在，沙雕！');

else {

response.writeHeader(200, { "Content-Type" : "text/html" });

response.end(fs.readFileSync(file, 'utf-8'));

}

});

}).listen(8090); // *敏*感*词*8090端口

/*

* demo2.html

* 获取麦克风并录制声音

*/

let audioCtx = null; // 音频上下文

let source = null; // 音频源

let audioStream = null; // 录音产生的音频流

let analyserNode = null; // 用于分析音频实时数据的节点

let animationFrame = null; // 定时器

function recordSound () {

navigator.mediaDevices

.getUserMedia({ 'audio': true })

.then(initAudioData)

.catch(e => {

console.log('出问题了，沙雕:', e);

});

}

// 停止录制

function stopRecord () {

// 关闭麦克风

const tracks = audioStream.getAudioTracks();

for (let i = 0, len = tracks.length; i < len; i++) {

tracks[i].stop();

}

// 断开音频节点

analyserNode.disconnect();

source.disconnect();

analyserNode = null;

source = null;

// 清除定时器

clearInterval(animationFrame);

}

// 事件绑定

document.querySelector('#record').onclick = recordSound;

document.querySelector('#stop').onclick = stopRecord;

复制代码

　　使用 Web Audio Api 处理音频流数据

　　获取音频流后，我们使用音频上下文AudioContext来创建音频源。这里选择MediaStreamAudioSourceNode，它接收一个MediaStream对象来创建一个音频源。然后我们在音频源和目的地之间插入一个音频节点来获取和处理音频数据，然后利用这些数据绘制波形图。此处选择了 AnalyserNode。当然，像 ScriptProcessorNode 和 AudioWorkletNode 这样的节点也可以实现实时音频数据的采集和处理。详情请参考相关API。

　　// 音频数据处理

function initAudioData (stream) {

audioStream = stream;

// 创建音频上下文

audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// 创建音频源

source = audioCtx.createMediaStreamSource(audioStream);

// 创建音频分析节点

analyserNode = audioCtx.createAnalyser();

// fftSize决定了能够获取到的音频数据的数量

analyserNode.fftSize = 4096;

// 音频源连接至analyserNode

source.connect(analyserNode);

// analyserNode再连接至扬声器播放

analyserNode.connect(audioCtx.destination);

// 简单用定时器来绘制波形图，当然也可以用requestAnimationFrame来以屏幕刷新的评率来反复执行绘制函数

animateFrame = setInterval(drawWaver, 60);

}

复制代码

　　实时获取音频数据并绘制波形图

　　AnalyserNode创建后，可以指定长度实时获取当前时间点的音频时域数据，然后通过定时器或requestAnimationFrame回调重复获取数据并执行绘制函数来实现动态波形图的效果。绘制方法也是通过一个Float32Array数组对象（取值范围在-1到1之间）接收音频时域数据，然后对数据进行采样。这里我们每12条数据取一个最大值和一个最小值来绘制Graphic。

　　// 绘制图形

function drawWaver () {

const originData = new Float32Array(analyserNode.fftSize);

const positives = [];

const negatives = [];

// 获取当前的实时音频数据

analyserNode.getFloatTimeDomainData(originData);

// 每12位数据取一个最大值一个最小值 4096 / 12 = 341.3333

for (let i = 0; i < 341; i++) {

let temp = originData.slice(i * 12, (i + 1) * 12);

positives.push(Math.max.apply(null, temp));

negatives.push(Math.min.apply(null, temp));

}

// 创建canvas上下文

let canvas = document.querySelector('#canvas');

if (canvas.getContext) {

let ctx = canvas.getContext('2d');

canvas.width = positives.length * 4;

let x = 0;

let y = 100;

ctx.fillStyle = '#fa541c';

// canvas高度200，横坐标在canvas中点100px的位置，横坐标上方绘制正数据，下方绘制负数据

for (let k = 0; k < positives.length; k++) {

// 每个矩形宽3px，间隔1px，图形总长度即为 length * 4

ctx.fillRect(x + 4 * k, y - (100 * positives[k]), 3, 100 * positives[k]);

ctx.fillRect(x + 4 * k, 100, 3, 100 * Math.abs(negatives[k]));

}

}

}

复制代码

　　这样，简单的音频采集和实时图形绘制就完成了。最后贴一下效果图：