Custom Audio Player using HTML, CSS and JavaScript

As for something to add to my portfolio, I would like to showcase one of my Web Dev projects. This is a custom Audio Player that kind of resembles YouTube’s Video Player. It has a playlist where you can pick a song. In this demo, I only added two. Those two in the playlist actually has an animation. They are custom slideshows that display images while playing a song at the same time. The ones I created in this demo acts like tribute slideshows for Aerith, a Cetra character in Final Fantasy VII, one of the games I played back in my childhood years.

The Audio player is built with audio player controls. It has a Play/Pause button, a timer, an Audio Nav or Progress Bar, Sound Mute/Unmute button, and a Volume controller. The Audio Navigator or Progress Bar can seek any location within a buffered audio. This allows you to start at a certain time frame, move forward, or repeat any part of the played music. The Play button turns into a pause button once you play a music, and turns back into the Play button when you pause the song. This allows you to play/pause the music. The Mute/Unmute button allows you to mute or unmute the audio being played while the sound control controls the volume of the song. This volume control can be dragged similar to the one in a YouTube player. What’s more, this Audio player is cross-browser compatible. It can work on Firefox, Chrome, Opera, and IE. I haven’t tested it on Safari though due to the fact that I’m using Windows and Safari no longer supports Windows, but it can be made to work on Safari too.

The buttons are dependent on FontAwesome CSS.

Here’s the demo:

Some Issues

I am using pure JavaScript only. There are some slight issues with the Progress Bar. While it allows users to navigate the audio at any time frame, the update only starts after you release the thumb button. It doesn’t update in real time. This part is something which can easily be achieved by jQuery, but since I am not using this library, this feature is unavailable for this version.

Follow me at:

• 
•