Multiple HTML5 Audio Players

Tue, Aug 25, 2015

This is a follow up to my original article, Building a Custom HTML5 Audio Player With Javascript.

A number of people have asked me how to make multiple audio players on one page, so I decided to figure it out. I am posting the code before writing a tutorial so it can be used for your projects.

In brief I created an object called AudioObject for each track and store each object in an array. By storing all the tracks I am able to access each players audio and the components of their interface. I also created a lookup table that maps components like a playbutton or playhead to the array index of the correct AudioObject. The code is well commented, but still needs to be refined and further tested.

Enjoy and as always if you have any questions just let me know!

See the Pen Multiple HTML5 Audio Players by Alex Katz (@katzkode) on CodePen.