通过使用 audio 元素或对象支持多个音频格式，你可以将更多的听众从多个浏览器吸引到你的网页上。
使用源元素指定多个音频格式
在将 HTML5 audio 元素添加到代码时，可以指定一条在浏览器不支持 audio 标记时显示的错误消息。
注意 如果你是在 Intranet 上进行开发并且有 HTML5 的呈现问题，则可以向网页的 <head> 块中添加 <meta http-equiv-“X-UA-Compatible” content=”IE=9”/> 以强制 Windows Internet Explorer 9 使用最新标准。如果愿意，可以将 Web 开发服务器配置为发送带 IE=9 的元 http-equiv-“X-UA-Compatible” 标头。
|
1 2 3 |
<audio src="demo.mp3" controls autoplay loop> HTML5 audio not supported </audio> |
如果你使用的浏览器根本不支持音频，这将很有效。但是，如果支持 audio 元素，但不支持文件格式，则不会显示你指定的错误消息。由于在支持 HTML5 的所有浏览器中仅存在几种支持的格式，因此要赢得最大范围的受众，则可以使用 source 元素指定要尝试的多种文件格式。下面的示例演示了三种格式。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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）。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!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，并且继续执行以测试特定的文件类型。
测试以确定浏览器是否支持文件格式是一大难题。由于 canPlayType 方法可返回三种状态，请使用以下语句以针对支持问题返回布尔值 true 或 false。向 playMsg 变量分配 canPlayType 测试的结果，然后如以下示例中所示测试结果。
|
1 2 3 4 |
var playMsg = myAudio.canPlayType('audio/mpeg'); if ( "" != playMsg) { msg.innerHTML += "mp3 is " + playMsg + " supported<br/>"; } |
如果 canPlayType 返回“maybe”或“probably”，则此语句返回 true 结果。如果 canPlayType 的结果为空字符串，则该语句返回 false，换句话说，不支持此格式。
由于 canPlayType 可返回多个格式，因此可能需要测试层次结构，以便选择最适合文件格式的层次结构。
本系列内容
- HTML5 audio 元素入门：你可使用 audio 元素向你的网页中添加基本音频播放器，而无需脚本或加载项控件。
- 使用 JavaScript 控制 Audio 对象：HTML5 中的 audio 对象提供可用于通过 JavaScript 控制播放的方法、属性以及事件。
- 使用 Media 事件添加进度栏：media 提供 audio 对象可以使用的一系列丰富事件。可利用一组事件来获取可用于在播放音频文件时跟踪进度的状态数据。
- 支持多个音频文件格式：通过使用 audio 元素或对象支持多个音频格式，你可以将更多的听众从多个浏览器吸引到你的网页上。
非常高兴遇到这么好的文章 谢谢
请问怎么加载acc音频文件？
只加载acc文件？还需要处理兼容问题
只加载ACC文件。
那像这篇文章的第一段代码就可以，但是因为不是所有浏览器都支持acc，所以需要转换成多种格式待加载
你可以给我个简单示例吗？我试了下几个浏览器试了下这样子
<audio controls="true">
<source src="demo.aac" type="audio/mp4">
</audio>没搞定，试了各种浏览器。
你用格式工厂转成多种格式的，浏览器不支持acc始终都出不来的
<audio controls="true">
<source src="demo.mp3" type="audio/mp3">
<source src="demo.ogg" type="audio/ogg">
<source src="demo.aac" type="audio/mp4">
HTML5 audio not supported
</audio>
[…] 支持多个音频文件格式：通过使用 audio 元素或对象支持多个音频格式，你可以将更多的听众从多个浏览器吸引到你的网页上。 […]
[…] 支持多个音频文件格式：通过使用 audio 元素或对象支持多个音频格式，你可以将更多的听众从多个浏览器吸引到你的网页上。 […]