DEV Community

Israel Rotimi
Israel Rotimi

Posted on

Make an interactive drum using the HTML Audio API

#api #html #javascript #webdev

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

<audio id="noise">
  <source src="noise.mp3" type="audio/mpeg">
</audio>
Enter fullscreen mode Exit fullscreen mode

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

const noise = new Audio("/path/to/some/noise.mp3");
Enter fullscreen mode Exit fullscreen mode

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Web Drums</title>
</head>
<body>
  <h1>Web Drums</h1>
  <p>Beat the drums to make your own melody</p>
  <div id="stage">
    <div id="drum-1" class="drums"></div>
    <div id="drum-2" class="drums"></div>
    <div id="drum-3" class="drums"></div>
    <div id="drum-4" class="drums"></div>
  </div>

  <script src="app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

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

CSS

#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/webdrums

Go 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

Top comments (0)