fixed sound inconsistencies by using howler.js

Author: Coding-Cactus

index.html

@@ -45,6 +45,9 @@ <h5>Slide the tiles to correct the picture!</h5>
 				--><div class="tile row3 col3" id="9"></div><!--
 			--></div><!--
 		--></div>
+
+		
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js" integrity="sha512-L6Z/YtIPQ7eU3BProP34WGU5yIRk7tNHk7vaC2dB1Vy1atz6wl9mCkTPPZ2Rn1qPr+vY2mZ9odZLdGYuaBk7dQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 		<script src="script.js"></script>
 	</body>
 </html>

script.js

@@ -158,11 +158,9 @@ function _() {
 			document.getElementById("time").innerHTML = displayTime(Math.floor((new Date().getTime() - timeStart)/1000));
 		}, 250);
 
-		// dodgy way to play the sound while another is playing
-		const sound1 = new Audio('media/slide.wav');
-		const sound2 = new Audio('media/slide.wav');
-		const sound3 = new Audio('media/slide.wav');
-		const sound4 = new Audio('media/slide.wav');
+		const sound = new Howl({
+			src: ['media/slide.wav']
+		});
 
 		document.querySelectorAll(".tile").forEach( tile => {
 			tile.addEventListener("click", () => {
@@ -172,7 +170,7 @@ function _() {
 
 				if (row < 3) {
 					if (document.getElementById("row"+String(row + 1)).children[col].className.includes("blank")) {
-						sound1.play();
+						sound.play();
 						tile.className += " down";
 						setTimeout(() => {
 							document.getElementById("row"+String(row + 1)).children[col].className = tile.className.replace(" down", "");
@@ -185,7 +183,7 @@ function _() {
 					}
 				} if (row > 1) {
 					if (document.getElementById("row"+String(row - 1)).children[col].className.includes("blank")) {
-						sound2.play();
+						sound.play();
 						tile.className += " up";
 						setTimeout(() => {
 							document.getElementById("row"+String(row - 1)).children[col].className = tile.className.replace(" up", "");
@@ -198,7 +196,7 @@ function _() {
 					}
 				} if (col < 2) {
 					if (document.getElementById("row"+String(row)).children[col+1].className.includes("blank")) {
-						sound3.play();
+						sound.play();
 						tile.className += " right";
 						setTimeout(() => {
 							document.getElementById("row"+String(row)).children[col+1].className = tile.className.replace(" right", "");
@@ -211,7 +209,7 @@ function _() {
 					}
 				} if (col > 0) {
 					if (document.getElementById("row"+String(row)).children[col-1].className.includes("blank")) {
-						sound4.play();
+						sound.play();
 						tile.className += " left";
 						setTimeout(() => {
 							document.getElementById("row"+String(row)).children[col-1].className = tile.className.replace(" left", "");