HTML5 Audio Browser Support

 HTML5 is capable of playing audio files via browsers. However, there is no universal support amongst software companies behind each browser type. As a result, HTML5 developers need to make sure that audio content is create in different formats. 

Audio formats supported by major browsers matrix provided below:

  • Firefox supports: WAV, Ogg Vorbis
  • Safari supports: WAV, MP3
  • Opera supports: WAV, Ogg Vorbis
  • Chrome supports: WAV, Ogg Vorbis, MP3
  • IE supports: MP3

You should develop your audio content in at least two formats WAV and MP3 in order to cover all of the major browser types. This list of supported audio formats may change as HTML5 gains more momentum and adaptation by software development companies. 

HTML5 sample audio tag code for playing these three major audio formats provided below:

<audio src="MyAudio.wav"></audio>

<audio src="MyAudio.ogg"></audio>

<audio src="MyAudio.mp3"></audio>

Here is another example that shows how audit tag works. For instance, audio tag can be set up with two or more audio files using source tag in between audio tag. It allows browser to detect version of the audio file it can play and fall back on one of the supported audio formats. 

Here is a quote from one our web site visitors who explained about it in more details.

"Several different alternative sources can be  listed. In this example, If the the browser can handle .ogg files it  will use the .ogg file.  If not,  it checks to see if it can use the  .mp3 file.  As can be seen in your "HTML5 Audio Browser Support" page, specifying both .ogg and .mp3 files means that the audio will play in all major browsers"

    <audio     id="audiotag"     preload="auto"     controls="controls"     >

    <source     src =     " /audio/groove.ogg"      type="audio/ogg" />

    <source     src =     " /audio/groove.mp3"      type="audio/mpeg" />

    Your browser does not      support HTML 5 audio.     

    You may want to update      your browser to a current version.

    </audio>    

Featured pages

Overview

Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …

Tags

Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…

Welcome

 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …