HTML5 Audio API与兼容性

<audio src="音频的地址">备用(当浏览器不支持audio时显示的内容)</audio>

 

audio 的控制函数主要有:

控制函数     功能说明

load()     加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载

play()     加载并播放音频、视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放

pause()     暂停处于播放状态的音频、视频文件

 

audio 的只读媒体特性有:

只读属性     属性说明

duration     获取媒体文件的播放时长,以s为单位,如果无法获取,则为NaN

paused     如果媒体文件被暂停,则返回true,否则返回false

ended     如果媒体文件播放完毕,则返回true

startTime     返回起始播放时间,一般是0.0,除非是缓冲过的媒体文件,并一部分内容已经不在缓冲区

error     在发生了错误后返回的错误代码

currentSrc     以字符串形式返回正在播放或已加载的文件,对应于浏览器在source元素中选择的文件

 

audio 可脚本控制的特性值:

特性     特性说明

autoplay     自动播放已经加载的的媒体文件,或查询是否已设置为autoplay

loop     将媒体文件设置为循环播放,或查询是否已设置为loop

currentTime     以s为单位返回从开始播放到目前所花的时间,也可设置currentTime的值来跳转到特定位置

controls     显示或者隐藏用户控制界面

volume     在0.0到1.0间设置音量值,或查询当前音量值

muted     设置是否静音

autobuffer     媒体文件播放前是否进行缓冲加载,如果设置了autoplay,则忽略此特性

 

现在各个浏览器的最新版本基本上都能跑 HTML5 了,包括 IE 这个让广大前端同学头疼的大家伙。但悲剧的是,各个浏览器所支持的媒体文件类型又不仅相同了,好吧,咱们都习惯了,这些家伙什么时候统一过?看表吧。

音频格式     Chrome     Firefox     IE9     Opera     Safari

OGG     支持     支持     支持     支持     不支持

MP3     支持     不支持     支持     不支持     支持

WAV     不支持     支持     不支持     支持     不支持

小例子:

var currentFile = "";
function playAudio() {
    if (window.HTMLAudioElement) {
        try {
            var oAudio = document.getElementById('audio_player');
            if (oAudio.paused) {
                oAudio.play();
            } else {
                oAudio.pause();
            }
        } catch (e) {
            if (window.console && console.error("Error:" + e));
 
        }
    }
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法