Javascriptで音量ビジュアライザー

Javascriptで音量ビジュアライザー

Javascriptで音量ビジュアライザー

ひょうんなことから、音量ビジュアライザー(と呼ぶのかは不明)を作ってみたので、記事にしてみます。

javascriptでAnalyserNodeを解説した記事はちらほらあるのですが、動作まで確認できるサンプルが少なかったので、参考になれば幸いです。

サンプル

何はともあれサンプルです。
Audio Visualiser サンプル

ちなみに、Chrome以外では正常に動作しません。

解説

今回作成したサンプルでは、マイクから取得したstreamをaudioデータとして利用しています。

マイクからstreamを取得するところから順を追って解説してみます。

*サンプルのブラウザソースをベースに開設します。

マイクの接続

383行目:navigator.mediaDevices.getUserMedia() を利用してカメラとマイクにアクセスします。

このドメインでマイク・カメラを利用したことがないときはデバイスへのアクセスを確認するメッセージが表示されます。

第1引数ではマイク・カメラそれぞれが複数ある場合を考慮して、deviceIdを指定できるようにしています。

ユーザに許可されて、デバイスに無事にアクセスできた時は第2引数に指定した関数がコールバックされます。

ブロックや何かしらの理由でデバイスにアクセスできないときは第3引数に指定した関数がコールバックされます。

navigator.mediaDevices.getUserMedia()の詳細は下記を参考にしてください。

MDN Web Docs: MediaDevices.getUserMedia()

streamの取得

407行目:navigator.mediaDevices.getUserMedia()が成功すると、第2引数で指定した関数にstreamが渡されます。
このstreamを利用して音量をビジュアライズします。

音量のビジュアライズにはvisualizer()という関数を定義しています。

visualizer()

427行目:successMedia()の処理の中でvisualizer(localStream)をコールしています。

626行目:visualizer(audioData)を定義しています。
この関数では実際にはビジュアライズするための準備しています。

AudioContextからAnalyserNodeを取得

629行目:AudioContextからAnalyserNodeを取得しています。
このAnalyserNodeが今回のサンプルの肝となります。

AnalyserNodeはその名の通り、分析情報を提供するAPIです。
詳細は下記を参考にするとよいです。

MDN Web Docs: AnalyserNode

MediaStreamAudioSourceNodeを取得

632行目:AudioContextを利用してMediaStreamAudioSourceNodeを取得します。
*MediaStreamAudioSourceNodeは長いので以降はAudioSourceNodeと表現します。

このAudioSourceNodeを基にAnalyserNodeを利用して音量を取得します。

AudioContext.createMediaStreamSource()およびMediaStreamAudioSourceNodeの詳細は下記を参考にしてください。

MDN Web Docs: AudioContext.createMediaStreamSource()

AudioSourceNodeとAnalyserNodeを接続

633行目:AudioSourceNodeのconnect()メソッドを使ってAnalyserNodeと接続しています。

マイクデバイスから取得したAudioSourceNodeとAnalyserNodeを接続することで、マイクに入力した音量を分析することができるようになります。

AnalyserNodeから音量を取得して描画

661行目:getVolume()で音量を取得するための処理を定義しています。
AnalyserNodeを利用した音量の取得処理はこの中にまとめています。

640行目:音量の描画処理する関数visualizeRender()を定義しています。
この関数はrequestAnimationFrame()を利用してアニメーションを実現してます。

今回は20段階で音量を表現していて、音量メータが動くことを目的としているため100を上限に切り捨てています。

まとめ

まだ、音声データの扱いを完全に把握したわけではないですが、AnalyserNodeを利用することで音を視覚化する方法を学べて、とても有意義な実装ができて大満足でした!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする