<!DOCTYPE html>
<html>
<head>
<title>BGM and SE App</title>
</head>
<body>
<div id="bgm">
<audio id="bgm-audio" loop src=""></audio>
</div>
<div id="se">
<button onclick="playSE(1)">SE 1</button>
<button onclick="playSE(2)">SE 2</button>
<button onclick="playSE(3)">SE 3</button>
<button onclick="playSE(4)">SE 4</button>
<button onclick="playSE(5)">SE 5</button>
<button onclick="playSE(6)">SE 6</button>
<button onclick="playSE(7)">SE 7</button>
<button onclick="playSE(8)">SE 8</button>
<button onclick="playSE(9)">SE 9</button>
<button onclick="playSE(10)">SE 10</button>
</div>
<div id="setting">
<h3>Set BGM</h3>
<input type="file" id="bgm-file">
<button onclick="setBGM()">Set</button>
<h3>Set SE</h3>
<div id="se-setting">
<input type="file" id="se-file-1">
<input type="text" id="se-text-1" placeholder="SE 1">
<br>
<input type="file" id="se-file-2">
<input type="text" id="se-text-2" placeholder="SE 2">
<br>
<input type="file" id="se-file-3">
<input type="text" id="se-text-3" placeholder="SE 3">
<br>
<input type="file" id="se-file-4">
<input type="text" id="se-text-4" placeholder="SE 4">
<br>
<input type="file" id="se-file-5">
<input type="text" id="se-text-5" placeholder="SE 5">
<br>
<input type="file" id="se-file-6">
<input type="text" id="se-text-6" placeholder="SE 6">
<br>
<input type="file" id="se-file-7">
<input type="text" id="se-text-7" placeholder="SE 7">
<br>
<input type="file" id="se-file-8">
<input type="text" id="se-text-8" placeholder="SE 8">
<br>
<input type="file" id="se-file-9">
<input type="text" id="se-text-9" placeholder="SE 9">
<br>
<input type="file" id="se-file-10">
<input type="text" id="se-text-10" placeholder="SE 10">
<br>
<button onclick="setSE()">Set</button>
</div>
</div>
<script>
var bgmAudio = document.getElementById("bgm-audio");
var se = [];
var seText = [];
//Set BGM
function setBGM() {
var file = document.getElementById("bgm-file").files[0];
var src = URL.createObjectURL(file);
bgmAudio.src = src;
bgmAudio.play();
}
//Set SE
function setSE() {
for (var i=0; i<10; i++) {
var file = document.getElementById("se-file-"+(i+1)).files[0];
if (file) {
var src = URL.createObjectURL(file);
se[i] = new Audio(src);
se[i].addEventListener('ended', function() {
this.currentTime = 0;
this.pause();
}, false);
}
else {
se[i] = null;
}
seText[i] = document.getElementById("se-text-"+(i+1)).value;
var button = document.getElementsByTagName("button")[i];
button.innerHTML = seText[i];
}
}
//Play SE
function playSE(index) {
if (se[index-1]) {
se[index-1].play();
}
}
</script>
</body>
</html>
