Audio Visualizer
MP3、WAV、M4A、AAC、OGGなどの音声を読み込み、Web Audio APIで解析してリアルタイムに反応するビジュアルを生成します。PULSE、ORBIT、SPECTRUM、RIBBON、MIRROR、CONSTELLATION、TUNNEL、SKYLINE、PETALS、MATRIX、ECLIPSE、TERRAIN の12種類を選択できます。
Wave Designer
サイン波、三角波、矩形波、ノコギリ波、パルス、ノイズ、倍音、リサージュの8種類を、周波数・振幅・位相・複雑さ・線幅・色・塗り・アニメーション・グリッドで調整できます。4つのプリセット、ランダム生成、全画面プレビューにも対応します。
見た目のカスタマイズ
Audio Visualizerでは8配色、感度、スムージング、線の太さ、背景プリセット、任意の背景画像を組み合わせられます。Wave Designerでは数式パラメータと描画スタイルを直接編集できます。
書き出し
Audio Visualizerは16:9、1:1、9:16から比率を選び、Canvas映像と音声をMediaRecorderでWebM動画として出力します。Wave Designerは2倍解像度PNG、SVG、設定JSONとして保存できます。
技術構成
HTML、CSS、JavaScript、Web Audio API、Canvas、MediaRecorderだけで構成しています。外部ライブラリやバックエンドを必要とせず、処理は okojo-it.com 上のブラウザ内で完結します。
公開状況
アプリ本体は okojo-it.com の /web-apps/waveform-atelier/ に内蔵されています。2つのモードをタブで切り替えて利用できます。