Carolus Bramnatyo Seno Mahesworo 6209797896 fix: music fixing
2025-12-05 12:37:08 +07:00

72 lines
2.5 KiB
PHP

<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onboard</title>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<audio id="bgm" src="/assets/music/onboard.mp3" loop autoplay></audio>
<audio id="hover-sfx" src="/assets/music/hover.mp3" ></audio>
<div class="container-onboard">
<?php include 'notif.php'; ?>
<?php
if (!empty($_SESSION['flash'])) {
echo "<script>showNotif(" . json_encode($_SESSION['flash']) . ");</script>";
unset($_SESSION['flash']);
}
?>
<h1 data-aos="zoom-out" data-aos-duration="1000">👾 codebeater 👾</h1>
<div class="menu">
<a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="game/thirdperson.html">Game Start</a>
<a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="leaderboard.php">leaderboard</a>
<a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="credit.html">Credit</a>
<a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="logout.php">Exit</a>
</div>
</div>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const bgm = document.getElementById("bgm");
const hoversfx = document.getElementById('hover-sfx');
const buttons = document.querySelectorAll('.hover-btn');
bgm.volume =0.2;
hoversfx.volume =0.2;
buttons.forEach(button => {
button.addEventListener('mouseenter', () => {
hoversfx.currentTime = 0;
hoversfx.play().catch(error => console.log('menunggu iteraksi user'))
});
});
function playBGM(){
bgm.play().then(()=>{
console.log('BGM Berputar')
}).catch(error => {
console.log('auto diblok')
});
}
playBGM();
document.body.addEventListener("click", () => {
if (bgm.paused) {
bgm.play();
}
}, { once: true });
});
</script>
</body>
</html>