Project Twelve: Audio Player

From the Christmas carols to podcasts and beyond - audible information is well represented in our digital world. Some say nothing compares to a warmth of a vinyl record, but more and more services are built with the sole purpose of playing sounds.

For today's challenge I suggest we create a stylish audio player to get familiar with properties, methods and events of HTML5 audio element.

Audio player: requirements and recipe

As a user I want to control audio playback and volume using an interface with a design, that matches the page, so that I can enjoy both audio and visuals.

There's so many ways one could style a player! Here's a famous Winamp audio player for the reference:

Of course, you don't need to make it so complicated unless you want to: features and style is entirely up to you, but some requirements should be met nonetheless:

Requirements

1. There should be a play/pause button that does just that
2. It should be possible to control volume using a slider
3. It should be possible to control playback position using a slider
4. Current playback time should be visible
5. Time left or total duration of an audio should be visible
6. Player should be accessible

Recipe

1. Find an audio to play
2. Create a default HTML5 Audio player
3. Start adding controls one by one
4. Once ready, hide the original player
5. Ensure accessibility with e.g. Lighthouse
6. Enjoy proudly!

Hints

You'll be able to find all methods and properties of an audio element in documentation, e.g. on MDN.

It's easier to make player accessible if you use semantic HTML elements: buttons to make buttons and range inputs for sliders.

Hard mode: Karaoke Player

I love singing! But I rarely remember all the lyrics to a song unless I heard it a million times. Would be so nice to listen to the song and see lyrics scrolling on the screen to sing along.

Rendering scrolling text is not too hard, but connecting it to an audio playback - that can be a challenge, can it? You can draw inspiration from subtitles formats or come up with your own - sky is the limit!

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?