97 lines
2.4 KiB
JavaScript
97 lines
2.4 KiB
JavaScript
const $ = (id) => document.getElementById(id);
|
|
|
|
let currentAudio = null;
|
|
function playAudio(newAudio) {
|
|
// --------------
|
|
// HELPERS
|
|
// --------------
|
|
const TIME_STEP = 500;
|
|
const VOL_STEP = .05;
|
|
|
|
function fadeOut(audio) {
|
|
const intervalId = setInterval(() => {
|
|
audio.volume = Math.max(0, audio.volume - VOL_STEP);
|
|
if (audio.volume <= 0) {
|
|
clearInterval(intervalId);
|
|
}
|
|
}, TIME_STEP)
|
|
}
|
|
|
|
function fadeIn(audio) {
|
|
audio.volume = 0;
|
|
audio.play();
|
|
const intervalId = setInterval(() => {
|
|
audio.volume = Math.min(1, audio.volume + VOL_STEP);
|
|
if (audio.volume >= 1) {
|
|
clearInterval(intervalId);
|
|
}
|
|
}, TIME_STEP)
|
|
}
|
|
// --------------
|
|
|
|
// --------------
|
|
// MAIN LOGIC
|
|
// --------------
|
|
|
|
const prevAudio = currentAudio;
|
|
|
|
if (prevAudio === newAudio)
|
|
return;
|
|
|
|
if (prevAudio) {
|
|
fadeOut(prevAudio);
|
|
}
|
|
|
|
fadeIn(newAudio);
|
|
|
|
currentAudio = newAudio;
|
|
// --------------
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", async function() {
|
|
const $ = (id) => document.getElementById(id);
|
|
|
|
const classNames = ["rogue", "knight", "warrior"];
|
|
const audios = {};
|
|
|
|
for (const className of classNames) {
|
|
const audio = document.createElement("audio");
|
|
audio.src = `https://bladeandbrawn.com/${className}.ogg`;
|
|
audio.loop = true;
|
|
audio.volume = 0;
|
|
audio.id = `audio-${className}`;
|
|
$("audioContainer").appendChild(audio);
|
|
audios[className] = audio;
|
|
}
|
|
|
|
await Promise.all(classNames.map(async (className) => {
|
|
const audio = audios[className];
|
|
try {
|
|
await audio.play();
|
|
audio.pause();
|
|
audio.currentTime = 0;
|
|
} catch (e) {
|
|
console.warn(`Autoplay failed for ${className}:`, e);
|
|
}
|
|
}));
|
|
|
|
// Start all in perfect sync
|
|
classNames.forEach(className => {
|
|
const audio = audios[className];
|
|
audio.currentTime = 0;
|
|
audio.play();
|
|
});
|
|
|
|
// Hook up buttons
|
|
classNames.forEach(className => {
|
|
$(`btn-${className}`).onclick = () => {
|
|
$("currentClass").textContent = className;
|
|
playAudio(audios[className]);
|
|
};
|
|
});
|
|
|
|
// Set initial state
|
|
$("currentClass").textContent = "rogue";
|
|
playAudio(audios["rogue"]);
|
|
});
|