Today we'll be building a basic React audio player component using the HTMLAudioElement interface. The player can play through a list of tracks,

Building an Audio Player With React Hooks

submited by
Style Pass
2021-06-17 23:30:03

Today we'll be building a basic React audio player component using the HTMLAudioElement interface. The player can play through a list of tracks, pause, scrub and navigate to the next or previous track. As an added bonus, each audio track will have an animated background color.

There are a few different ways to work with audio on the web. The most common is by using the HTML <audio> tag, or for more lower level control, the Web Audio API. The approach this tutorial will take is somewhere in the middle with the HTMLAudioElement interface.

The HTMLAudioElement interface provides access to the properties of <audio> elements, as well as methods to manipulate them. - MDN Docs

The only prop our component needs is a list of tracks that it can play through. We'll provide it an array of objects, each one containing a title, artist, audioSrc, image and color.

One function, toPrevTrack, will handle the previous track button click, and the other, toNextTrack, handles the next button click.

Leave a Comment