はてなブックマーク

趣味で音楽をつくっているのですが、 それ用の特設サイトをNext.jsでつくったのにあわせてオーディオプレイヤー(スペクトラムアナライザ付き)をReact+WebAudioでつくってみました。 実際の結果 https://romot.studio その記録です。 事前 単純に再生だけなら<audio>だけあればWebAudioいらない そうでなくてもReact用音声プレイヤーライブラリたくさんあるのでその方がいい 今回使わなかったが、スペクトラムアナライザだけでなく プレイリスト 曲やその再生時間にあわせた背景変更 曲の再生秒数にあわせた歌詞など表示 などもつけたかったので必要だったという前提 ↓こんな感じで一応実装はしていた ※ イラストはゆーはくさま 要素を置く プリロードなどが面倒なので、audioタグを利用しています。 /pages/index.js import { useSta