Javescript Drum Kit, Why Is My Sound File Not Being Read as a Source

Pulsate Kit using HTML, CSS, and Javascript

Pulsate kit

Dearest Reader,

How about building pulsate kit on your own virtually with the help of some scripting language?Sounds cool correct! Let's first building a unproblematic pulsate kit using HTML, CSS, and Javascript that runs in a browser which will play the sound when the user printing on particular central on the keyboard.

Binder Structure of the project

1. index.html — contains the HTML layout which defines the element structure that would be shown on the folio.
2. images folder — contains .jpg images used in our projection.
3. sounds folder — contains . wav files used in our project.
4. mode.css — contains CSS code for styling. Using CSS we can manner the different portions to make it more visually appealing.

HTML Layout

Open VSCode and create the basic HTML structure in an index.html file by ! then pressing tab. Give the title as 'Drum Kit'. Link way.css to the created HTML file.

<title>Pulsate Kit</title>

<link rel="stylesheet" href="style.css">

Within the torso, Create a div element with the course of keys which volition wrap all the drum kit keys used in our awarding.Inside the div class we have another set up of div's with a class of key. Now each one of these keys here has a sound associated with information technology. For every cardinal on the keyboard when we do fundamental up or key downward action, there is going to be something chosen the key lawmaking that is associated with that key. For ex: key code of 'A' is 65.

In our projection, we are using 'A', 'S', 'D', 'F', 'Thou' 'H', 'J', 'K', 'Fifty' keys to play the sounds of the drum kit. When we printing any of the to a higher place keys on the keyboard and then nosotros're going to play the respective sound chemical element.For example when we press central 'A' (Keycode '65') on keyboard we're going to check if that was the 'A' Key then nosotros're going to play the corresponding audio that as well has the aforementioned data-fundamental and we're going to notice the primal div element,add a class of playing so it will breathing itself on in.

Now, what is this data-central?

The data-* attribute is used to store custom information private to the folio or application.

The information-* attribute gives u.s. the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can then be used in the page's JavaScript to create a more engaging user feel

The information-* attribute consist of two parts:

1. The attribute proper name should non contain any uppercase messages, and must be at to the lowest degree one character long after the prefix "data-". In our case it is data-key.
2. The aspect value can be any string. In our case value is a number which represents keycode.

Here is the HTML code,

<div class="keys">

<div data-key="65" form="key">

<kbd>A</kbd>

<bridge form="audio">handclapping</span>

</div>

</div>

<audio information-key="83" src="sounds/hihat.wav"></audio>

index.html

CSS Styling

CSS is used to style the dissimilar portions and make information technology more visually appealing.Experiment on colour, background, font-family, margin and font size you want to requite to the body,heading and the keys.

way.css

When we press any of these keys 'A', 'Due south', 'D', 'F', 'G' 'H', 'J', 'K', 'L' on keyboard then let's do some animation on cardinal div element . On key printing from the keyboard the corresponding key div element on the UI should scale a bit and the border should be inverse to yellow with shadow which means we have to modify the existing belongings value.This transition should happen on key down(key printing)and nosotros volition use CSS transitions which allows you to change property values smoothly, over a given duration.

we will define the property values that has to be inverse in playing class which volition get added to the key div element on primal down action using Javascript function.

style.css

Javascript logic

The logic of the player is divers inside the script tag.Our showtime goal is to listen to the key down outcome and call playSound function. Nosotros are passing the issue object to the role where event object holds all kinds of info like what key was actually hit which also contains the keycode.Take an example, we press keycode 65 ('A') on the keyboard. Side by side, we are finding out is in that location an audio chemical element on the page that has a data-central of 65 for that we are going to use document.querySelector() to select an audio element where it has a information — key aforementioned as e.keycode.

window.addEventListener('keydown', playSound);

part playSound(e) {

const audio = certificate.querySelector(`audio[data-primal="${e.keyCode}"]`);

In a like way, find out is in that location an div chemical element on the page that has a data-key of 65 for that we are going to use document.querySelector() to select an div element where it has a data — fundamental same every bit eastward.keycode. The returned element is assigned to a constant variable chosen key.

const primal = document.querySelector(`div[data-central="${e.keyCode}"]`);

If sound chemical element is not present i.eastward If the pressed key on the keyboard don't accept an sound chemical element associated with it then return in other words statement stops the execution of a office.

if (!audio) return;

Nosotros are going to add together the playing form on the div element which is assigned to constant variable key . This playing class will add animation to the div chemical element of the corresponding key pressed as mentioned in CSS department earlier.

key.classList.add('playing');

Next nosotros are going to the play the audio. Earlier playing the audio we will
rewind it to the commencement of the element and then that if you striking key in succession over and over again it volition just rewind it to the start. So permit's say,

sound.currentTime = 0;

audio.play();

we are washed with playSound function. As nosotros already discussed,we are adding the animation in one case the listed key is pressed just we as well want to remove the blitheness in onetime. The requirement is to add the animation only during the cardinal press. we can apply a transitionend event that will fire when the chemical element has stopped animating itself on in.

const keys = Array.from(certificate.querySelectorAll('.primal'));

keys.forEach(primal => key.addEventListener('transitionend', removeTransition));

Now, what is the transitionend consequence?

As nosotros already discussed,when the listed key is pressed the div element CSS will exist transitioned to scale a bit and the border will be inverse to yellow with shadow.The transitionend result is fired when a CSS transition has completed. Once the transitionend event occurs we volition call removeTransition function by passing event object. The event object contains a propertyName called 'transform' which indicates the transform has finished. If the transition is completed then nosotros will remove the animation by removing the course playing.

function removeTransition(e) {

if (e.propertyName !== 'transform') return;

due east.target.classList.remove('playing');

}

javascript

We are washed!! Time to run the lawmaking and check the results.

Detect the complete source code hither.

Refer https://javascript30.com/ for more projects.

Cheers for your involvement.

gilmartinowly1981.blogspot.com

Source: https://medium.com/@divyamcm/drum-kit-using-html-css-and-javascript-7e54a9f27544

Share this post