Share via

Supporting More than one Audio File Format

  • Article
  • Using the source element to specify multiple audio formats
  • Determining audio file format support from JavaScript
  • Related topics

By using the audio element or object to support multiple audio formats, you can drive more listeners from multiple browsers to your webpage.

Using the source element to specify multiple audio formats

When you add an HTML5 audio element to your code, you can specify an error message to display when the browser does not support the audio tag.

Note  If you are developing on an intranet and have rendering issues for HTML5, you can add <meta http-equiv-“X-UA-Compatible” content=”IE=9”/> to the <head> block of a webpage to force Windows Internet Explorer 9 to use the latest standards. If you prefer, configure your web development server to send a meta http-equiv-“X-UA-Compatible” header with IE=9 instead. For more information about document compatibility, see Defining Document Compatibility.

 

<audio src="demo.mp3" controls autoplay loop> 
    HTML5 audio not supported
</audio>

This works well if you are using a browser that does not support audio at all. However, if the audio element is supported, but the file format is not, the error message you specified is not displayed. Because there are only a few supported formats among all the browsers that support HTML5, to get the widest audience, you can use the source element to specify several file formats to try. The following example shows three formats.

<!doctype html>
<head>
    <title>
        Multiple format audio example
    </title>
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
    <!--  <meta http-equiv="X-UA-Compatible" content="IE=9"/> --> 
</head>
<body>
    <h1>
        Using source to support multiple audio formats
    </h1>
    <!-- The browser will automatically choose the format it supports. -->
    <audio controls="true">
        <source src="demo.mp3" type="audio/mp3"> 
        <source src="demo.ogg" type="audio/ogg"> 
        <source src="demo.aac" type="audio/mp4"> 
        <!-- If no support at all. -->
        HTML5 audio not supported 
    </audio>
</body>
</html>

In this example, you specify three formats. The browser automatically picks the one it supports, and if audio is not supported at all, it calls the error message.

Determining audio file format support from JavaScript

Figuring out what format to use from JavaScript is a little more complicated than the simple failover model of the source element. However, after you determine what support is available, you can make format assumptions for the rest of the session.

The audio object provides the canPlayType method to pretest the browser's file format capabilities. The canPlayType method takes an audio mime type, and codec (optional) parameters, and returns one of three strings: empty, maybe, or probably.

The following code example tests for three types MPEG-Layer 3 (MP3), ogg, and aac audio file formats.

<!doctype html>
<head>
    <title>Using multiple file formats in JavaScript</title>
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
    <!--  <meta http-equiv="X-UA-Compatible" content="IE=edge"/> --> 
 
    <script type= "text/javascript">
        function checkAudioCompat() {
            var myAudio = document.createElement('audio');
            var msg = document.getElementById("display");

            msg.innerHTML = "";
            
            if (myAudio.canPlayType) {
                // CanPlayType returns maybe, probably, or an empty string.
                var playMsg = myAudio.canPlayType('audio/mpeg');
                if ( "" != playMsg) {
                    msg.innerHTML += "mp3 is " + playMsg + " supported<br/>";
                }
                playMsg = myAudio.canPlayType('audio/ogg; codecs="vorbis"'); 
                if ( "" != playMsg){
                    msg.innerHTML += "ogg is " + playMsg + " supported<br/>";                    
                }

                playMsg = myAudio.canPlayType('audio/mp4; codecs="mp4a.40.5"');
                if ( "" != playMsg){
                    msg.innerHTML += "aac is "+playMsg+" supported<br/>";
                }
            }
            else {
                msg.innerHTML += "no audio support";                
            }
        }
    </script>
</head>
<body>
    <button onclick="checkAudioCompat();">
        Test for audio format type
    </button>
    <div id="display"> </div>
</body>
</html>

When you use new elements and features in Internet Explorer 9, it is a good idea to always test the features you implement. To check for support, the function initially creates an audio object by using the document.createElement() variable. If the audio object was created successfully, the statement "if (myAudio.canPlayType)" returns true, and the execution continues to test for specific file types.

Testing to determine if an browser supports the file format can be challenging. Because the canPlayType method can return three states, use the following statement to return either a Boolean true or false to the question of support. The playMsg variable is assigned to the result of the canPlayType test and then tests the result as shown in the following example.

                var playMsg = myAudio.canPlayType('audio/mpeg');
                if ( "" != playMsg) {
                    msg.innerHTML += "mp3 is " + playMsg + " supported<br/>";
                }

This statement returns a true result if canPlayType returns either "maybe" or "probably." If the result of canPlayType is an empty string, the statement returns false, or in other words, the format is not supported.

Because the canPlayType can return more than one format, you might want to test for a hierarchy, choosing the best fit for the file format.

Getting Started with the HTML5 Audio Element

How to use HTML5 to Add an Audio Player to your Webpage

Using JavaScript to Control the Audio Object