HTML5 Audio API Tutorial

So, are you planning to develop a 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 basic foundation on how we can start playing audio files on our web application using HTML5 audio support. Let’s get started!

Simple HTML5 Audio Player:

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

<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 follows:

<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 that not all audio formats are supported by all browsers seamlessly. For example, the mp3 format isn’t supported by the Firefox browser. So, what do we do?
It is 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, it will try the ‘hello.ogg’ file instead.

Between, I hope you already have your answer to the question of why we should use the ‘source’ tag nested in the ‘audio’ tags strategy. 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 do not want your web page to display the media player control, you can 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 valuable 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.

Final Words:

I hope this small tutorial on HTML5 audio components will be helpful for you to some extent. There are some cooler ways to play around with these by using 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 would also love to hear if you have any suggestions/feedback on anything else to add/enhance in this tutorial. Happy coding 🙂