In this article, you'll learn about the HTML Audio API and make a fun project too.

Prerequisites

Basic knowledge of HTML, CSS and JavaScript is required.

The Audio API

The AudioAPI is part of the HTMLMediaElementaccording to MDN, which is an interface that enables to use multimedia in our web applications.

It gives us various methods that enable us to programmatically interact with audio in the browser.

API methods

You can create the audio element in HTML

id="noise">
   src="noise.mp3" type="audio/mpeg">

And access it using JavaScript.
You can also create it dynamically using the Audio object

const noise = new Audio("/path/to/some/noise.mp3");

It takes the path to the audio file as a parameter

Some of the methods you can use are:

  • Audio.play() - plays the audio.
  • Audio.pause() - pauses a playing sound.

Events on the audio element:

  • canplaythrough - Fired when the media resource is fully loaded.

  • pause- Fired when Playback has been paused.

  • play - Fired when Playback has begun

  • playing- Playback is ready to start after having been paused or delayed due to lack of data.

For a complete list check MDN

Practical: Building an interactive drum

We will build an interactive drum with HTML, CSS and JavaScript.

First you'll need drum sounds. A Google search should give you promising results.

Get single beat sounds so you can implement different drums.

I'll be using 4 drum sounds.

  • tribal-dry-drum
  • hand-tribal-drum
  • hard-horror-drum
  • short-bass-hit

I got them from MixKit.
They are all in .wavformat which may not be compatible with all browsers. You can use open source software like Audacity to convert to other formats and implement a fallback system.

The project: Web Drums

HTML

</span>
 lang="en">

   charset="UTF-8">
   name="viewport" content="width=device-width, initial-scale=1.0">
   http-equiv="X-UA-Compatible" content="ie=edge">
   rel="stylesheet" href="style.css">
  Web Drums


  Web Drums
  Beat the drums to make your own melody
   id="stage">
     id="drum-1" class="drums">
     id="drum-2" class="drums">
     id="drum-3" class="drums">
     id="drum-4" class="drums">
  

  <span class="na">src="app.js">





    Enter fullscreen mode
    


    Exit fullscreen mode
    




We define a #stage and we're we put our drums. We use div elements for the drumsCSS

#stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}



    Enter fullscreen mode
    


    Exit fullscreen mode
    




We give the #stagegrid positioning and align it's children in 2 columns

.drums {
  height: 100px;
  border-radius: 50%;
  background: peachpuff;
}



    Enter fullscreen mode
    


    Exit fullscreen mode
    




We then give the drums a border-radiusand color so they can resemble drums.JavaScript

const drum1 = document.getElementById("drum-1");
const drum2 = document.getElementById("drum-2");
const drum3 = document.getElementById("drum-3");
const drum4 = document.getElementById("drum-4");



    Enter fullscreen mode
    


    Exit fullscreen mode
    




We get references to all the drums.

const sound1 = new Audio("/beats/hand-tribal-drum.wav");
const sound2 = new Audio("/beats/hard-horror-hit-drum.wav");
const sound3 = new Audio("/beats/short-bass-hit.wav");
const sound4 = new Audio("/beats/tribal-dry-drum.wav")



    Enter fullscreen mode
    


    Exit fullscreen mode
    




We then load the sounds.

drum1.addEventListener("click", () => {
  sound1.play()
});
drum2.addEventListener("click", () => {
  sound2.play()
});
drum3.addEventListener("click", () => {
  sound3.play()
});
drum4.addEventListener("click", () => {
  sound4.play()
});



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Finally, we play the sounds when each drum is clicked.Here's a link to the repo on GitHub: github.com/israelrotimi/webdrumsGo ahead and play with your drum!
This is a basic implementation, I encourage you to build upon it.In conclusion, In this article you learned about the HTML Audio and how to use it.
I believe you'll use it in your web projects.
If you have any suggestions or additions, let us know in the comments.I am a full stack NextJS developer and technical writer. I'm actively looking for gigs.Cheers