シンガー画面

[tyohs]

概要

シンガー役のプレイヤーが歌詞を見ながら歌う画面を実装します。

参照ドキュメント

• 03_ROLES.md - 3.3 シンガー
• 12_TIME_SYNC.md - 時間同期

実装内容

画面作成

• /room/[roomId]/singer/page.tsx を作成

表示項目

• 曲名・アーティスト
• 歌詞表示（中央に大きく）
• 応援コメントエリア（バンド・お邪魔からのメッセージ）
• 残り時間または進行バー

歌詞表示

// 仮の歌詞データ
const LYRICS = [
  { time: 0, text: "♪ 最初の歌詞" },
  { time: 5000, text: "♪ 次の歌詞" },
  { time: 10000, text: "♪ その次の歌詞" },
];

[tyohs]

import { useSyncedAudio } from '@/hooks/useSyncedAudio';
// セッションのsong_started_atを使って同期再生
const audioRef = useSyncedAudio(session?.song_started_at, audioUrl);

// 曲が終わったらリザルト画面へ
useEffect(() => {
if (session?.status === 'finished') {
router.push(/room/${roomId}/result);
}
}, [session?.status]);