Audiowaveform

概要

BBCの audiowaveform ツールを使用してオーディオファイルからウェーブフォーム可視化を生成します。PNG/SVG ウェーブフォーム画像をレンダリングし、ピークデータを JSON または バイナリ形式で出力して、Web ベースのオーディオプレイヤー(wavesurfer.js、peaks.js)に対応します。ポッドキャストプレイヤー、音楽プラットフォーム、ソーシャルメディアのオーディオプレビュー、およびオーディオウェーブフォームを表示するあらゆる UI に最適です。

使用方法

ステップ1: インストール

# Ubuntu/Debian
apt install -y audiowaveform

# macOS
brew install audiowaveform

# ソースからのインストール(リポジトリにない場合)
apt install -y cmake g++ libmad0-dev libsndfile1-dev libgd-dev libboost-filesystem-dev libboost-program-options-dev libboost-regex-dev
git clone https://github.com/bbc/audiowaveform.git
cd audiowaveform && mkdir build && cd build
cmake .. && make && make install

# 確認
audiowaveform --version

ステップ2: ウェーブフォーム画像を生成

基本的な PNG ウェーブフォーム:

audiowaveform -i episode.wav -o waveform.png

カスタマイズされたウェーブフォーム:

audiowaveform -i episode.mp3 -o waveform.png \
  --width 1800 \
  --height 200 \
  --colors audacity \
  --background-color ffffff \
  --waveform-color 3b82f6 \
  --axis-label-color 666666 \
  --border-color ffffff \
  --zoom auto

カラースキーム:

• audacity — 古典的な Audacity のルック
• カスタム: 16進数で --waveform-color 、--background-color を使用

ソーシャルメディア用高解像度(1200x630 — OG 画像サイズ):

audiowaveform -i episode.wav -o social-preview.png \
  --width 1200 --height 630 \
  --background-color 1a1a2e \
  --waveform-color 00d4ff \
  --no-axis-labels

特定の時間範囲:

audiowaveform -i episode.wav -o clip.png \
  --start 60 --end 180 \
  --width 800 --height 150

チャネルの分離(ステレオ):

audiowaveform -i stereo.wav -o waveform.png --split-channels

ステップ3: ウェーブフォームデータを生成(JSON)

クライアント側でウェーブフォームをレンダリングする Web プレイヤー向け:

# JSON 出力(ピークスデータ)
audiowaveform -i episode.wav -o peaks.json \
  --pixels-per-second 20 \
  --bits 8

# バイナリ形式(ファイルサイズが小さい)
audiowaveform -i episode.wav -o peaks.dat \
  --pixels-per-second 20 \
  --bits 8

JSON 構造:

{
  "version": 2,
  "channels": 1,
  "sample_rate": 44100,
  "samples_per_pixel": 2205,
  "bits": 8,
  "length": 1200,
  "data": [0, 45, -3, 67, 12, 89, ...]
}

ピクセル/秒のガイドライン:

• 20 — エピソード全体の概要に最適(ポッドキャスト、1〜2時間)
• 50 — 楽曲の詳細表示(3〜5分)
• 100 — 非常に詳細、短いクリップ向け
• 200+ — ウェーブフォーム編集精度

ステップ4: Web プレイヤー統合

wavesurfer.js を使用:

<div id="waveform"></div>
<button onclick="wavesurfer.playPause()">Play/Pause</button>

<script src="https://unpkg.com/wavesurfer.js@7"></script>
<script>
const wavesurfer = WaveSurfer.create({
  container: "#waveform",
  waveColor: "#3b82f6",
  progressColor: "#1d4ed8",
  cursorColor: "#ef4444",
  barWidth: 2,
  barRadius: 2,
  barGap: 1,
  height: 80,
  responsive: true,
  // 事前に生成されたピークスを使用して即座にレンダリング
  peaks: null, // JSON から読み込まれます
  url: "/audio/episode.mp3",
});

// 事前に生成されたピークスを読み込み(クライアント側のデコーディングをスキップ)
fetch("/waveforms/episode-peaks.json")
  .then(r => r.json())
  .then(data => {
    wavesurfer.load("/audio/episode.mp3", [data.data]);
  });
</script>

peaks.js(BBC)を使用:

<div id="zoomview-container"></div>
<div id="overview-container"></div>

<script src="https://unpkg.com/peaks.js"></script>
<script>
const audioElement = document.getElementById("audio");

Peaks.init({
  containers: {
    zoomview: document.getElementById("zoomview-container"),
    overview: document.getElementById("overview-container"),
  },
  mediaElement: audioElement,
  dataUri: {
    json: "/waveforms/episode-peaks.json",
  },
  zoomLevels: [256, 512, 1024, 2048],
  overview: {
    waveformColor: "#3b82f6",
    playedWaveformColor: "#1d4ed8",
  },
  zoomview: {
    waveformColor: "#3b82f6",
    playedWaveformColor: "#1d4ed8",
  },
}, (err, peaks) => {
  if (err) console.error(err);
  // ピークスインスタンスの準備完了
});
</script>

