<!DOCTYPE html>
<html>
<head>
<title>歌を歌おう！</title>
<style type="text/css">
.container{
text-align: center;
margin-top: 50px;
}
#lyrics{
font-size: 25px;
margin-top: 20px;
}
#answer{
font-size: 20px;
margin-top: 20px;
width: 400px;
padding: 10px;
text-align: center;
border: 2px solid #ccc;
border-radius: 5px;
}
#check{
font-size: 20px;
margin-top: 20px;
padding: 10px 30px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#next{
font-size: 20px;
margin-top: 20px;
padding: 10px 30px;
background-color: #008CBA;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>歌を歌おう！</h1>
<audio id="audio" src="Path/to/your/music" controls></audio>
<div id="lyrics"></div>
<input type="text" id="answer" placeholder="次の歌詞を入力してください">
<br>
<button id="check" onclick="checkAnswer()">答え合わせする</button>
<button id="next" onclick="nextLyrics()">次の歌詞へ</button>
</div>
<script type="text/javascript">
let lyricsList = [
{
lyrics: "やあ 元気かい？ ぼくは元気だよ",
answer: "ただ さみしくて 眠れない夜は"
},
{
lyrics: "瞳を閉じて 耳すませば",
answer: "あの頃のキミの声がするよ"
},
{
lyrics: "くもり空わたしが泣いている",
answer: "今夜もお月さんは見ている"
},
{
lyrics: "青い地球に雲が流れていた",
answer: "手を伸ばせばつかめるかな"
}
];
let currentLyricsIndex = 0;
let audio = document.getElementById("audio");
let lyrics = document.getElementById("lyrics");
let answer = document.getElementById("answer");
function loadLyrics(){
lyrics.innerHTML = lyricsList[currentLyricsIndex].lyrics;
answer.value = "";
}
function checkAnswer(){
if(answer.value === lyricsList[currentLyricsIndex].answer){
alert("正解！ 次の歌詞に進みます。");
nextLyrics();
}else{
alert("残念！ もう一度挑戦してください。");
}
}
function nextLyrics(){
if(currentLyricsIndex < lyricsList.length - 1){
currentLyricsIndex ++;
loadLyrics();
}else{
alert("おめでとうございます！ 全ての歌詞に回答しました。");
}
}
loadLyrics();
audio.play();
</script>
</body>
</html>
※このコードはセキュリティ上の問題がなく正しい動作を保証するものではありません。参考程度にご利用ください。
