• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • Featured
    • C# Tutorials
      • LinQ Tutorials
      • Facebook C# API Tutorials
    • PHP Tutorials
      • CodeIgniter Tutorials
    • Amazon AWS Tutorials
  • Categories
    • Programming
    • Development
    • Database
    • Web Server
    • Source Control
    • Management
    • Project
  • About
  • Write
  • Contact

CodeSamplez.com

Programming, Web development, Cloud Technologies

You are here: Home / Programming / HTML5 Audio API Tutorial

HTML5 Audio API Tutorial

June 10, 2013 by Rana Ahsan 3 Comments

html5 audio javascript

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:
HTML5 Audio Player Chrome

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 🙂

Share If Liked

  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pocket (Opens in new window)

You may also like

Filed Under: Programming Tagged With: audio, html5

About Rana Ahsan

Rana is a passionate software engineer/Technology Enthusiast.
Github: ranacseruet

Reader Interactions

Comments

  1. asraf says

    September 26, 2013 at 4:55 am

    Nice Tutotial

    Reply
  2. Sravan says

    November 26, 2015 at 2:20 am

    How Can I control HTML5 audio from c#?

    Reply
  3. Krista Mutyaba says

    April 26, 2018 at 9:24 pm

    Thanks bro for this awesome project. You’ve me tons of hours of constant “hitting the wall” and dead ends in my codeigniter project.

    Reply

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,774 other subscribers

Follow Us

  • Twitter
  • Facebook

Top Posts & Pages

  • How To Work With JSON In Node.js / JavaScript
    How To Work With JSON In Node.js / JavaScript
  • PHP HTML5 Video Streaming Tutorial
    PHP HTML5 Video Streaming Tutorial
  • How To Work With C# Serial Port Communication
    How To Work With C# Serial Port Communication
  • Facebook C# API Tutorials
    Facebook C# API Tutorials
  • LinQ Query With Like Operator
    LinQ Query With Like Operator
  • Using Supervisord Web Interface And Plugin
    Using Supervisord Web Interface And Plugin
  • Get Facebook C# Api Access Token
    Get Facebook C# Api Access Token
  • Generate HTTP Requests using c#
    Generate HTTP Requests using c#
  • Getting Started With UDP Programming in Java
    Getting Started With UDP Programming in Java
  • Utilizing Config File In C#.NET Application
    Utilizing Config File In C#.NET Application

Recent Posts

  • Building Auth With JWT – Part 2
  • Building Auth With JWT – Part 1
  • Document Your REST API Like A Pro
  • Understanding Golang Error Handling
  • Web Application Case Studies You Must Read

Tags

.net angularjs apache api audio auth authenticatin aws c# cloud server codeigniter deployment docker doctrine facebook git github golang htaccess html5 http javascript jwt linq mysql nodejs oop performance php phpmyadmin plugin process python regular expression scalability server smarty socket.io tfs tips unit-test utility web application wordpress wpf

Footer

Archives

Follow Us

  • Twitter
  • Facebook

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,774 other subscribers

Copyright © 2023