一文详解WebAudio浏览器采集麦克风音频数据

// 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端口

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;

// 音频数据处理
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);
}

// 绘制图形
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]));
    }
  }
}