Music Screen 使い方

このアプリケーションは、ライブ配信画面にオーディオビジュアライザー、チャット、時計などを統合して表示するためのツールです。OBSなどの配信ソフトでウィンドウキャプチャを行い、クロマキー合成等で使用することを想定しています。

導入の流れ

アプリの起動から配信準備完了までのステップです。

1. 起動: 配布フォルダ内の music-screen.exe をダブルクリックして開きます。
2. 設定画面を開く: 画面右下の設定アイコン をクリックして、各項目を設定します。
3. 連携設定: 必要に応じてOBS WebSocket URLやTwitch IDを入力し、下の保存ボタンを押して設定を保存します。
4. OBSでの取り込み: OBS側で「ウィンドウキャプチャ」ソースを追加し、画像のように設定をします。
5. 透過（任意）: OBSのフィルタで「クロマキー」を適用し、設定した箇所を透過します。
6. 開始: 画面下部の「再生ボタン」を押し、システム音声の共有を許可して動作を開始します。

基本操作

オーディオビジュアライザーの開始 (音声取得)

画面下部中央の「再生ボタン」をクリックすると、画面共有のダイアログが表示されます。

• システム音声の共有: ビジュアライザーを動作させるため、共有時のオプションで「システムオーディオも共有」に必ずチェックを入れ、画面全体またはウィンドウを選択してください。

シーンの切り替え

画面右下のアイコンや「再生ボタン」の左右にある「前のシーン」「次のシーン」をクリックすることで、表示モード（シーン）を切り替えることができます。

• Standby: 待機画面。開始予定時刻などを表示します。
• Chat: 雑談向け。Twitchのチャットを画面に表示します。
• Game: ゲーム配信向け。カメラ枠やゲーム画面枠を表示します。
• Ending: 終了画面。
• Setting: 設定画面。

OBS連携設定を行うと、このアプリ上のシーン切り替えに連動してOBSのシーンも自動で切り替えることができます。

画面の見方と編集

フッター情報

• タイトル: 画面左下のタイトルテキスト（例: Live Stream Title）は、クリックして直接書き換えることができます。 ※「Standby」シーンの「Start at 21:00」の「21:00」もクリックして直接書き換えることができます。
• SNS ID: 設定されたSNS IDが順番に切り替わって表示されます。
• 経過時間: 配信開始（再生ボタン押下）からの経過時間を表示します。バーは設定した目標時間に対する進捗を表します。
• 現在時刻: 現在の時刻を表示します。

設定 (Setting)

歯車アイコン から設定画面にアクセスし、以下の項目を変更できます。

設定を変更したら保存ボタンを押して設定の保存をしてください

表示・デザイン設定

• SNS IDs: フッターにローテーション表示したいIDやテキストを改行区切りで入力します。HTMLタグも使用可能です。また、Font Awesomeのアイコンも表示可能です。
• SNS ID 切り替え秒数 (秒): SNS IDリストの項目を切り替える間隔を秒単位で指定します。
• シーン切り替えフェード時間 (ms): シーン遷移時のフェードアニメーションにかかる時間をミリ秒で指定します。
• 背景色: アプリケーション全体の背景色を指定します。

• ダークモード: UI全体を暗いテーマ（黒基調）に切り替えます。

シーン別設定

OBS上で特定の位置にカメラやゲーム画面を配置するためのクロマキーを設定できます。

• チャットシーン - カメラ背景色: 雑談（Chat）シーンでのカメラ表示エリアの背景色と、その表示/非表示を設定します。
• ゲームシーン - ゲームエリア背景色: ゲーム（Game）シーンでのゲーム画面表示エリアの背景色と、その表示/非表示を設定します。
• ゲームシーン - カメラ背景色: ゲーム（Game）シーンでのカメラ表示エリアの背景色と、その表示/非表示を設定します。
• ゲームシーン - カメラ枠を表示: ゲームシーンでカメラ枠自体を表示するかどうかを切り替えます。

配信・連携設定

• Twitchチャンネル名: コメントを取得したいTwitchのチャンネルID（ユーザーID）を入力します。
• 最大チャット表示数: 画面上に表示するチャットメッセージの最大数を設定します。これを超えると古いメッセージから消えます。
• 配信目標時間 (分): フッターのプログレスバーが100%になるまでの時間を分単位で設定します。
• OBS WebSocket URL: OBSのWebSocketサーバーのアドレスです。デフォルトは ws://localhost:4455 です。
• OBS WebSocket パスワード: OBS側の「ツール > WebSocketサーバー設定」で設定したパスワードを入力します。

OBS連携 (WebSocket)

OBS Studioと連携して、アプリのシーン切り替えに合わせてOBSのシーンも自動で切り替える機能です。

アプリのシーン操作とOBSを連動させるには、OBS側で設定をする必要があります。

1. 次の名前のシーンをOBSに追加する
• standby
• chat
• game
• ending

2. 各シーンのソースに「ウィンドウキャプチャ」ソースを追加し、画像のように設定をします。

3. OBSのメニューバー [ツール] > [WebSocket サーバー設定] を開きます。
   ※項目がない場合はOBSを最新版(v28以上)に更新してください。
4. 「WebSocketサーバーを有効にする」にチェックを入れます。
5. 「サーバー設定」のサーバーポート（デフォルト: 4455）と、認証を有効にしてサーバーパスワードを確認・設定します。

6. アプリの設定画面に戻り、以下を入力します。
   • OBS WebSocket URL: ws://localhost:4455 (ポート番号を合わせる)
   • OBS WebSocket パスワード: OBSで設定したサーバーパスワード

7. アプリ側でシーンを切り替えたときにOBS側もシーンが切り替わっていれば設定完了です。

トラブルシューティング

Q. ビジュアライザーが動かない

A. 配信開始ボタンを押した際、「音声を共有」のチェックボックスを忘れていないか確認してください。また、ブラウザやOSの権限設定でマイク/音声共有が許可されているか確認してください。

※OSのバージョンが古いと動かない可能性があります。

Q. OBSのシーンが切り替わらない

A. 以下の点を確認してください。

• OBS側で「obs-websocket」サーバーが有効になっているか（ツール > WebSocketサーバー設定）。
• ポート番号とパスワードが設定と一致しているか。
• OBS側のシーン名と、アプリ側で指定しているシーン名が一致する必要がある場合があります。