Audio Web Render CHOP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

※当サイトにはプロモーションリンクが含まれます。

Audio Web Render CHOP が Web Render TOP の音声を取り込む様子を示す図

記事更新の通知はXでアナウンス٩(๑❛ᴗ❛๑)
@maru6o6をフォロー

概要 📖 – 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 等

Tips

初心者の方は、以下日本語書籍も手元にあると安心です。

まる。
まる。

実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です!


パラメータ解説 ⚙️

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
  1. Web Render TOP を作成し、Address に YouTube 動画の URL を設定
  2. Audio Web Render CHOP を作成し、Web Render TOP パラメータに先ほどの Web Render TOP のパスを指定
  3. Active をオンに設定
  4. Audio Device Out CHOP に接続して PC のスピーカーから音声を再生

Example 2: ブラウザ音声をスペクトル解析してビジュアル連動 📊

Web Render TOP → Audio Web Render CHOP → Audio Spectrum CHOP → ビジュアル制御
  1. Web Render TOP に WebAudio API ベースの楽器ページを表示
  2. Audio Web Render CHOP で音声を取込み、Active をオンにして取得開始
  3. Audio Spectrum CHOP に接続して周波数帯ごとの強度を取得
  4. 取得したスペクトル値を TOP の Level 等にエクスポートしてビジュアルに反映

Example 3: ブラウザ音声と他オーディオソースの合成 🎚️

Audio Web Render CHOP + Audio File In CHOP → Math CHOP (Combine: Add) → Audio Device Out CHOP
  1. Web Render TOP でストリーミング再生中のページを表示
  2. Audio Web Render CHOP で取込み、Active をオン
  3. 別途 Audio File In CHOP でローカル BGM を再生
  4. 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 🎯


Info CHOP情報 📊

Audio Web Render CHOPは Info CHOP による詳細情報取得に対応しています。

CHOP固有情報 🎚️

  • start: CHOPインターバルの開始(サンプル単位)
  • length: CHOPのサンプル数
  • sample_rate: フレーム毎秒のサンプルレート
  • num_channels: CHOPのチャンネル数
  • time_slice: タイムスライス有効時は1、無効時は0
  • export_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 制御)も影響するため、ページ側でも調整可能か確認

参考資料 📚

その他 🔗

公式リソース 📖

この記事はLLMと共に内容を執筆、更新しています。
最新バージョンとの項目差異など、情報の不一致を見つけた心優しい方はXもしくはInsta、メールなどよりサイト管理者までご連絡ください😎


まる。

お仕事のご依頼はDM又はメールにて。
━━━━━━━━━━━━━━━━━
Python/Touchdesigner/M5Stackをこよなく愛すフルスタックエンジニア。
専門は生理心理学、趣味はヨガやサウナ、EMS電気風呂などヘルスケア全般。
脳波や筋電、心拍を中心とした生体情報のセンシング&インタラクティブアートづくりがライフワーク。

普段はワントゥーテンという会社で空間演出エンジニアをしています。
リファラル採用お繋ぎできますので、我こそはという尖った方は経歴と希望職種添えてDMください(エンジニア以外、営業職等もOK)。
ご飯行きましょう。

↓日常垢
Instagram:@malmal0v0

まる。をフォローする
その他の記事はこちら
Math Combine POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED Select TOP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Window COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Widget COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

タイトルとURLをコピーしました