音声から三つの映像を作る手順
音源・音声波形ビジュアライザー動画生成は，一つの音声ファイルを再生しながらCanvasへ描いた映像を，音声とともにWebM動画として録画するツールです．画面のファイル選択欄をクリックするか，音声ファイルをドラッグアンドドロップして読み込みます．デコードが完了するとファイル名と長さが表示され，640×360ピクセルのCanvasには再生待ちの案内が出ます．
この時点で音声全体の波形画像が既に表示されるわけではありません．「スペクトラム」「波形ライン」「サークル」から表示方法を選び，再生ボタンで音と動く映像を確認してください．再生中は進捗スライダーで別の位置へ移動でき，テーマの切り替えもできます．
録画するときは「録画・動画書き出し開始」を押します．現在のプレビュー位置に関係なく，音声の先頭から録画を始めます．録画中はテーマと再生位置の操作を無効にし，Canvas映像と再生音声を実時間で記録します．音声が最後まで再生されると録画は自動的に終了し，途中で「録画を停止して書き出す」を押せばそこまでの動画を作ります．
処理後に表示される保存ボタンから，元ファイル名に「_visual.webm」を付けた動画をダウンロードできます．三分の音声を最後まで収録するなら，おおむね三分間の実時間が必要です．一度保存した後も同じ音声を先頭から録画し直せますが，新しい録画を始めると画面にある前回の結果は取り消されます．
必要な動画は先に保存してください．複数の音声をつなぐ，別々の区間をまとめる，音声だけを保存するといった機能はありません．
読み込みと端末のメモリ
選択したファイルはブラウザのFile.arrayBuffer()で読み，AudioContext.decodeAudioData()を通してAudioBufferにデコードします．画面にMP3，WAV，M4Aなどと表示していても，すべてのブラウザとOSで必ず読み込めるという意味ではありません．
対応するコンテナやコーデックは利用環境によって異なり，同じ拡張子でも内部の形式が違えば結果も変わります．読み込めないファイルにはエラーを表示します．ブラウザのデコード処理によって，AudioBufferのサンプリングレートが入力ファイルの値から変わる場合もあります．
元ファイルの曲名やカバー画像などを取り出して画面や動画へ引き継ぐ処理はありません．
再生と解析のために音声全体を一度AudioBufferへ展開します．圧縮されたファイルが小さくても，展開後のPCMデータは再生時間，サンプリングレート，チャンネル数に応じてメモリを使用します．録画中はさらに映像と音声のエンコード済みデータをブラウザのメモリへ蓄積し，録画終了後にBlobとしてまとめます．
長時間の音源では読み込み時間と録画時間が長くなり，端末の空きメモリが少なければ失敗や動作遅延が起こり得ます．このページには音声の最大容量を一定の数値に制限する設定はありませんが，容量無制限で使えるという意味ではありません．作業中にページを閉じたり別のファイルを読み込んだりすると，進行中の録画は継続できません．
読み込みが終わるまでは再生・録画ボタンは利用できず，失敗した場合は別のファイルを選び直します．音声ファイルの再選択時には古い録画結果も消えるため，生成済みの動画が必要なら先にダウンロードします．
周波数バー，波形ライン，サークルの違い
再生時には音声のAudioBufferSourceNodeからAnalyserNodeへ信号を渡し，解析した現在の音をCanvas 2Dで描きます．AnalyserNodeのfftSizeは256に設定しており，周波数データを取得するときの配列は128要素です．
「スペクトラム」はgetByteFrequencyData()から得た帯域ごとの値に応じて，画面下側から伸びる色付きの縦棒を描きます．「サークル」も同じ周波数データを使いますが，画面中央の円の周囲から外側へ放射状に棒を配置します．両者は同じ音源の解析値を異なる形に描く選択肢であり，左右のチャンネルを個別に比較する表示ではありません．
「波形ライン」だけはgetByteTimeDomainData()から得る，直近の時間領域のサンプル値を線で結びます．この線はファイルの冒頭から末尾までの詳細な波形を横方向に並べたものではなく，再生中の短い範囲を繰り返し描いたものです．三テーマともrequestAnimationFrameに合わせて表示を更新しますが，音声全体のピークを事前解析する機能や，周波数値を数値として書き出す機能はありません．
WebGLや3D粒子，ロゴ挿入，背景画像・背景動画，色指定，FFTサイズの調整にも対応していません．どの見た目が必要か，再生して確認してから録画してください．
Canvas映像と音声トラックの録画
映像を描くCanvasは幅640，高さ360ピクセルで，16:9の比率です．録画開始時にCanvas.captureStream(30)で映像トラックを作ります．引数の30は毎秒30フレームのキャプチャ要求であり，録画ファイルが常に30fpsになる保証ではありません．
端末の処理能力やブラウザの動作，別のタブへ切り替えたときの描画頻度によって，フレームの欠落や動きのぎこちなさが起こり得ます．画面に見えているCanvasの内容が記録されますが，固定された背景画像を重ねたり，解像度・縦横比を設定したりする機能はありません．
録画用の音声は，音声信号をAnalyserNodeからMediaStreamAudioDestinationNodeにも接続して取得します．Canvas由来の映像トラックとこの音声トラックを一つのMediaStreamに入れ，MediaRecorderへ渡します．
同じ再生経路がスピーカーにも接続されるので，録画中に音を確認できます．録画は音声の再生と同時に進み，停止後に音声・映像のチャンクを一つのBlobへまとめます．この実装は音声と映像の時刻を後から解析して補正する仕組みを持たず，サンプル単位の完全同期や一定のフレームレートを保証しません．
端末負荷が大きい場合は短い音源で試してから長い録画へ進んでください．
WebM出力とブラウザ対応
録画開始前にMediaRecorderでvideo/webm;codecs=vp8,opus，またはvideo/webmへの対応を確認します．いずれも扱えないブラウザではエラーを表示し，別の形式をWebMと偽って保存しません．録画中のエラーや空の録画結果も成功扱いせず，保存ボタンを出しません．
対応形式と録画の実行可否は別であり，WebM対応と判定されても端末の資源不足などで録画に失敗する可能性があります．手動停止時はそこまでの長さを動画にし，自然終了時は音声の最後までを収録します．結果のファイルはWebMであり，MP4，GIF，WAV，MP3へ直接出力できません．
SNSや動画編集アプリがWebMを受け付けるかは利用先次第なので，必要な形式を事前に確認してください．
録画結果はブラウザ内のBlobとして保持し，保存ボタンで端末へダウンロードします．次のファイルを読み込むと以前の録画結果は画面から外れます．長い録画ではエンコードの負荷に加えて蓄積データも増えるため，ブラウザが重くなることがあります．選択したテーマによって描画量も異なり，同じ30fpsの要求でも全端末で同じ品質になるわけではありません．
動画を短くしたいときは手動停止できますが，音声ファイルの任意区間だけを無音なしで正確に切り出す専用の動画編集機能ではありません．音声自体の不要部分を先に除きたい場合は，音声トリミングツールで別のファイルを用意してから，そのファイルを読み込みます．
利用場面，権利，通信の範囲
自作の音楽や利用条件を確認済みの音声から，簡単な動く可視化素材を作る用途に向いています．話し声なら時間領域のライン，周波数帯域の変化を見せたいなら縦棒や円形を選ぶなど，目的と見やすさでテーマを比べてください．このページはアップロードする音源の権利を判定しません．
公開や再配布を予定している場合は，音声の利用条件と動画の掲載先の形式要件を別途確認してください．表示される解析値は演出的な描画であり，音量測定器や音響分析の証明資料として使う設計ではありません．短い音声で録画・保存・再生を試し，目的の再生環境で音と映像を確認してから長い音源へ進むと，形式の互換性や端末負荷の問題に早めに気付けます．
音声のデコード，再生，Canvas描画，録画，WebM Blob生成はこのページのブラウザ内で行います．ただし，サイトの読み込みや解析・広告など別の通信まで含めて「通信ゼロ」と主張するものではなく，機密性を無条件に保証するものでもありません．利用する端末，ブラウザ拡張機能，ネットワーク環境を含めて判断してください．
生成した動画の保存先はブラウザのダウンロード設定に従います．ページ上のファイル状態を取り消しても，既に端末に保存した動画や元の音声ファイルは自動削除されません．動画ファイルの再生可否と画質は，録画に使ったブラウザだけでなく再生側の環境にも依存します．