How to use HTML5 audio (part 1)

The introduction of the HTML5 spec introduced new tags for presenting media on a webpage; the <audio> and <video> tags, rendering the <object> tag no longer fit for video and audio streaming.

These new tags have made it considerably easier to add rich media content to your design, and in today’s video tutorial, I’ll be talking through the following features which make HTML5’s media tags so flexible:

Using HTML5 audio tags to play an audio track on load; wrangling HTML5’s more complex parameters, such as controls and autoplay to create a fully-featured media player in less time than an average song length; the first steps to creating your very own custom-built media player to fit in with your own web design projects.

This is part one of a two part tutorial, and by the end of it, you’ll know how to use the power of jQuery and <audio> tags to create a basic music player. In the following video, we’ll be adding a whole bunch of new features; like album art and meta tags, too!

Have you featured HTML5 audio in a project? How does HTML5 audio compare with older options? Let us know your thoughts in the comments.

Featured image/thumbnail, sound image via Shutterstock.

Sam Piggott

Sam Piggott is a young digital designer and self-confessed jack-of-all-trades from London, UK. When he's not designing/coding/drinking copious amounts of coffee, Sam loves learning new software and air-drumming to whatever's on Spotify. Follow him on twitter @Sam_Piggott.