<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>音楽プレイヤー</title>
</head>
<body>
<h1>音楽プレイヤー</h1>
<p id="nowPlaying">選択された曲: なし</p>
<button id="initBtn">🎵 音楽再生を有効にする</button>
<audio id="audioPlayer" controls></audio>
<script>
const audioPlayer = document.getElementById("audioPlayer");
const nowPlaying = document.getElementById("nowPlaying");
const initBtn = document.getElementById("initBtn");
// ▼▼▼【追加】効果音再生用のプレイヤーと、音楽サーバーのホスト名 ▼▼▼
const sePlayer = new Audio();
// ★★★ 音楽サーバーのIPアドレス `192.168.1.11` はご自身の環境に合わせてください ★★★
const musicServerHost = 'http://192.168.1.11:8890';
// ★★★ WebSocketサーバー（大学PC）のIPアドレスはご自身の環境に合わせてください ★★★
const wsServerHost = '172.17.54.120';
let currentFileUrl = "";
const silentMp3 = "data:audio/mp3;base64,//uQxAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAACAAACcQCA//////////8AAA==";
initBtn.addEventListener("click", () => {
audioPlayer.src = silentMp3;
audioPlayer.play().then(() => {
console.log("Autoplayが許可されました");
audioPlayer.pause(); audioPlayer.src = "";
initBtn.disabled = true; initBtn.style.display = "none";
}).catch(err => console.error("初期再生失敗", err));
});
const conn = new WebSocket(`ws://${wsServerHost}:8888`);
conn.onmessage = ev => {
let msg;
try { msg = JSON.parse(ev.data); } catch { return; }
switch (msg.type) {
case "select":
currentFileUrl = msg.url;
audioPlayer.src = currentFileUrl;
nowPlaying.textContent = `選択された曲: ${decodeURIComponent(currentFileUrl.split('/').pop())}`;
console.log("曲読み込み:", currentFileUrl);
break;
case "play":
if (!currentFileUrl) return;
audioPlayer.play().catch(err => console.error("再生失敗:", err));
break;
case "pause":
audioPlayer.pause();
break;
case "stop":
audioPlayer.pause();
audioPlayer.currentTime = 0;
break;
case "announce":
if (msg.queue && msg.queue.length > 0) {
if (!audioPlayer.paused) {
audioPlayer.pause();
console.log("挙手があったため再生を一時停止しました。");
}
}
break;
// ▼▼▼【追加】正解・不正解の処理 ▼▼▼
case "correct":
audioPlayer.pause();
audioPlayer.currentTime = 0;
sePlayer.src = `${musicServerHost}/SE/correct.mp3`;
sePlayer.play();
nowPlaying.innerHTML = `⭕ 正解！<br>答え: ${decodeURIComponent(msg.answer)}`;
break;
case "incorrect":
audioPlayer.pause(); // 曲は一時停止
sePlayer.src = `${musicServerHost}/SE/incorrect.mp3`;
sePlayer.play();
nowPlaying.textContent = `❌ 不正解...`;
break;
}
};
conn.onopen = () => console.log("WebSocket 接続成功！");
conn.onerror = (e) => console.error("WebSocket エラー", e);
conn.onclose = () => console.log("WebSocket 切断");
</script>
</body>
</html>
Takizawa Soetsu