jsでの音データの使い方メモ

音データを使って、ビジュアル表現をしたかったので音データのとり方を調べました。

AnalyserNode

AnalyserNodeクラスは、リアルタイム時間領域/周波数領域分析情報を表現することが出来る為、サウンドの視覚化の為に利用できます。

AnalyserNodeのインスタンス化

インスタンス化の方法は、以下になります。

var context = new AudioContext();
var analyser = context.createAnalyser();

AnalyserNodeのプロパティ

key	説明
fftSize	フーリエ変換を行う分割数。2の乗数でなくてはならない
frequencyBinCount	fftSizeプロパティの1 / 2の値
minDecibels	getByteFrequencyDataメソッドで取得可能なデシベルの下限
maxDecibels	getByteFrequencyDataメソッドで取得可能なデシベルの上限
smoothingTimeConstant	周波数領域の波形 (振幅スペクトル) 描画に関連するプパティ。時間的にスペクトルを平滑化させるのに用いられる。
getByteTimeDomainData(array)	時間領域の波形データを取得するメソッド
getByteFrequencyData(array)	周波数領域の波形データ (振幅スペクトル) を取得するメソッド
getFloatFrequencyData(array)	周波数領域の波形データ (振幅スペクトル) をデシベル単位で取得するメソッド

参考:Web Audio API 解説

デシベル

デジベルとは音の強さのことです。普通の会話が60デシベル。電車内が80デシベルと言われています。人が聞こえるギリギリの音を0デシベルとして基準にしているようです。

フーリエ変換

音をビジュアル化するにはフーリエ変換を行う事が必要みたいです。そもそもフーリエ変換とは何かしれべてみたのですが、イマイチ理解できませんでした。

簡単に言うと

時間領域を周波数領域に変換してあげること。変換することで音データの波形にどの周波数成分の値が多く含まれているのかを視覚的にわかりやすくすることができるようです。

みたいな感じでしょうか。

Kobito.Jgij6a.png

とにかく扱いやすくしてくれるみたいです。

使い方

//audio関連の変数
let context;
let analyser;
let bufferLength;
let dataArray;
let source;
let fftSize;

context = new AudioContext();
analyser = context.createAnalyser();
analyser.minDecibels = -90; //最小値
analyser.maxDecibels = 0; //最大値
analyser.smoothingTimeConstant = 0.65;
analyser.fftSize = fftSize; //音域の数

bufferLength = analyser.frequencyBinCount; //fftSizeの半分のサイズ
dataArray = new Uint8Array(bufferLength); //波形データ格納用の配列を初期化
analyser.getByteFrequencyData(dataArray); //周波数領域の波形データを取得

//マイクの音を取得
navigator.webkitGetUserMedia({
    audio: true
  },
  function (stream) {
    source = context.createMediaStreamSource(stream);
    // オーディオの出力先を設定
    source.connect(analyser);
  },
  function (err) {
    console.log(err);
  }
);

getData();

function getData(){

  //データを取得
  analyser.getByteFrequencyData(dataArray);
  
  console.log(dataArray);
  
  // animation
  requestAnimationFrame(getData);
}

実際にマイクの音を取ってオブジェクトを動かしてみました。

サンプル

まとめ

音データはなかなか奥が深いです。

参考

SoundJSを使って音を見えるものへ―CreateJS勉強会

のぐそんブログ

暗いおじさんがシコシコ書くブログです。