Implementing .mp3 sound files in your JavaScript project

For my JavaScript project that I was doing for the Flatiron School, I decided to make an interactive piano. To my disappointment (or relief?), it seemed that the internet was already populated with many different pianos powered by different languages. Being a shaky junior developer, this encouraged me to continue down this path to see if I could come close to meeting some of the standards passed down by these coding legends.

When working on a JavaScript single-page application, your file structure should include a folder called assets. Going along with what Ruby taught me in terms of the separation of concerns, I divided my JavaScript, CSS, and HTML files into their own respective folders. When working on designing an instrument, arguably the most important aspect is the sound the instrument will play. Under assets I created sounds and in there were three additional folders with the names of each type of piano Sound I wanted to play; Grand Piano, Saw Synth, and Voice. Each of these would be populated with .mp3 files of the sounds that belongs to notes of that piano.

The idea was to ultimately iterate over each of these files as a PATCH request whenever the user wanted to select a new type of piano. On the coding front end side of things, this required a switch function to properly identify and utilize the keys when clicked.

keyboard = document.querySelector(".keyboard");keyboard.addEventListener("click", (event) => {
event.preventDefault();
const { id } = event.target;
switch (id) {
case "c":
c.play();
break;
case "cSharp":
cSharp.play();
break;
case "d":
d.play();
break;
case "dSharp":
dSharp.play();
break;
case "e":
e.play();
break;
case "f":
f.play();
break;
case "fSharp":
fSharp.play();
break;
case "g":
g.play();
break;
case "gSharp":
gSharp.play();
break;
case "a":
a.play();
break;
case "aSharp":
aSharp.play();
break;
case "b":
b.play();
break;
default:
null;
}
});

Ultimately this very simple invoking of the .mp3 files using the .play method allowed for my application to render unique sounds based on the HTML/CSS/JavaScript written into the program. I hope you enjoyed reading and learned something from my discoveries. Sound is a very important part of the online experience and implementing it correctly can be a powerful tool in your coding arsenal. Good luck in your continued journey as a coder.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Learn JavaScript with Program Templates: Select From Alternatives

Pagination in React: The Router Setup

Basic setup of a nodeJS project — JS Guild

JSON Web Token (JWT) in node.js (Implementing using Refresh token)

Deno 1.0 What ? NodeJS is dead ? are you serious ?

Building Geckoboard Lite

Exactly term couple.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Arslan Ali

Arslan Ali

More from Medium

TwiL: Week 6 — Javascript!

Converting Javascript Date objects to readable formats

Deep Dive into ES6 Array Destructuring

Javascript high order function