一文詳解Web Audio瀏覽器采集麥克風音頻數(shù)據

更新時間：2023年03月09日 11:37:19 作者：前端zuker

這篇文章主要為大家介紹Web Audio瀏覽器采集麥克風音頻數(shù)據實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

背景

關于Web Audio，上一篇小編介紹了下，如何通過解析音頻數(shù)據，繪制音頻的頻譜圖，和大家一起初步學習領會了一下Web Audio的強大Api。此篇，小編繼續(xù)探究Web Audio領域，給大家介紹下如何在瀏覽器中進行麥克風音頻數(shù)據的采集。以及如何在采集過程中繪制實時的動態(tài)音頻圖譜。

實現(xiàn)思路

我們仍然先介紹整體思路。采集音頻，首先我們通過navigator.mediaDevices.getUserMedia方法來獲取麥克風并錄制聲音。（navigator是瀏覽器NavigatorID標準接口的一種實現(xiàn)，可以用它來查詢一些關于運行當前腳本的應用程序的相關信息。這里我們不多討論這個對象，只介紹如何借助它錄制音頻）getUserMedia錄制聲音可以獲取到音頻流。然后我們通過Web Audio相關Api將音頻流轉化出實時的音頻數(shù)據。最后通過canvas將實時的音頻數(shù)據繪制成圖譜，通過反復這個過程，實現(xiàn)動態(tài)繪制實時圖譜的效果。整體的流程，如下圖：

獲取麥克風權限，錄制聲音

瀏覽器的安全策略規(guī)定，navigator.mediaDevices.getUserMedia方法只能在https協(xié)議或者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); // 監(jiān)聽8090端口
/*
 * demo2.html
 * 獲取麥克風并錄制聲音
 */
let audioCtx = null; // 音頻上下文
let source = null; // 音頻源
let audioStream = null; // 錄音產生的音頻流
let analyserNode = null; // 用于分析音頻實時數(shù)據的節(jié)點
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();
  }
  // 斷開音頻節(jié)點
  analyserNode.disconnect();
  source.disconnect();
  analyserNode = null;
  source = null;
  // 清除定時器
  clearInterval(animationFrame);
}
// 事件綁定
document.querySelector('#record').onclick = recordSound;
document.querySelector('#stop').onclick = stopRecord;

利用Web Audio Api 處理音頻流數(shù)據

獲取到音頻流之后，我們通過音頻上下文AudioContext，創(chuàng)建音頻源。這里選擇MediaStreamAudioSourceNode，它接收一個MediaStream對象來創(chuàng)建音頻源。然后我們在音頻源和destination中間插入一個音頻節(jié)點，用來獲取及處理音頻數(shù)據，進而利用數(shù)據繪制出波形圖。這里選擇AnalyserNode，當然像ScriptProcessorNode和AudioWorkletNode節(jié)點也能夠實現(xiàn)獲取和處理實時音頻數(shù)據，具體可以參考相關Api。

// 音頻數(shù)據處理
function initAudioData (stream) {
  audioStream = stream;
  // 創(chuàng)建音頻上下文
  audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  // 創(chuàng)建音頻源
  source = audioCtx.createMediaStreamSource(audioStream);
  // 創(chuàng)建音頻分析節(jié)點
  analyserNode = audioCtx.createAnalyser();
  // fftSize決定了能夠獲取到的音頻數(shù)據的數(shù)量
  analyserNode.fftSize = 4096;      
  // 音頻源連接至analyserNode
  source.connect(analyserNode);
  // analyserNode再連接至揚聲器播放
  analyserNode.connect(audioCtx.destination);
  // 簡單用定時器來繪制波形圖，當然也可以用requestAnimationFrame來以屏幕刷新的評率來反復執(zhí)行繪制函數(shù)
  animateFrame = setInterval(drawWaver, 60);
}

實時獲取音頻數(shù)據，繪制波形圖

AnalyserNode創(chuàng)建之后，你可以制定長度，來實時獲取當前時間點的音頻時域數(shù)據，然后通過定時器或者requestAnimationFrame的回調來反復獲取數(shù)據、執(zhí)行繪制函數(shù)來達成動態(tài)波形圖的效果。繪制方式，同樣是通過一個Float32Array數(shù)組對象來接收音頻時域數(shù)據，（數(shù)值范圍在-1到1之間）然后對數(shù)據進行采樣，這里我們每12條數(shù)據，取一個最大值一個最小值來繪制圖形。

// 繪制圖形
function drawWaver () {
  const originData = new Float32Array(analyserNode.fftSize);
  const positives = [];
  const negatives = [];
  // 獲取當前的實時音頻數(shù)據
  analyserNode.getFloatTimeDomainData(originData);
  // 每12位數(shù)據取一個最大值一個最小值 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));
  }
  // 創(chuàng)建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的位置，橫坐標上方繪制正數(shù)據，下方繪制負數(shù)據
    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]));
    }
  }
}

這樣，簡單的音頻采集以及實時圖譜的繪制就完成了。最后，貼一下效果圖：