Webで使える録音解析アプリ「SpectLab」の使い方

　WATLABブログでこれまで扱ってきた音声処理系のコードをもとに、Webアプリ「SpectLab」を公開しました。SpectLabは、インストール不要でブラウザだけで使える録音・音声解析アプリです。録音した音をリアルタイムにスペクトログラム表示し、音の特徴を視覚的に確認できます。この記事では、SpectLabの基本的な使い方をチュートリアル形式で紹介します。

　SpectLabのURLはこちらです。是非皆さんも使ってみてください。使い方はこのページで説明します。
・https://spectlab-watlab.com/recording

　要望やバグ報告は以下のGitHub、もしくはXのDM、この記事のコメント欄等のいずれかでお願いします。
・https://github.com/watlablog/spectlab

SpectLabの構想

自分のデバイスを音の測定機とする

　2019年のWATLABブログ立ち上げ当初から当ブログは音声処理を自分で書いてみたいという動機からはじまっています。2019年のうちに以下記事で音声処理の一つの目標であったスペクトログラムの自作コーディングを行い、その後は色々な形でアプリ化を目指していました（当時は生成AIもなかったので色々苦労しました）。
・Pythonで音のSTFT計算を自作!スペクトログラム表示する方法

　目指していた形としては、今や誰でも持っているスマホやPCを音の測定機とするものでした。何か気になる音を聞いたときに、サッと自分のデバイスを取り出して専門的な音の分析ができたらいいな〜というモチベーションがずっと続いていました。今回はWebアプリという形でイメージに近いものができたということで記事にしました。

基本的な機能を無料で提供する

　誰にとっても使いやすいアプリにするために、録音・音声分析・ファイルの保存と読み込みといった基本機能は無料にする構想です。そのためこれらの機能をフロントエンドのみで実装し、バックエンドにデータを渡さない構成を意識しました。
　バックエンドにデータを渡すという処理自体がリアルタイム性を損なう懸念がありますが、それ以外にも例えばFirebaseでバックエンドをつくろうとすると無料枠は大きいもののユーザーの使用量によっては従量課金が発生します。レンタルサーバーでもバックエンドをがっつり作ろうとすると年額がちょっと高くなります。まずは最低限のレンタルサーバー代とドメイン代を勉強代として色々やっていきたいと思います。

SpectLabの機能紹介

録音とリアルタイムスペクトログラム解析

　ページ上部にある RecordボタンをクリックするとPCやスマホのマイクで音声の録音が開始されます。次の動画は録音とリアルタイムスペクトログラム表示のデモです。録音を止めたい時は Stopボタンを押してください。表示範囲は10[s]固定です。10[s]を超える音声は先に録音されたデータから切り捨てられます。

　初回録音時にマイク使用の許可を求められます。また、iPhone等のモバイルでは一度「許可しない」を選択するとその後リロードしてもマイクの使用ができない場合があります。その場合はアプリのブラウザの設定から手動でマイクの使用を許可してください。

　 Stopで録音停止させてから再度 Recordで録音すると、続きのデータとして音声が蓄積されます。異なる音声を比較したいときに便利です。

　スペクトログラムは横軸時間[s]、縦軸周波数[Hz]、色が振幅[dB]を表します。この画像1つだけで音の振幅（大きさ）と周波数（高さ）が時間でどのように変化しているかが一目瞭然です。製品の研究開発や生産現場で音の分析をする人や、科学捜査で声紋を分析する人もこのスペクトログラムを日ごろ見ています。

　スペクトログラムの計算方法や見方についての詳細は以下の記事をご確認ください。
・Pythonで音のSTFT計算を自作!スペクトログラム表示する方法

軸範囲設定変更

　モバイルやタブレットでも操作しやすいように、時間・周波数・振幅の軸設定はスライドバーで変更可能です。

　軸設定は再生ボタン Playの下にある数値入力欄に直接キーボードで数値を入力することでも変更可能です。キリのいい数値を入力したい場合はこちらを使用してください。

