web api を使えばいわゆるオシロスコープを簡単に作ることができます。
音波の入ったロゴを作りたかった
illustrator でロゴ作りをしていたのですが、音波の形を作るのに苦戦していました。それならいっそ Web アプリとして作るかということで作成しました。
https://manybugsdev.github.io/onpa-svg/
https://github.com/manybugsdev/onpa-svg
デバイスのマイクから音を拾って音波の形を表示してくれます。 Timeline で時間を遡って波形を探すことができます。気に入った波形を表示して save を押すと svg ファイルとして保存されます。
getUserMedia
getUserMedia を使うとカメラやマイクなどのデバイスに web 上からアクセスできます。スマホからでも支障なく使えます。
web audio api
web audio api は オーディオ関連の機能がまとめられています。高速フーリエ変換なるものを使って声のデータを数値の配列に保存しているらしいです。難しい ☺️。
とりあえず参考に載せてあるチュートリアルを真似すれば使えると思います。
one page
自慢したいこととして、このプログラムはなんと 1 つの html ファイルのみで作っています。他のライブラリのインポートも一切なく、favicon も datauri 指定することでハードコーディングしています。One HTML Page Challengeに出してみようと思います。