JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる３までの記事で、 HTML5のWeb Audio APIにあるAnalyzerNodeでマイクから拾った音を周波数データとして取得してみた。 今回はこのデータを使って、 HTML5 Canvasで作成したアニメーションを制御してみる。 はじめに音は関係なく、丸がただ動くだけのアニメーションを作成してみる。 今回は前回のコードのdraw関数のみの修正となるので、 実際に書いたコードもdraw関数のみ...
とにかく速いブログサイトを目指す
JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる３
JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる２ 前回の記事でWeb Audio APIのAnalyzerNodeを使って、マイクで拾った音から周波数データを取得してみた。 実際に取得してみて、ハウリングが発生してという表現が正しいかわからないが、 ファンファンファンという耳が痛くなるような音が鳴り出した。 このハウリング対策として、 マイクから音を拾う際にBiquadFilterというフィルターをかます。 説明の前に実際のコードを書いて...
JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる２
前回のJavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる１で、 数学が弱い生物系出身の自分が無謀ながらコンピュータにおける高速フーリエ変換に触れてしまった。 フーリエ変換と言えば、 世の中を劇的に変えたであろう偉大な数式を挙げろと言われたら必ず出てくるようなもので、 身近でフーリエ変換によって出来たものと言えば、 真っ先に挙がるのが音声データが保存されたCDだろう。 オーケストラのCDをイメージしてみたらしい。 円盤がくるくると周り、 ...
JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる１
JavaScriptのWeb Audio APIで録音してみるでHTML5のAPIを介して、 ブラウザとマイクで音を拾って、wav形式の音声データとして保存してみた。 それを踏まえた上で、 今回はマイクで拾った音を他の処理で使えるように、 音を周波数のデータとして取得してみる。 取得の前に周波数のデータとして取得する為に必要なフーリエ変換について見てみることにする。 といっても生物上がりで数学は得意ではないので、 以後の開発で使える程度の概念程度を自分用のメモとして残す。 ...
JavaScriptのWeb Audio APIで録音してみる
先日、 パソコンの前で手を叩いたら、その音をキッカケにして動作するアプリは作れないかな？ という意見が挙がった。 というわけで、早速調べてみたところ、 HTML5のAPIでWeb Audio APIをいう仕様を見つけた。 Web Audio API - Web API インターフェイス | MDN というわけで、 早速、上記のURLと下記のURLを参考にして録音アプリを作ってみた。 ユーザーから音声データを取得する | Web | Google Developers...