This tutorial will guide you through the process of implementing Javascript Play Sound On click functionality on your webpage. This technique is very useful for creating interactive elements that enhance user experience by providing auditory feedback upon a click event.
Setting Up the HTML Structure
First, we’ll structure our HTML. This involves creating the necessary elements that will trigger the sound, such as buttons. Each button will represent a different sound.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Just+Me+Again+Down+Here&family=Oooh+Baby&display=swap" rel="stylesheet">
<title>Keyboard ABC Song</title>
</head>
<body>
<h1>
<span class="yellow">A</span><span class="green">B</span
><span class="pink">C</span><span class="blue"> Song</span>
</h1>
<div class="keys_container">
<div class="row">
<button class="key">Q</button>
<button class="key">W</button>
<button class="key">E</button>
<button class="key">R</button>
<button class="key">T</button>
<button class="key">Y</button>
<button class="key">U</button>
<button class="key">I</button>
<button class="key">O</button>
<button class="key">P</button>
</div>
<div class="row">
<button class="key">A</button>
<button class="key">S</button>
<button class="key">D</button>
<button class="key">F</button>
<button class="key">G</button>
<button class="key">H</button>
<button class="key">J</button>
<button class="key">K</button>
<button class="key">L</button>
</div>
<div class="row">
<button class="key">Z</button>
<button class="key">X</button>
<button class="key">C</button>
<button class="key">V</button>
<button class="key">B</button>
<button class="key">N</button>
<button class="key">M</button>
</div>
</div>
<div class="input_container"></div>
<script src="script.js"></script>
Applying CSS Styles
Next, we will add some styles to make our page look visually appealing. The CSS will define the appearance of the buttons and other elements on the page.
body {
box-sizing: border-box;
margin: 0;
padding: 0;
max-width: 100%;
font-family: "Roboto", sans-serif;
background-color: #00334d;
}
h1 {
font-size: 128px;
text-align: center;
margin: 0 0 15px;
font-family: "Just Me Again Down Here", cursive;
}
.yellow {
color: #ffff1a;
}
.green {
color: #4dff4d;
}
.pink {
color: #ff4d94;
}
.blue {
color: #99d6ff;
}
/* three button rows */
.row {
text-align: center;
}
.key {
font-size: 60px;
width: 100px;
height: 100px;
margin: 10px;
cursor: pointer;
background-color: #002233;
color: #f2f2f2;
border: none;
border-radius: 20px;
box-shadow: 8px 8px 25px #00111a;
}
.key:hover {
background-image: linear-gradient(
90deg,
#99d6ff 0%,
#ffff1a 49%,
#ff4d94 80%,
#4dff4d 100%
);
animation: slidebg 5s linear infinite;
color: #002233;
}
@keyframes slidebg {
to {
background-position: 20vw;
}
}
.input_container {
font-family: "Oooh Baby", cursive;
font-size: 46px;
color: white;
letter-spacing: 12px;
margin: 30px 45px 10px;
font-weight: bold;
}
Adding the Javascript Functionality
Now, let’s add the Javascript Play Sound Onclick functionality. This script will listen for click events on the buttons and play the corresponding sounds.
let input_field = document.querySelector(".input_container");
let addedInput = "";
const noteC = new Audio("https://archive.org/download/24-piano-keys/key19.mp3");
const noteG = new Audio("https://archive.org/download/24-piano-keys/key23.mp3");
const noteA = new Audio("https://archive.org/download/24-piano-keys/key24.mp3");
const noteF = new Audio("https://archive.org/download/24-piano-keys/key22.mp3");
const noteE = new Audio("https://archive.org/download/24-piano-keys/key21.mp3");
const noteD = new Audio("https://archive.org/download/24-piano-keys/key20.mp3");
const keys = document.querySelectorAll(".key");
keys.forEach((key) => {
key.addEventListener("click", () => {
switch (key.innerHTML) {
case "A":
case "B":
case "P":
noteC.currentTime = 0;
noteC.play();
break;
case "C":
case "D":
case "G":
case "Q":
case "R":
case "W":
noteG.currentTime = 0;
noteG.play();
break;
case "E":
case "F":
noteA.currentTime = 0;
noteA.play();
break;
case "H":
case "I":
case "S":
case "X":
noteF.currentTime = 0;
noteF.play();
break;
case "J":
case "K":
case "T":
case "U":
case "Y":
noteE.currentTime = 0;
noteE.play();
break;
case "L":
case "M":
case "N":
case "O":
case "V":
case "Z":
noteD.currentTime = 0;
noteD.play();
break;
default:
alert("Ooooops something went wrong here..");
break;
}
let input = key.innerHTML;
if (addedInput.length < 27) {
addedInput += input;
input_field.innerHTML = addedInput;
} else {
addedInput = "";
addedInput += input;
input_field.innerHTML = addedInput;
}
});
});
Adding header assets
Add assets like CDN or fonts to the header.
Adding footer assets
If you have assets to load at the end add them here.
With the HTML, CSS, and JavaScript combined, you’ve successfully implemented Javascript Play Sound Onclick functionality on your webpage, creating an interactive and engaging user experience.
