I am currently trying to create a feature that plays audio files on mouse enter. When I enter the a specific area, it should play the sounds, but I find it takes almost a minute to load when I use the mouseover event listener. When I use a click event, it works instantly. I was just curious on why this is the case.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS Main Stylesheet-->
<link rel="stylesheet" href="css/main.css" />
<title>Guitar App</title>
</head>
<body>
<div>
<audio id="lowE" src="sounds/lowE.wav"></audio>
<audio id="A" src="sounds/A.wav"></audio>
<audio id="D" src="sounds/D.wav"></audio>
<audio id="G" src="sounds/G.wav"></audio>
<audio id="B" src="sounds/B.ogg"></audio>
<audio id="highE" type="audio/ogg" src="sounds/highE.wav"></audio>
</div>
<div class="container"></div>
<!--Main Script-->
<script src="scripts/app.js"></script>
</body>
</html>
$primary-color: #aa1e23;
body {
font-size: 62.5%;
margin: 0;
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 99.7%;
height: 100vh;
border: 2px solid $primary-color;
.box {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 2rem;
width: 100px;
height: 100px;
background-color: $primary-color;
}
.box:hover {
transform: scale(105%);
}
}
}
const stringSounds = ["lowE", "A", "D", "G", "B", "highE"];
stringSounds.forEach((stringSound) => {
const div = document.createElement("div");
div.classList.add("box");
div.innerText = stringSound;
div.addEventListener("mouseover", () => {
document.querySelector(`#${stringSound}`).play();
});
document.querySelector(".container").appendChild(div);
});