音声波形 PNG / SVG 生成 — 振幅波形を画像化

波形画像を作るために渡す音声は、多くの場合作りかけの素材

波形ビジュアライゼーションが必要になる場面は、SoundCloud や Spotify のような配信プラットフォームに合わせたサムネイル制作、ポッドキャストのエピソードサムネイル、音楽アーカイブやブログ記事への埋め込み用画像、動画制作でのトランジションや背景エフェクトなどです。これらはすべて「音声コンテンツを公開する直前」か「まだ制作中の段階」で作業が発生します。

波形画像の生成には音声ファイル全体を読み込む必要があります。波形の見た目だけが目的であっても、サーバーには音声全体が届きます。「波形の画像が欲しかっただけ」という操作の軽さと、「音声全体が転送される」という実態のギャップがあります。

波形生成サービスに音声を送ることの問題

波形画像生成に特化したオンラインサービスは少ないですが、音声に関連した機能を複数持つサービスがこの機能を提供することがあります。このとき音声ファイルはサーバーへ届き、利用規約でコンテンツ使用の許諾が設定されているサービスでは、楽曲やポッドキャストの音声が対象になります。

波形画像の外見から元の音声の内容は分かりませんが、波形パターンは音声の特徴 (ダイナミクス・無音区間の分布・音量の時系列変化) を視覚的に表しています。この視覚パターンも派生データとして、どこかに記録されます。「画像だけ返してもらえれば」という意図と、実際の動作には差があります。

decodeAudioData + Canvas 2D / SVG polyline でブラウザ内描画

このツールは Web Audio API の decodeAudioData で音声をデコードし、サンプル列をダウンサンプリング (横幅 px に対応するブロック単位で RMS を計算) してから Canvas 2D コンテキストでミラーモードまたはベースラインモードの波形を描画します。SVG 出力は polyline 要素として書き出し、サイズ自由なベクター形式で保存できます。透過背景 PNG も Canvas の toBlob('image/png') で対応しています。処理全体がブラウザのメモリ内で完結します。

DevTools の Network タブを開いた状態でファイルをドロップしても、ページロード後の音声関連リクエストはゼロです。描画パラメータの変更 (色・サイズ・モード) も、デコード済みのサンプルデータをブラウザ内で再計算するだけです。実装コードは GitHub で公開されています。

波形画像を制作フローに活用する際の注意点

ステレオ音源の L/R 別レーン表示は、インタビュー録音の話者別音量バランスの視覚確認や、マルチマイク録音の素材確認に便利です。SVG 形式での書き出しは、デザインツール (Figma / Illustrator 等) でサイズや色を後から編集できるため、ブランドカラーに合わせた波形画像の制作に向いています。波形と並べて周波数分布を確認したい場合は audio-spectrum を、テンポやリズム構造を把握したい場合は audio-bpm-detect を同じブラウザ内で開けます。

波形のダウンロード後は音声ファイルそのものは手元に保持されたままです。波形画像だけを外部サービスへのアップロード素材として使い、音声ファイルを出さないという使い方が、プライバシーの観点から最も安全です。SNS や配信プラットフォームに使う波形サムネイルを、ブラウザ内で完成品として用意しておく設計になっています。

波形ダウンサンプリングのアルゴリズム — RMS / Peak / Min-Max

横幅 1080 px の波形を 3 分 (約 8 百万サンプル) の音声から描画する際、サンプル列を約 7400 サンプルごとの「バケット」にまとめて 1 px に圧縮します。このバケット内の代表値を選ぶ方式が 3 つあり、それぞれ視覚効果が異なります。RMS (Root Mean Square) は sqrt(Σ x²/n) で計算し、エネルギーの「平均的な大きさ」を表現するため、楽曲全体のダイナミクスを滑らかに見せます。本ツールが採用する方式です。

Peak (絶対値の最大) は各バケットの max(|x|) を取り、瞬間的なスパイクを保存するため SoundCloud / Audacity 風の「角張った」波形になります。Min-Max は [min(x), max(x)] のペアを保存し、本来の波形の上下対称性を保ったまま視覚化できる方式で、Audacity の高ズーム時の表示と一致します。それぞれの方式は最大値ピクセルの解釈が異なるため、同じ音声でも見た目が変わります。デザイン用途では RMS の「滑らかさ」、解析用途では Peak の「正確なクリップ位置」、編集用途では Min-Max の「上下対称」が向いています。

SVG vs PNG の選び方とブランディング用途での寿命

PNG はラスタ画像で、書き出した時点の解像度 (480 / 720 / 1080 / 1440 px) で固定されます。Twitter / Instagram などで直接シェアする・ブログに <img> として埋め込む用途では PNG が手軽です。一方 SVG はベクター形式で、出力後に Figma / Illustrator / Sketch でストローク色・線幅・グラデーション・フィルター効果を後付けできます。ブランドカラーのリブランディング、シリーズ全体のサムネイル再生成、印刷物 (ZINE / ライナーノーツ / ポスター) への流用といった「将来再加工する可能性が高い」用途では SVG を保存しておく価値があります。

ファイルサイズの観点では、3 分の音声を 1080 px 横幅の SVG に出すと polyline 要素のポイント数が 2160 (mirror モードで上下 2 本) になり、約 25-50 KB です。同サイズの透過 PNG は密度によって 50-200 KB、不透明 PNG は 100-300 KB と SVG より大きくなります。ロード時間が重要なサムネイル用途では SVG の方が軽く、品質も維持できます。透過背景 PNG は SoundCloud のプレイヤー埋め込みなど「背景色を環境に合わせたい」場面で、CSS で背景色を動的に変える前提なら有用です。