ステップ5: バッチ処理とパイプライン

すべてのエピソード向けのウェーブフォームを生成:

#!/bin/bash
# generate-waveforms.sh
AUDIO_DIR="./episodes"
OUT_DIR="./waveforms"
mkdir -p "$OUT_DIR"

for f in "$AUDIO_DIR"/*.{mp3,wav}; do
  [ -f "$f" ] || continue
  base=$(basename "$f" | sed 's/\.[^.]*$//')
  
  # PNG プレビュー
  audiowaveform -i "$f" -o "$OUT_DIR/${base}.png" \
    --width 1200 --height 150 \
    --background-color ffffff --waveform-color 3b82f6

  # Web プレイヤー向け JSON ピークス
  audiowaveform -i "$f" -o "$OUT_DIR/${base}.json" \
    --pixels-per-second 20 --bits 8

  # ソーシャルメディアプレビュー
  audiowaveform -i "$f" -o "$OUT_DIR/${base}-social.png" \
    --width 1200 --height 630 \
    --background-color 0f172a --waveform-color 38bdf8 --no-axis-labels

  echo "✅ $base"
done

ステップ6: フォーマット間の変換

# バイナリ → JSON
audiowaveform -i peaks.dat -o peaks.json

# JSON → PNG(事前計算されたデータからレンダリング)
audiowaveform -i peaks.json -o waveform.png \
  --width 1200 --height 200 \
  --zoom auto

# 生のオーディオ → 複数の出力
audiowaveform -i input.wav -o peaks.dat --bits 8 --pixels-per-second 20
audiowaveform -i peaks.dat -o overview.png --width 2000 --height 100
audiowaveform -i peaks.dat -o detail.png --start 60 --end 120 --width 800 --height 200

例

例1: ポッドキャスト Web サイト向けウェーブフォームプレビューを生成

ユーザープロンプト: 「50個のポッドキャストエピソードが MP3 ファイルで ./episodes/ にあります。PNG ウェーブフォームプレビューと JSON ピークデータを各々生成して、wavesurfer.js で Next.js サイトで使えるようにしてください。」

エージェントは以下を実行します:

1. audiowaveform がインストールされているか確認し、必要に応じて apt または brew でインストールします。
2. 出力ディレクトリ ./waveforms/png/ と ./waveforms/json/ を作成します。
3. ./episodes/ 内のすべての .mp3 ファイルを反復処理し、ブランドカラーを使用した 1200x150 の PNG と各エピソードに対して20ピクセル/秒で 8 ビット深度の JSON ピークスファイルを生成する bash ループを記述します。
4. バッチスクリプトを実行し、生成されたウェーブフォームの数を報告します。
5. クライアント側のオーディオデコーディングなしで事前生成された JSON ピークスを読み込んで、即座のウェーブフォームレンダリングを実現する wavesurfer.js コードスニペットを表示します。

例2: ソーシャルメディアオーディオプレビュー画像を作成

ユーザープロンプト: 「ポッドキャストエピソードを Twitter で共有するための OG 画像サイズのウェーブフォームグラフィックスが必要です。ダークバックグラウンド、シアンウェーブフォーム、軸ラベルなし。エピソード10から15です。」

エージェントは以下を実行します:

1. エピソードディレクトリ内のエピソード10〜15のオーディオファイルを識別します。
2. 各ファイルに対して audiowaveform を --width 1200 --height 630 (OG 画像寸法)、--background-color 0f172a 、--waveform-color 06b6d4 、および --no-axis-labels で実行します。
3. 出力ファイルを episode-10-social.png から episode-15-social.png として保存します。
4. ファイルが生成されたことを確認し、ファイルサイズを記録します。

ガイドライン

• コマンドを実行する前に audiowaveform がインストールされているか必ず確認してください。ほとんどのデフォルトパッケージマネージャーでは利用できないため、古いシステムではソースから構築が必要な場合があります。
• Web プレイヤー向けの JSON ピークスデータには --pixels-per-second 20 を --bits 8 と共に使用してください。より高い値は概要ウェーブフォーム向けの不要に大きなファイルを生成します。
• クライアント側でのオーディオデコーディングではなく、サーバー側でウェーブフォーム JSON を事前生成してください。これによりリスナーの Web 上での読み込み時間が数秒になるのを排除します。
• ソーシャルメディア画像の場合、--no-axis-labels を使用して、小さなサイズで視覚を乱す時間マーカーなしのクリーナーなグラフィックスを生成してください。
• 大規模なバッチを処理する場合、まずバイナリ .dat 形式を生成し、その後 .dat ファイルから PNG と JSON をレンダリングして、オーディオの複数回の読み込みを避けてください。