天天看点

Audio-支持多个音频文件格式

通过使用 audio 元素或对象支持多个音频格式,你可以将更多的听众从多个浏览器吸引到你的网页上。

使用源元素指定多个音频格式

在将 HTML5 audio 元素添加到代码时,可以指定一条在浏览器不支持 audio 标记时显示的错误消息

如果你使用的浏览器根本不支持音频,这将很有效。但是,如果支持 audio 元素,但不支持文件格式,则不会显示你指定的错误消息。由于在支持 HTML5 的所有浏览器中仅存在几种支持的格式,因此要赢得最大范围的受众,则可以使用 source 元素指定要尝试的多种文件格式。下面的示例演示了三种格式。

<!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>       

在本示例中,你指定了三种格式。浏览器将自动选择它支持的格式,如果根本就不支持音频,则它将调用错误消息。

利用 JavaScript 确定音频文件格式支持

利用 JavaScript 查明使用的格式比源元素的简单故障转移模型要 复杂一些。但是,在确定可用的支持后,便可以为余下的会话进行格式假设。

audio 对象将提供 canPlayType 方法以便预测试浏览器 的文件格式功能。 canPlayType 方法带有一个音频 mime 类型、编解码器(可选)参数,并且返回三个字符串之一:empty、maybe 或 probably。

下面的代码示例将测试三类音频文件格式(MPEG-Layer 3 (MP3)、ogg 和 aac)。

<!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>      

在使用 Internet Explorer 9 中的新元素和功能时,最好是始终测试实现的 功能。为了检查支持,功能最初会通过使用 

document.createElement()

 变量创建音频对象。如果音频对象成功创建,则语句 “if (myAudio.canPlayType)” 返回 true,并且继续执行以测试特定的文件类型。

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

继续阅读