JS Music Player

Category: Vanilla JavaScript

Problem

Music Band wants to show off their music on their website in order to sell it, but does not want to give the music away. They previously had pre-built player that would play the first 1min of the song, but unfortunately it relied on Flash Player and that is no longer supported. Furthermore, the free music player templates that are available for JS do not give you the option to switch albums. Building a new player in Javascript will give them more flexibility, features, and will hold up better.

Action

Using new Audio Element in HTML 5 we can load songs in dynamically with Javascript. The audio api lets us tap into the audio properties to create custom controls using JS and CSS. By setting up variables based on the mp3 file name, I was able to create arrays to populate the song list, album titles, album art and mp3 files.

Result

In the end we have a responsive player that is even more beautiful than the original and with more features. Like being able to see the inside art when clicking on the album’s cover art. Since the player is built on native web standards it should stand the test of time and be easier to update in the future.

Check it out! JS Music Player GitHub: https://github.com/kalevnakah/music-player