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.

  • Tony

    Thx Sam, very nicely explained, easy to follow. Hope you discuss fallback also :-)

  • friv3

    I like it because it gives me a lot of useful things. thank you

  • i6ix

    nice, quick explanation. Gj.

  • frivgazo

    article for more experience to me .thank

  • Duncan

    Hi Sam,

    Thanks for the tutorial. One point – I can’t get the second song to play without adding:

    nowPlaying = audioArray[i];

    after the increment of i.


  • Loop

    I did everything that you did but i can not get the script to work..everything shows up but when i push or stop nothing happens..any idea’s what i’m doing wrong