<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>出題者ページ</title>
<link rel="stylesheet" href="/css/host.css">
</head>
<body>
<h1>出題者ページ</h1>
<p id="currentSong">現在の曲: 未選択</p>
<div class="button-group">
<button id="prevBtn">前の曲</button>
<button id="nextBtn">🎶 次の曲</button>
<button id="playBtn">▶ 再生</button>
<button id="pauseBtn">⏸ 一時停止</button>
<button id="stopBtn">⏹ 停止</button>
<button id="resetBtn">🔁 挙手リセット</button>
</div>
<audio id="audioPlayer" controls></audio>
<p id="announce">誰も挙手していません</p>
<script>
const songLabel = document.getElementById("currentSong");
const playBtn = document.getElementById("playBtn");
const pauseBtn = document.getElementById("pauseBtn");
const stopBtn = document.getElementById("stopBtn");
const audioPlayer = document.getElementById("audioPlayer");
const announce = document.getElementById("announce");
const resetBtn = document.getElementById("resetBtn");
const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");
const serverIP = location.hostname;
let queue = [];
let musicFiles = [];
let currentIndex = -1;
pauseBtn.addEventListener("click", () => {
audioPlayer.pause();
conn.send(JSON.stringify({ type: "pause" })); // ← この行を追加
});
fetch("http://172.17.54.122:8889/music_list.json")
.then(res => res.json())
.then(data => {
// ファイル名を取得して番号順にソート
musicFiles = data.files.sort((a, b) => {
// 先頭の番号部分を抜き出して数値比較する例
const numA = parseInt(a.split('_')[0], 10);
const numB = parseInt(b.split('_')[0], 10);
return numA - numB;
});
// ここで選択用のUIに曲を追加する処理は無し！
});
// WebSocket 接続
const conn = new WebSocket(`ws://${location.hostname}:8888`);
// 再生ボタン
playBtn.addEventListener("click", () => {
if (!audioPlayer.src) return;
audioPlayer.play();
conn.send(JSON.stringify({ type: "play" }));
});
// 停止ボタン
stopBtn.addEventListener("click", () => {
audioPlayer.pause();
audioPlayer.currentTime = 0;
conn.send(JSON.stringify({ type: "stop" }));
});
// リセットボタン（修正済み）
resetBtn.addEventListener("click", () => {
queue = [];
announce.textContent = "誰も挙手していません（リセット）";
conn.send(JSON.stringify({ type: "announce", queue })); // ✅ ここが変更点
});
// WebSocketメッセージ処理
conn.onmessage = ev => {
let msg;
try {
msg = JSON.parse(ev.data);
} catch {
return;
}
switch (msg.type) {
case "select":
announce.textContent = "曲選択完了";
break;
case "play":
break;
case "stop":
break;
case "raise":
queue.push(msg.name);
audioPlayer.pause(); // 一時停止
// 挙手順に表示（改行あり）
announce.textContent = queue
.map((name, i) => `${i + 1}. ${name} さんが挙手`)
.join("\n");
// 他クライアントにも配信
conn.send(JSON.stringify({ type: "announce", queue }));
break;
case "announce":
// ここはホストには影響しない（回答者に向けた処理）
break;
}
};
prevBtn.addEventListener("click", () => {
if (musicFiles.length === 0) return;
currentIndex = (currentIndex - 1 + musicFiles.length) % musicFiles.length;
const prevFile = musicFiles[currentIndex];
const url = `http://${serverIP}:8889/music/${encodeURIComponent(prevFile)}`;
audioPlayer.src = url;
conn.send(JSON.stringify({ type: "select", file: prevFile }));
songLabel.textContent = `現在の曲: ${prevFile}`;
});
nextBtn.addEventListener("click", () => {
if (musicFiles.length === 0) return;
currentIndex = (currentIndex + 1) % musicFiles.length; // 次へ、最後なら最初に戻る
const nextFile = musicFiles[currentIndex];
const url = `http://${serverIP}:8889/music/${encodeURIComponent(nextFile)}`;
audioPlayer.src = url;
conn.send(JSON.stringify({ type: "select", file: nextFile }));
songLabel.textContent = `現在の曲: ${nextFile}`;
});
conn.onopen = () => console.log("WebSocket 接続成功！");
conn.onerror = () => console.error("WebSocket エラー");
conn.onclose = () => console.log("WebSocket 切断");
</script>
</body>
</html>
Takizawa Soetsu