2526-web/kelompok12-codebeater
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: music fixing

Browse Source
This commit is contained in:
Carolus Bramnatyo Seno Mahesworo 2025-12-05 12:37:08 +07:00
parent de6b199a2c
commit 6209797896
6 changed files with 51 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/music/hover.mp3 Normal file
View File

Binary file not shown.

5
src/credit.html
View File

@ -16,7 +16,7 @@
</head> </head>
<body> <body>
<audio id="bgm" src="/assets/music/credit.mp3"></audio> <audio id="bgm-crdt" src="/assets/music/credit.mp3" loop autoplay></audio>
<div class="container-credits" id="credits"> <div class="container-credits" id="credits">
<a class="back" href="onboard.php" data-aos="fade-in" data-aos-duration="3000">✖</a> <a class="back" href="onboard.php" data-aos="fade-in" data-aos-duration="3000">✖</a>
<div class="credits"> <div class="credits">
@ -96,7 +96,8 @@
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const bgm = document.getElementById("bgm"); const bgm = document.getElementById("bgm-crdt");
bgm.volume = 0.2;
bgm.play() bgm.play()
const inner = document.getElementById("creditsInner"); const inner = document.getElementById("creditsInner");
let y = 0; let y = 0;

4
src/game/firstperson.html
View File

@ -12,7 +12,7 @@
</head> </head>
<body> <body>
<audio id="bgm" src="/assets/music/game.mp3"></audio> <audio id="bgm" src="/assets/music/game.mp3" loop autoplay></audio>
<audio id="sfx" src="/assets/music/slash.mp3"></audio> <audio id="sfx" src="/assets/music/slash.mp3"></audio>
<audio id="sfxhrt" src="/assets/music/hurt.mp3"></audio> <audio id="sfxhrt" src="/assets/music/hurt.mp3"></audio>
<div class="container-first"> <div class="container-first">
@ -41,6 +41,8 @@
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const bgm = document.getElementById("bgm"); const bgm = document.getElementById("bgm");
bgm.volume = 0.1;
bgm.loop(true)
bgm.play() bgm.play()
}); });

15
src/js/firstperson.js
View File

@ -105,7 +105,7 @@ function selectAnswer(e){
if(wrongCount >= maxWrong){ if(wrongCount >= maxWrong){
setTimeout(()=>{ setTimeout(()=>{
showScore(); showScore();
}, 500); }, 1500);
return; return;
} }
} }
@ -113,9 +113,8 @@ function selectAnswer(e){
Array.from(answerBtn.children).forEach(button => { Array.from(answerBtn.children).forEach(button => {
if(button.dataset.correct === "true") button.classList.add("correct"); if(button.dataset.correct === "true") button.classList.add("correct");
button.disabled = true; button.disabled = true;
}, });
setTimeout(nextQuestion, 500) setTimeout(nextQuestion, 5000)
);
} }
function showScore(){ function showScore(){
@ -152,9 +151,13 @@ function postScore(score){
console.log("Server response:", data); console.log("Server response:", data);
if(data.success || data.message === "Score accumulated") { if(data.success || data.message === "Score accumulated") {
window.location.href = "../leaderboard.php"; setTimeout(() => {
window.location.href = "../leaderboard.php";
}, 1500);
} else { } else {
window.location.href = "../leaderboard.php"; setTimeout(() => {
window.location.href = "../leaderboard.php";
}, 1500);
} }
}) })
.catch(err => { .catch(err => {

5
src/leaderboard.php
View File

@ -42,7 +42,7 @@ if($result){
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<audio id="bgm" src="/assets/music/leaderboard.mp3"></audio> <audio id="bgm" src="/assets/music/leaderboard.mp3" loop autoplay></audio>
<div class="container-board"> <div class="container-board">
<a class="back" href="onboard.php" data-aos="fade-in" data-aos-duration="3000">✖</a> <a class="back" href="onboard.php" data-aos="fade-in" data-aos-duration="3000">✖</a>
<div class="chara"> <div class="chara">
@ -103,8 +103,11 @@ if($result){
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const bgm = document.getElementById("bgm"); const bgm = document.getElementById("bgm");
bgm.loop = true
bgm.volume = 0.2
bgm.play() bgm.play()
}); });
</script> </script>
</body> </body>

37
src/onboard.php
View File

@ -14,7 +14,8 @@ session_start();
</head> </head>
<body> <body>
<audio id="bgm" src="/assets/music/onboard.mp3"></audio> <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"> <div class="container-onboard">
<?php include 'notif.php'; ?> <?php include 'notif.php'; ?>
<?php <?php
@ -25,10 +26,10 @@ session_start();
?> ?>
<h1 data-aos="zoom-out" data-aos-duration="1000">👾 codebeater 👾</h1> <h1 data-aos="zoom-out" data-aos-duration="1000">👾 codebeater 👾</h1>
<div class="menu"> <div class="menu">
<a 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="game/thirdperson.html">Game Start</a>
<a 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="leaderboard.php">leaderboard</a>
<a 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="credit.html">Credit</a>
<a data-aos="zoom-out" data-aos-duration="2000" href="logout.php">Exit</a> <a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="logout.php">Exit</a>
</div> </div>
</div> </div>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
@ -38,8 +39,32 @@ session_start();
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const bgm = document.getElementById("bgm"); const bgm = document.getElementById("bgm");
bgm.play() 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> </script>
</body> </body>