HTML5 Audio API Tutorial

So, are you planning to develop and web app that has some music to play? Looking for an easy way to implement such a music player with comfort? Welcome to HTML 5! HTML5 has very native support for audio and video media playing and thus makes our lives easy by avoiding flash players etc. In this small tutorial, I will try to give a base foundation on how we can start playing audio files on our web application using the support of HTML5 audio support. Let’s get started!

Simple HTML5 Audio Player:

very least code for loading an audio file with player controls is as below:

<audio src="{$base_url}audio/hello.mp3" controls&gt;</audio>
Code language: PHP (php)

An alternative way to get the same impact as above done is as below:

<audio controls>
        <source src="{$base_url}audio/hello.mp3" type="audio/mpeg">
</audio&gt;
Code language: HTML, XML (xml)

But I will always recommend using the latter one always. Why? Stay with me to know the reason. After you run your application, you should see the player on your browser as below:

Browser Support For Audio Files:

Well, the little bad news is not all formats of audio are supported by all browsers seamlessly. Such as, mp3 format isn’t supported by Firefox browser. So, what do we do?
Best to have your audio in multiple formats. So, if the browser can’t support one format we can feed it with another one. So here we will do to have this done:

<audio controls>
    <source src="{$base_url}audio/hello.mp3" type="audio/mpeg">
    <source src="{$base_url}audio/hello.ogg" type="audio/ogg">
</audio>
Code language: HTML, XML (xml)

As you can see above, we are telling the browser to play ‘hello.mp3’ first. If the browser doesn’t support it, then it will then try the “hello.ogg” file instead.

Between, I hope you already get your answer to the question of why we should use the ‘source’ tag nested in the ‘audio’ tags strategy. Because we can use multiple alternative audio options for browsers!

Autoplay The Audio File:

It is easy to tell the browser to start playing the media automatically after it’s loaded with the HTML5 audio autoplay attribute as below:

<audio controls autoplay="true">
        <source src="{$base_url}audio/hello.mp3" type="audio/mpeg">
</audio&gt;
Code language: HTML, XML (xml)

If you not want to show the media player control on your web page, you can just remove the “controls” attribute.

Control Loading The HTML5 Audio:

We can control how the audio should load right from inside the “audio” tag. There is a useful attribute named ‘preload’ which can be fed with different values for different requirements. Let’s see our options:

• auto: This will tell the browser to load the audio automatically with its best possible approach, along with other resources.
• metadata: This will tell the browser to load only the inside information for audio, not the audio file itself, such as the total duration of playback etc.
• none: It won’t load anything for the audio media on load. Rather media will be loaded on demand when users want it to play by hitting the play button.

Checkout The HTML5 Audio Player Demo

Final Words:

I hope this small tutorial on HTML5 audio components will be helpful for you to some extent. The are some more cool ways to play around with these by dynamic control from JavaScript. I will cover that in a separate article soon. Stay in touch till then 🙂

Let me know if you are having any issues. I will also love to hear if you have any suggestions/feedback on anything else to add/enhance in this tutorial. Happy coding 🙂