HTML5 introduces built-in media support with the audio tag, which makes it very easy to embed media straight into any HTML document with limited code. It comes with built in browser controls, if you specify and plays audio nice and effectively.
This is typically what it will look like in your browser.
You might be thinking: “Well what if I wanted to style my own audio player with it’s own buttons and scroll bar?”
With the audio element, the progress element and a few buttons, you can build your own audio player in no time! The progress element is mainly used to track the completion of a task and can be manipulated easily with Javascript. In our case, it would be to keep track of the length of a song. And the great thing is, HTML5 and browser capabilities make it easy to grab song lengths, current time and more.
If you’d like to play with the code, go for it! Unfortunately Codepen embeds aren't working for me so the link is below.
And below is the code. Note that their are two separate functions. One that keeps track of the audio player actually playing audio (initPlayers function) and the other that is keeping track of the audio for the progress element (initProgressBar function). I tried to keep jQuery to a minimum but used it to actually call the function, sorry, i’m not sorry JS purists.
If you have any questions or suggestions, i’m all ears! Email me at luke.will.duncan@gmail.com or hit me up on twitter @luke__duncan
Top comments (1)
can we implement seek functionality ourselves ?