Merge pull request #744 from hars-21/sound

Audio fixed
ChromeGaming · Aug 10, 2024 · 5d67c4d · 5d67c4d
2 parents 5ae96ab + e1768da
commit 5d67c4d
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -24,9 +24,11 @@
 <body>
 	<script src="./js/global.js"></script>
 
-	<audio id="background-music" autoplay loop>
-		<source src="./assets/sounds/bgMusic.mp3" type="audio/mpeg" />
-	</audio>
+	<div id="permission">
+		<div>🔒 This website is requesting access to autoplay music</div>
+		<button class="req1">Cancel</button>
+		<button class="req2" style="background-color: rgb(0, 200, 255);">Allow</button>
+	</div>
 	<div class="settings">
 		<video autoplay muted class="video" loop id="myVideo">
 
@@ -181,9 +183,8 @@ <h3 class="instructions-heading" style="text-decoration: underline">
 							START
 						</a>
 						<button class="reset-btn button1" id="reset-btn">RESET</button>
-						<button id="music-toggle" onclick="toggleMusic()">
-							Music Off
-						</button>
+						<button id="music-toggle" style="font-size: 1.25rem;"><i
+								class="fas fa-volume-xmark"></i></button>
 					</div>
 				</div>
 			</div>

diff --git a/js/index.js b/js/index.js
@@ -114,26 +114,37 @@ function closeThankYouPopup() {
 }
 
 // Music toggle
-var isPlaying = true;
-function toggleMusic() {
-	var audio = document.getElementById("background-music");
-	var button = document.getElementById("music-toggle");
+let isPlaying = true;
+const access = document.getElementById("permission");
+const button = document.getElementById("music-toggle").children[0];
+const audio = new Audio("/assets/sounds/bgMusic.mp3");
+
+document.querySelector(".req1").addEventListener("click", () => {
+	access.style.display = "none";
+	isPlaying = false;
+	button.classList.remove("fa-volume-high");
+	button.classList.add("fa-volume-xmark");
+});
+
+document.querySelector(".req2").addEventListener("click", () => {
+	access.style.display = "none";
+	audio.play();
+	button.classList.remove("fa-volume-xmark");
+	button.classList.add("fa-volume-high");
+});
+
+document.getElementById("music-toggle").addEventListener("click", () => {
 	if (isPlaying) {
 		audio.pause();
-		button.textContent = "Music On";
+		button.classList.add("fa-volume-xmark");
+		button.classList.remove("fa-volume-high");
 	} else {
 		audio.play();
-		button.textContent = "Music Off";
+		button.classList.add("fa-volume-high");
+		button.classList.remove("fa-volume-xmark");
 	}
 	isPlaying = !isPlaying;
-}
-
-window.onload = function () {
-	var audio = document.getElementById("background-music");
-	audio.play();
-	var button = document.getElementById("music-toggle");
-	button.textContent = "Music Off";
-};
+});
 
 // Cursor -->
 document.addEventListener("DOMContentLoaded", function () {

diff --git a/styles/index.style.css b/styles/index.style.css
@@ -907,6 +907,50 @@ input[type="email"]:focus {
 	color: white;
 }
 
+/* Permission box */
+
+#permission {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	top: 0;
+	right: 0;
+	margin: auto;
+	background: #fff;
+	padding: 2rem;
+	border-radius: 25px;
+	text-align: center;
+	z-index: 10000;
+	width: fit-content;
+	height: fit-content;
+}
+
+#permission::before {
+	content: "";
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background: rgba(0, 0, 0, 0.5);
+	z-index: -1;
+
+}
+
+#permission div {
+	font-size: 1.25rem;
+}
+
+.req1,
+.req2 {
+	font-size: 1rem;
+	margin: 2rem 1rem 0 1rem;
+	padding: 0.75rem 1.25rem;
+	border-radius: 10px;
+	border: none;
+	background: silver;
+}
+
 .disabled {
 	opacity: 0.75;
 }