CodeSamplez

Programming Tutorials And Source Code Examples

  • Facebook
  • Google+
  • RSS
  • Twitter
  • 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
Home Programming HTML5 Audio API Tutorial

HTML5 Audio API Tutorial

Rana Ahsan June 10, 2013 3 Comments


 HTML5 Audio API Tutorial    

So, are you planning to develop and web app that has some musics to play? Looking for an easy to way to implement such music player with comfort? Welcome to HTML 5! HTML5 has a 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 how we can start playing audio files on our web application using support of HTML5 audio support. Lets get Started!

Simple HTML5 Audio Player:

very least code for load a audio file with player controls is as below:

<audio src="{$base_url}audio/hello.mp3" controls></audio>

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>

But I will always recommend to use 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, 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 format. So, that if 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>

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

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

Autoplay The Audio File:

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

<audio controls autoplay="true"> 
        <source src="{$base_url}audio/hello.mp3" type="audio/mpeg">
</audio>

If you not 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 feed with different values for different requirement. Lets 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 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:

Hope this small tutorial on HTML5 audio component will be helpful for you in some extent. The are some more cool ways to paying 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 issue. I will also love to hear if you have any suggestions/feedback of 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)

Filed Under: Programming Tagged With: audio, html5

About Rana Ahsan

Rana is a passionate software engineer/Technology Enthusiast.

Twitter: @ranacseruet
Github: ranacseruet

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.

Email Subscription

Never miss any programming tutorial again.

Popular Tutorials

  • Generate HTTP Requests using c#
  • How To Work With JSON In Node.js / JavaScript
  • How To Work With C# Serial Port Communication
  • PHP HTML5 Video Streaming Tutorial
  • 8 Most Frequently Used And Useful PHP Array Operations
  • Get Facebook C# Api Access Token
  • Tutorial On Uploading File With CodeIgniter Framework / PHP
  • How To Work With Multithreaded Programming In C#.NET Application
  • Facebook C# API Tutorials
  • Control HTML5 Audio With Jquery
Follow Us On Twitter

Recent Tutorials

  • Document Your REST API Like A Pro
  • Understanding Golang Error Handling
  • Web Application Case Studies You Must Read
  • Getting Started With Golang Unit Testing
  • Getting Started With Big Data Analytics Pipeline
  • NodeJS Tips And Tricks For Beginners
  • Apple Push Notification Backend In NodeJS
  • Web Based Universal Language Translator, Voice/Text Messaging App
  • How To Dockerize A Multi-Container App From Scratch
  • Getting Started With NVML Python API

Recent Comments

  • prem on PHP HTML5 Video Streaming Tutorial
  • Luis Villarroel on LinQ Query With Like Operator
  • Yanming Wei on PHP HTML5 Video Streaming Tutorial
  • Adolfo on Apple Push Notification Backend In NodeJS
  • NganKhuong on How To Work With JSON In Node.js / JavaScript

Archives

Resources

  • CodeSamplez.com Demo

Tags

.net apache api audio aws c# cache cloud server codeigniter deployment doctrine facebook git github golang htaccess html5 http image java javascript linq mysql nodejs oop performance php phpmyadmin plugin process python regular expression scalability server smarty ssh tfs thread tips ubuntu unit-test utility web application wordpress wpf

Copyright © 2010 - 2019 · CodeSamplez.com ·