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?”
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 firstname.lastname@example.org or hit me up on twitter @luke__duncan