カスタム音楽と AI ディスプレイをデザインする

適切な開始ページを選択する

設定ページではなく、オーディエンス表示をコピーします。 Spotify のセットアップは別の場所にあります spotify-overlay.html; AI オーバーレイ ビルダーが使用するもの aiprompt.html 構築し、 aioverlay.html を表示します。 AI イベント オーバーレイは、保存された構成とプライベート表示 URL を備えたもう 1 つの機能です。

ダウンロードしてファイル構造を保持する

1. ソースZIPをダウンロードする を選択して抽出します。これらのガイドではベータ ソースを使用します。 1 回のダウンロードで得たファイルをまとめて保存します。
2. コピー spotify-overlay.html → my-music.html オリジナルの横にあります。別のページまたはテーマを選択した場合は、そのコピーをそのファイルの元のフォルダーに保存してください。
3. コピーした HTML とその参照先の CSS/JS をエディターまたは AI ツールで開きます。提供されたアートワーク/フォントを同じプロジェクトに追加し、相対パスを使用します。 CSS オーバーライドから始めます。生成されたマークアップを変更するときにレンダラーを含めます。

次のファイルは、設計と動作を見つけるのに役立ちます。これはリーディング リストであり、完全な依存関係バンドルではありません。画像、フォント、スクリプト、データ ファイルなど、抽出されたフォルダーはそのままにしておきます。

コピーを接続し、OBS で開きます

SSN を起動し、最初に生成された元のオーバーレイ URL が機能するようにします。の session= 値は SSN セッションに接続します。それはあなたのチャンネル名やこのファイルの名前ではありません。 SSN、関連機能、およびそのデータ ソースを実行したままにします。 アップストリームの修正が必要な場合は、

1. 編集したHTMLファイルをChromeまたはEdgeにドラッグします。アドレスバーからアドレスをコピーします。それはから始まります file:///.
2. からすべてをコピーします ? 作業中の SSN オーバーレイ リンク内に移動し、そのファイル アドレスの末尾に追加します。セッション、パスワード、その他の設定を含むすべての設定を保持します。 # エンディング。
3. 結果をブラウザで開き、OBS ブラウザのソースを設定します。 URL を同じアドレスに ローカルファイル チェックを外します。ソースの寸法を意図したデザインに合わせます。

上記の開始ファイルのローカル アドレスは次のようになります。実際のリンクには追加の必須オプションが含まれている場合があります。

file:///C:/SSN/social_stream-beta/my-music.html?session=YOUR_SESSION

コンピュータ上の実際のファイル アドレスを使用します。 OBS はソースと一緒に保存します。ダウンロードしたフォルダーを同じ場所に保存します。デザインの変更を保存した後、ブラウザのソースを更新します。の 共通セットアップガイド には、Mac の例と、[ローカル ファイル] チェックボックスのオプションのランチャーが含まれています。

デザインを変更する場所

音楽の場合、カバーアートのフレーム、トラック/アーティストのタイポグラフィ、進行状況、一時停止/非表示の状態を変更します。既存の SSN 統合で再生認証を維持します。共同ホスト出力の場合、応答ルーティングと既存のオーディオ ソースを維持しながら、アバター レイアウト、吹き出し、アイドル/通話状態を変更します。

生成された AI イベント デザインの場合は、保存されたデザイン プロンプトと空のデザインを使用します。 data-field に記載されている要素 AIイベントガイド。そのレンダラーはローカルでテキストを入力し、生成された JavaScript をブロックします。その境界線を維持してください。表示リンク全体をコピーします。 #aieventauth=... 断片。セッションだけではその機能には十分ではありません。

この AI プロンプトをコピーします

コピーしたソースファイルと参照アートワークを AI に渡します。括弧で囲まれた詳細を置き換えます。プロンプトにある入力の安全性に関する指示をそのままにしておきます。このプロンプトはソース ファイルを編集するためのものです。生成された AI イベント テンプレートの場合は、その機能の保存されたデザイン プロンプトとプレーンテキストを使用します。 data-field バインディング。生成されたテンプレートにスクリプトを追加しないでください。

Customize my-music.html, copied from spotify-overlay.html.
Design: [describe the look or attach a reference].
Colors/fonts/assets: [supply hex colors and local filenames].
OBS canvas and placement: [size and position].

Restyle [chosen music / cohost / AI output] as [design]. Preserve the existing now-playing or reply payload, hide/idle/paused states, and audio ownership. Keep provider keys and setup controls out of the viewer page. For AI Event templates preserve data-field binding and the sandbox: viewer text is data, never a design instruction or generated script.

Read docs/event-reference.html for incoming fields and
docs/overlay-customization-guide.html for local setup and safe rendering.
Keep the existing session/password handling, labels, server routes, query
parameters, URL fragments, and relative asset paths. Use classic scripts
compatible with Chrome 80. Keep executable dependencies packaged locally.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server.
Return the edited files, any additional assets, exact local browser/OBS
setup instructions using placeholders, and the specific tests performed.
Do not put my private session link or credentials into a public example.

このオーバーレイ タイプをテストする

最初にプレビューまたはテスト設定を使用します。の テストメッセージガイド SSN を通じて架空のペイロードを送信する方法について説明しています。実稼働セッションに送信されたテストは、既存の自動化をトリガーできます。

1. Spotify の場合、設定された統合を通じて再生および一時停止します。長いトラック タイトル、カバー アートの欠落、曲のない状態をテストします。
2. 共同ホストの場合、レイアウトに cohost-overlay.html?preview を使用し、プレビューを削除して、SSN を通じてテスト応答を生成します。アイドル状態/通話状態の遷移と音声の複製を確認します。
3. ビルダーの場合は、シミュレーション コントロールを使用します。 AI イベントの場合は、保存とプレビュー、およびそのサンプル イベント コントロールを使用します。名前/ID およびプライベート フラグメントを含む、OBS で実際に保存された出力リンクをテストします。

また、 入力レンダリング チェック 。編集内容を保存した後、リハーサルの合間に OBS ブラウザ ソースを更新し、表示されるインタラクションを繰り返します。ブラウザのプレビューでは、ライブ キャプチャや OBS の動作は確立されません。

その他の資料： AIオーバーレイビルダー · AI共同司会 · AIイベントオーバーレイ · イベントリファレンス · ローカルセットアップのトラブルシューティング.