
概要 📖 – Web Render TOP の Web ブラウザ音声を CHOP に取り込む
Audio Web Render CHOPは、指定した Web Render TOP がレンダリングする Web ページの音声を取り込み、オーディオ CHOP として出力する CHOPです。ブラウザ内で再生される YouTube や WebAudio API ベースのコンテンツを TouchDesigner のオーディオパイプラインに直接接続できます。
主な用途 🎯
- Web Render TOP がレンダリングするWeb ページの音声を CHOP として取得
- YouTube・SoundCloud・Web ベース楽器などブラウザ再生音源の TouchDesigner 取り込み
- WebAudio API で生成された音声をオーディオパイプラインへ連携
- Web ブラウザ音声と他オーディオソースの合成・解析(Mix / Spectrum 連携)
- Web ベースのライブストリーム / 配信音声を録音・出力デバイスへ転送
データフロー 🔄
入力: Web Render TOP(Web ページ音声)
↓
Audio Web Render CHOP(Active で取込み制御)
↓
出力: オーディオ CHOP
↓
後段: Audio Filter / Audio Spectrum / Audio Device Out 等
初心者の方は、以下日本語書籍も手元にあると安心です。

実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です!
パラメータ解説 ⚙️
Audio Web Render Page 📋
Active .active 🔘
Active .active 🔘
– オーディオ入力の取込みをオン/オフするスイッチ
– オフにすると Web Render TOP の音声は CHOP に流れず、出力は無音になる
Web Render TOP .webrender 🌐
Web Render TOP .webrender 🌐
– 音声ソースとして使用する Web Render TOP のパス
– 指定した Web Render TOP がレンダリングする Web ページの音声出力をこの CHOP が取り込む
Common Page 🔧
Time Slice .timeslice ⏱️
Time Slice モードの強制設定:
- オン: チャンネルを「タイムスライス」モードに強制
- タイムスライス: 前回のクックフレームから現在のクックフレームまでの時間
Scope .scope 🎯
影響を受けるチャンネルの絞り込み:
- Scope 文字列: 影響を受けるチャンネルを指定する文字列
- パターンマッチング:
*や[1-10]等のパターンが使用可能
Sample Rate Match .srselect ⚡
複数の入力 CHOP のサンプルレートが異なる場合の処理方法
| 項目 | 内部名 | 説明 |
|---|---|---|
| Resample At First Input’s Rate | .first |
最初の入力のレートで他をリサンプル |
| Resample At Maximum Rate | .max |
最高サンプルレートでリサンプル |
| Resample At Minimum Rate | .min |
最低サンプルレートでリサンプル |
| Error If Rates Differ | .err |
レート不一致でエラー |
Export Method .exportmethod 📤
CHOP チャンネルをパラメータに接続する方法
| 項目 | 内部名 | 説明 |
|---|---|---|
| DAT Table by Index | .datindex |
DAT テーブルのインデックスでチャンネルとパラメータを対応付け |
| DAT Table by Name | .datname |
DAT テーブルの行名でチャンネルとパラメータを対応付け |
| Channel Name is Path:Parameter | .autoname |
チャンネル名を `path:parameter` 形式で記述し直接対応付け |
Export Root .autoexportroot 🌳
Channel Name is Path:Parameter モード時のパス基点:
- Export Root パス:
autonameモードでチャンネル名のパス部分を相対化する基点 OP のパス
Export Table .exporttable 📋
DAT Table エクスポート方式での参照 DAT:
- Export Table DAT:
datindex/datnameモード時に参照する DAT のパス
Rename from .commonrenamefrom 🔤
リネーム対象チャンネルのパターン:
- Rename from パターン: リネーム対象とするチャンネル名のパターンマッチング文字列
Rename to .commonrenameto 🔁
リネーム後の置換パターン:
- Rename to パターン: Rename from にマッチしたチャンネルの新しい名前パターン (デフォルトはリネームなし)
実践アイデア 💡
Example 1: YouTube の音声を TouchDesigner で再生 🎵
Web Render TOP (YouTube URL) → Audio Web Render CHOP → Audio Device Out CHOP
- Web Render TOP を作成し、Address に YouTube 動画の URL を設定
- Audio Web Render CHOP を作成し、Web Render TOP パラメータに先ほどの Web Render TOP のパスを指定
- Active をオンに設定
- Audio Device Out CHOP に接続して PC のスピーカーから音声を再生
Example 2: ブラウザ音声をスペクトル解析してビジュアル連動 📊
Web Render TOP → Audio Web Render CHOP → Audio Spectrum CHOP → ビジュアル制御
- Web Render TOP に WebAudio API ベースの楽器ページを表示
- Audio Web Render CHOP で音声を取込み、Active をオンにして取得開始
- Audio Spectrum CHOP に接続して周波数帯ごとの強度を取得
- 取得したスペクトル値を TOP の Level 等にエクスポートしてビジュアルに反映
Example 3: ブラウザ音声と他オーディオソースの合成 🎚️
Audio Web Render CHOP + Audio File In CHOP → Math CHOP (Combine: Add) → Audio Device Out CHOP
- Web Render TOP でストリーミング再生中のページを表示
- Audio Web Render CHOP で取込み、Active をオン
- 別途 Audio File In CHOP でローカル BGM を再生
- Math CHOP の Combine = Add で 2 ソースをミックスして Audio Device Out CHOP へ
関連オペレータ 🔗
類似機能OP 🔍
- Audio Device In CHOP — OS のオーディオ入力デバイスから音声を取り込む CHOP(こちらはマイク・ライン入力)
- Audio File In CHOP — ローカルのオーディオファイルから音声を読み込む CHOP(ファイルベースの入力)
- Audio NDI CHOP — ネットワーク経由 NDI ストリームから音声を取り込む CHOP
組み合わせ推奨OP 🔄
- Audio Device Out CHOP — 取込んだブラウザ音声を出力デバイスから再生する後段 CHOP
- Audio Spectrum CHOP — ブラウザ音声の周波数スペクトル解析でビジュアル連動を作る
- Audio Filter CHOP — ローパス・ハイパス等のフィルタで取込み音声を整形
- Audio File Out CHOP — ブラウザ音声を WAV ファイルとして録音保存
- Math CHOP — ボリューム調整や他ソースとの加算ミックスに使用
前処理・後処理CHOP 🎯
- 前処理: Audio Device In CHOP、Audio File In CHOP
- 後処理: Audio Device Out CHOP、Audio Spectrum CHOP、Audio Filter CHOP
Info CHOP情報 📊
Audio Web Render CHOPは Info CHOP による詳細情報取得に対応しています。
CHOP固有情報 🎚️
start: CHOPインターバルの開始(サンプル単位)length: CHOPのサンプル数sample_rate: フレーム毎秒のサンプルレートnum_channels: CHOPのチャンネル数time_slice: タイムスライス有効時は1、無効時は0export_sernum: Export接続の更新回数
汎用オペレータ情報 🔄
total_cooks: プロセス開始からのクック回数cook_time: 最後のクック時間(ミリ秒)cook_frame: 最後にクックされたフレーム番号warnings: 警告数errors: エラー数
トラブルシューティング ⚠️
よくある問題と解決策 🔧
❌ Problem: 音が出ない / 無音のまま
✅ Solution:
- Active パラメータがオンになっているか確認(オフだと取込みは停止)
- Web Render TOP パラメータに正しい Web Render TOP のパスが指定されているか確認
- Web Render TOP 側で実際にページの音声が再生されているか確認(ページに自動再生制限がある場合は JavaScript で再生開始が必要)
❌ Problem: Web Render TOP の URL を変えても音が切り替わらない
✅ Solution:
- Web Render TOP の Address を変更後、ページのロード完了まで時間がかかる場合がある(数秒待ってから確認)
- Audio Web Render CHOP の Active を一度オフにしてからオンに戻し、入力を再初期化
- ページ自体がオーディオを出していない可能性があるため、ブラウザで同 URL を開いて音が出るかを切り分ける
❌ Problem: 音が途切れる / プチプチとノイズが入る
✅ Solution:
- ホスト PC の CPU 負荷を確認(Web Render TOP は内部で Chromium を動かすため重い)
- 後段で Audio Filter CHOP や Time Slice を整え、サンプルレートの不一致が起きていないか Sample Rate Match で揃える
- Web Render TOP の Resolution を下げてレンダリング負荷を減らす
❌ Problem: 音量が他ソースとずれる / 大きすぎる・小さすぎる
✅ Solution:
- 後段に Math CHOP を入れ Multiply で音量を調整
- 他ソース(Audio Device In / Audio File In)と Mix する場合は Audio Dynamics CHOP でレベルを揃える
- ブラウザ側のページ音量(HTML の volume 属性 / JavaScript 制御)も影響するため、ページ側でも調整可能か確認
参考資料 📚
その他 🔗
- TouchDesigner Wiki — CHOP 概要
- TouchDesigner Wiki — Category:CHOPs
- TouchDesigner Wiki ホーム
- TouchDesigner 公式 Forum
- Facebook — TouchDesigner Help Group