音声再生

　スペクトログラムの下に配置されている Playボタンをクリックすると音声が再生されます。再生範囲は時間軸の範囲のみです。好きな位置に範囲を絞って再生したい場合は、時間軸の範囲をスライドバーで調整してみてください。

FFT分析

　スペクトログラムのグラフ内でマウスクリック（もしくはタップ）すると、黄色いカーソルが表示されます（黄色いカーソルの初期位置はグラフの右端にあります）。画面を下にスクロールすると横軸周波数[Hz]、縦軸振幅のFFT波形が表示されています。このFFT波形は黄色いカーソルの位置で時間方向にスライスした周波数波形です。
　また、 Average FFTボタンを有効にするとスペクトログラムに2本のカーソルが出現します。 Average FFTを有効にしている間はこの2本のカーソルで挟まれた範囲の平均化FFT結果がFFT波形のグラフに表示されます。平均化FFTはノイズの多い信号で一定の時間範囲を平均化することで、繰り返し発生している信号を精度よく分析するためのテクニックです。
　再度 Average FFTをクリックするとこの機能が無効化され、スペクトログラムにはシングルカーソルが表示されるようになります（黄色いシングルカーソルの位置における単純スライス結果）。

　FFT波形のグラフ範囲はスペクトログラムの周波数軸と振幅軸の範囲と連動しています。ノイズフロアや見たい周波数範囲が見えていない場合は各軸の範囲を調整しましょう。
　さらに、FFT波形内にある黄色いカーソルはその位置における周波数と振幅情報を確認するためにあります。FFT波形内の右上にテキスト描画されていますので、ピークの情報を確認するときに使ってください。黄色いカーソルはリアルタイム録音中常にMax振幅位置にフィットするように動作します。

　平均化FFTについては次の記事が参考になります。内容に興味のある人は是非参考にしてください。
・PythonでFFT実装!SciPyのフーリエ変換まとめ

音声保存と読み込み

　録音した音声は Save Audioボタンで表示されている時間範囲で保存できます。ごく限られた範囲の音声のみを保存したいときは時間軸範囲を調整してください。表示されている範囲に音声がない場合はエラーになります。また、表示されている範囲にデータの無い区間がある場合は、データの開始位置が0[s]になります。 .wavファイルが保存されます。

　PCではmacOSもWindowsも「ダウンロード」フォルダに保存されます。iPhoneのChromeでは「ファイル」というアプリのChromeのフォルダに .wavファイルが保存されていました。

　 Load Audioボタンで音声ファイルを読み込むこともできます。このアプリで測定された音声以外も読み込むことができ、さらに読み込み機能は秒数の上限がありません。秒数の上限がありませんが、あまり長い音声を読み込むとお使いの端末のSPECによっては処理がフリーズしてしまう場合があるので注意してください。

解析条件の変更

　FFTの設定は画面の下のフレームサイズ Frame size、オーバーラップ率 Overlap[%]、上限周波数 Upper[Hz]で変更可能です。ただし、端末毎に正確にサンプリングレートを制御できない都合、端末の実際のサンプリングレートで録音された信号をリサンプリングして解析する処理を行なっています。

　フレームサイズとオーバーラップ率、上限周波数を変更することでスペクトログラムやFFT波形の分解能が変化します。信号の種類によっては最適な設定が異なるので、いまいちな見た目をしていると思った場合はこちらを変更してみてください。オーバーラップ率については以下の記事を参考にしてください。
・PythonでFFTをする前にオーバーラップ処理をしよう!

まとめ

　この記事ではWATLABで自作したSpectLabというWebアプリについて、主に使い方を紹介しました。このアプリはインストール不要のブラウザのみで動作する録音音声解析アプリです。誰でも簡単に自分のPCやスマホで専門的な音声分析が可能になる無料アプリなので、是非使ってみていただきたいと思います。

　アプリの要望やバグ報告はいつでも受け付けています。お気軽にこのブログのコメントやGitHub、Xまでお問い合わせください。