こんにちは、年末年始に新しくWindows10の自作PCを組んだ虎の穴ラボのおっくんです。 昨年から、Web audioを取り扱うライブラリとしてTone.jsを使って、 ブラウザで音を鳴らしたりということをしていたのですが、一歩進んで再生する音を可視化したいと思いました。 可視化の方法としては、発生させる音を文字で表示するということもできるのですが、 今回は音楽再生ソフトの視覚エフェクトをイメージして作成することにしました。 Web audioを扱うTone.jsとCanvasを扱うp5.jsの2つライブラリを使用して、円環状に配置した音程に対応したバーが伸び縮みするアニメーションをCanvasに表示させます。 完成したページは以下のようになります。 音楽再生アプリの画面 完成品はこちらアップロードしておりますので、ぜひ見てみてください。 開発環境 OS MacOS Mojave バージ
![Tone.jsとp5.jsで音の発生を可視化する - 虎の穴開発室ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/d6c20758ab88ef6520fcddc973db4744404821eb/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ft%2Ftoranoana-lab%2F20200113%2F20200113174640.png)