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,并且继续执行以测试特定的文件类型。
测试以确定浏览器是否支持文件格式是一大难题。由于 canPlayType 方法可返回三种状态,请使用以下语句以针对支持问题返回布尔值 true 或 false。向 playMsg 变量分配 canPlayType 测试的结果,然后如以下示例中所示测试结果。
var playMsg = myAudio.canPlayType('audio/mpeg');
if ( "" != playMsg) {
msg.innerHTML += "mp3 is " + playMsg + " supported<br/>";
}
如果 canPlayType 返回“maybe”或“probably”,则此语句返回 true 结果。如果 canPlayType 的结果为空字符串,则该语句返回 false,换句话说,不支持此格式。
由于 canPlayType 可返回多个格式,因此可能需要测试层次结构,以便选择最适合文件格式的层次结构。
Audio-支持多个音频文件格式的更多相关文章
- html5中audio支持音频格式
HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持.不是所有的浏览器都支持MP ...
- HTML5的Audio标签打造WEB音频播放器
目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...
- wav音频文件格式解析【个人笔记】(自用)
1. WAV格式 wav是微软开发的一种音频文件格式,注意,wav文件格式是无损音频文件格式,相对于其他音频格式文件数据是没有经过压缩的,通常文件也相对比较大些.. 支持多种音频数字,取样频率和声道, ...
- AMR音频文件格式分析
AMR音频文件格式分析 1 概要 如今非常多智能手机都支持多媒体功能,特别是音频和视频播放功能,而AMR文件格式是手机端普遍支持的音频文件格式.AMR,全称是:Adaptive Multi-Rate, ...
- 使用Core Audio实现VoIP通用音频模块
最近一直在做iOS音频技术相关的项目,由于单项直播SDK,互动直播SDK(iOS/Mac),短视频SDK,都会用到音频技术,因此在这里收集三个SDK的音频技术需求,开发一个通用的音频模块用于三个SDK ...
- RIFF和WAVE音频文件格式
RIFF file format RIFF全称为资源互换文件格式(Resources Interchange File Format),是Windows下大部分多媒体文件遵循的一种文件结构.RIFF文 ...
- [Audio processing] FFMPEG转音频格式和采样率
利用FFMPEG转音频格式和采样率 import os import string import subprocess as sp #Full path of ffmpeg FFMPEG_BIN = ...
- JS指定音频audio在某个时间点进行播放,获取当前音频audio的长度,音频时长格式转化
前言: 今天接到一个需求,需要获取某个.mp3音频文件的时间长度和指定音频audio在某个时间点进行播放(比如说这个视频有4分钟,我要让它默认从第2秒的时候开始播放),这里当然想到了H5中的audio ...
- HMS Core音频编辑服务支持7种音频特效,助力一站式音频处理
多媒体时代,音频作为内容传播中的重要形式,因其不受空间限制.认知负担小.声音元素多样化等特点,广泛应用于短视频制作.儿童在线教育.有声阅读.游戏等领域产品,在各种形式的音频呈现过程中,合理添加音效能够 ...
随机推荐
- CLR via C# - GC
//像背书一样,记录下吧 1.CLR分配资源 托管堆上维护着一个指针NextObjPtr.该指针表示下一个新建对象在托管堆上的位置.C#的new Object会产生IL newobj指令,NextOb ...
- 12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
- ios 面试题 0
1.__block和__weak修饰符的区别: 1.__block不管是ARC还是MRC模式下都可以使用,可以修饰对象,还可以修饰基本数据类型. 2.__weak只能在ARC模式下使用,也只能修饰 ...
- POJ2533:Longest Ordered Subsequence(LIS)
Description A numeric sequence of ai is ordered if a1 < a2 < ... < aN. Let the subsequence ...
- js post传值
一种是ajax传值,另一种是post传值, ajax传值: $.ajax({ url: "AjaxTxt/Fild.ashx?Name=duibi&dates=" suzk ...
- regular expression 基本语法
正则检测网址: http://regexpal.isbadguy.com/ (不包含界定符) 或 http://tool.chinaz.com/regex unicode转换工具 : htt ...
- 阿里巴巴集团2013实习生招聘技术类笔试题(B)
一.单向选择题 1.在常用的网络协议中,___B__是面向连接的.有重传功能的协议. A. IP B. TCP C. UDP D. DXP 2.500张骨牌整齐地排成一行,按顺序编号为1.2.3... ...
- Yogurt factory(POJ 2393 贪心 or DP)
Yogurt factory Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8205 Accepted: 4197 De ...
- MyEclipse6.5安装SVN插件的三种方法
MyEclipse6.5安装SVN插件的三种方法 方法一.如果可以上网可在线安装 1. 打开Myeclipse,在菜单栏中选择Help→Software Updates→Find and Instal ...
- USB设备类型代码(class类型)
Base Class E0h (Wireless Controller) This base class is defined for devices that are Wireless contro ...