概要
ブラウザ上で簡単に動くAudio Visualizerをリリースしました！
ソフトウェアをインストールする必要がなく、すぐに使えるのが特徴です。
こちらのリンク先からすぐに使えます。
https://lef237.github.io/audio-visualizer/
OGPを設定していませんが、そのうち設定したいと思います。
見た目
見た目はこんな感じです。
Chillな雰囲気を出すために、青と黒を基調にしました。
使い方
使い方はシンプルです。
Select Audio Fileボタンをクリックして、ビジュアライズしたい音声ファイルを選択します。mp3にもwavにも対応しています。
あとはStartボタンを押すだけでOKです。青い波が画面に広がります。
ボリュームも調整できますし、スマホにも対応しています。
リポジトリ
GitHubで公開しているので、コードが気になった方はぜひチェックしてみてください💻
https://github.com/lef237/audio-visualizer
GitHub Actionsを使ってGitHub Pagesへとデプロイしています。GitHubで完結するので楽でした。
動画
動画も載せておきます。
コード例
このコード部分は、オーディオデータの波形をキャンバスに描画しています。
const bufferLength = analyserRef.current.frequencyBinCount; const sliceWidth = (canvas.width * 1.0) / bufferLength; let x = 0; for (let i = 0; i < bufferLength; i++) { const v = dataArrayRef.current[i] / 128.0; const y = (v * canvas.height) / 2; if (i === 0) { canvasCtx.moveTo(x, y); } else { canvasCtx.lineTo(x, y); } x += sliceWidth; }
周波数ビンの数を取得して、ビンの幅を計算して、キャンバス上のy座標を出して、線を引くだけでOKです。
https://www.analog.com/jp/resources/glossary/frequency_bin.html
これらを簡単に実現できたのは、AnalyserNodeインターフェイスのおかげでした。MDN Web Docsに詳しい説明が載っているのでオススメです！
https://developer.mozilla.org/ja/docs/Web/API/AnalyserNode
AnalyserNode.frequencyBinCount 読取専用
符号なし long 型の値で、 FFT のサイズの半分の値。一般的に音声再生時の可視化に用いられます。
作った動機
３つあります。
- 音楽に関連するアプリを作りたかった
- ブラウザ上で気軽に使えるAudio Visualizerが見つからなかった
- 制限時間のあるなかでコードを書く訓練
音楽に関連するアプリを作りたかった
「LEF（筆者）は暇なときいつも何をしているっけ……？」と自分自身を観察したとき、ずっと音楽を聞いていることが分かりました。
また、（恥ずかしいので）公開はしていませんが、自分で作曲をすることもあります。
自分に身近なアプリを作りたいというモチベーションから開発を始めました。
ブラウザ上で気軽に使えるAudio Visualizerが見つからなかった
GoogleやBingで「Audio Visualizer」と検索しても、ブラウザ上で使えるものだと自分に合ったものが見つかりませんでした。
「無ければ作る！」というDIYの精神で作りました。
制限時間のあるなかでコードを書く訓練
土日という制限時間があるなかで開発することで、自分を鍛えようと思いました。
これは一人ハッカソンというもので、前にも開催したことがありますが、久々に開催することにしました。*1
一人ハッカソンのmyルールとしては「時間内に作り切る」というものがあります。作りかけで放置するよりも、最後まで作り切ることを目標にしました。
そのため、例えば色を変えるとか、波形の描画ロジックを変えるだとかは実装していないです。あえてシンプルにして、無駄を削ぎ落としました。もし必要になったらそのときに作れるようにしています。
まとめ
日曜大工をする感覚で、アプリやツールを作ると楽しいです。
暇なときに一人ハッカソン、オススメです！🧑💻
