Change : add event listener for music and change button text to english

Author: Habbatul

index.html

@@ -41,8 +41,8 @@
     <canvas id="canvas"></canvas>
 
     <div id="container-buttonx" class="hidden" style="transition: opacity 0.5s ease-in-out; opacity: 0; position: absolute; top: 8%; left: 50%; transform: translate(-50%, -50%); z-index: 99; display: flex; justify-content: center; align-items: center;">
-        <button id="buttonx" class="jersey" style="background: linear-gradient(120deg, rgba(0, 201, 255, 0.2), rgba(126, 208, 255, 0.8)); border: 1px solid rgb(0, 0, 0); color: black; padding: 0.4rem 1rem; text-align: center; text-decoration: none; display: inline-block; font-size: 1rem; cursor: pointer; border-radius: 10px; margin-right: 0.5rem; width: 5.5rem;">Menuju Box</button>
-        <button id="buttonx2" class="jersey" style="background: linear-gradient(120deg, rgba(0, 201, 255, 0.2), rgba(126, 208, 255, 0.8)); border: 1px solid rgb(0, 0, 0); color: black; padding: 0.4rem 1rem; text-align: center; text-decoration: none; display: inline-block; font-size: 1rem; cursor: pointer; border-radius: 10px; margin-left: 0.5rem; width: 5.5rem;">Menuju Nostalgia</button>
+        <button id="buttonx" class="jersey" style="background: linear-gradient(120deg, rgba(0, 201, 255, 0.2), rgba(126, 208, 255, 0.8)); border: 1px solid rgb(0, 0, 0); color: black; padding: 0.4rem 1rem; text-align: center; text-decoration: none; display: inline-block; font-size: 1rem; cursor: pointer; border-radius: 10px; margin-right: 0.5rem; width: 5.5rem;">Go To the Box</button>
+        <button id="buttonx2" class="jersey" style="background: linear-gradient(120deg, rgba(0, 201, 255, 0.2), rgba(126, 208, 255, 0.8)); border: 1px solid rgb(0, 0, 0); color: black; padding: 0.4rem 1rem; text-align: center; text-decoration: none; display: inline-block; font-size: 1rem; cursor: pointer; border-radius: 10px; margin-left: 0.5rem; width: 5.5rem;">Go To Nostalgia</button>
     </div>
     <div id="container-objective" class="hidden inter" style="transition: opacity 0.5s ease-in-out; opacity: 1; position: absolute; top: 5rem; left: 50%; transform: translate(-50%, -50%); z-index: 99; display: flex; justify-content: center; align-items: center;">
         <p style="color: white;text-align: center;font-size: 2.5rem;font-weight:300;">Click The Cube</p>

main.js

@@ -24,8 +24,12 @@ renderer.antialias = true;
 const music = new Audio("audio/liminal-horror.mp3");
 music.loop = true;
 music.volume = 0.5;
-music.play();
 
+canvas.addEventListener('click', ()=>{
+  if (music.paused) {
+    music.play();
+  }
+})
 
 //================== Loader untuk jpeg jadi hdri juga ada cube untuk scene awal ==================
 let cube;