html5中audio播放器标签属性整理

HTML5 元素
audio播放器隐藏
audio标签控制函数功能说明
audio 可脚本控制的特性值
只读属性属性说明

HTML5 元素

元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

<audio controls="controls"><source src="qipa250.mp3" type="audio/mp3" /><source src="qipa250.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

上面的例子使用了一个 mp3 文件，这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。
为了使这段音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件。如果失败，会显示错误消息。
问题：

标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
您必须把音频文件转换为不同的格式。
元素在老式浏览器中不起作用。
注释：使用 (HTML5) 解决验证问题。

最好的 HTML 解决方法

<audio controls="controls" height="100" width="100"><source src="qipa250.mp3" type="audio/mp3" /><source src="qipa250.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

上面的例子使用了两个不同的音频格式。HTML5 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试元素。

问题：

您必须把音频转换为不同的格式。
元素无法通过 HTML 4 和 XHTML 验证。
元素无法通过 HTML 4 和 XHTML 验证。
元素无法回退来显示错误消息。
注释：使用 (HTML5) 解决验证问题。

audio播放器隐藏

<audiostyle="display: none" id="mp3audio" autoplay="autoplay" src="https://www.qipa250.com/Baidu_Mp3/qipa250.mp3"><source src="https://www.qipa250.com/Baidu_Mp3/qipa250.mp3" type="audio/mpeg" id="beijingyine">您的浏览器不支持 audio 元素。
</audio>

播放器样式隐藏，自动播放mp3文件

audio标签控制函数功能说明

load()：加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载
play()：加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
pause()：暂停处于播放状态的音频、视频文件

audio 可脚本控制的特性值

:src：音频文件路径。
autoplay：设置音频是否自动播放（默认有此属性为自动播放已经加载的的媒体文件），或查询是否已设置为autoplay
autobuffer：设置是否在页面加载时自动缓冲音频，如果设置了autoplay，则忽略此特性
loop：设置音频是否要循环播放。，或查询是否已设置为loop
currentTime：以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置
controls：显示或者隐藏用户控制界面（属性供添加播放、暂停和音量控件。）
volume：在0.0到1.0间设置音量值，或查询当前音量值
muted：设置是否静音

只读属性属性说明

duration：获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
paused：如果媒体文件被暂停，则返回true，否则返回false
ended：如果媒体文件播放完毕，则返回true
startTime：返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区
error：在发生了错误后返回的错误代码
currentSrc：以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件

对于这些属性，主流的浏览器都支持。可是别以为就没有了兼容性，在音频播放流中，有两个阵营。firefox 和 opera 支持 ogg 音频，safari 和 ie 支持 mp3。幸好Google的chrome都支持。

代码如下：
mp3.html

<div class="btn-audio"><audio id="mp3Btn"><source src="images/audio.mp3" type="audio/mpeg" /></audio></div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>

mp3.css

 body{background:#2b2938;}
.btn-audio{margin: 90px auto;width: 186px;height: 186px;background:url(images/voice_stop.png) no-repeat center bottom;background-size:cover;}

mp3.js

<script type="text/javascript">$(function(){//播放完毕$('#mp3Btn').on('ended', function() {console.log("音频已播放完成");$('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});})//播放器控制var audio = document.getElementById('mp3Btn');audio.volume = .3;$('.btn-audio').click(function() {event.stopPropagation();//防止冒泡if(audio.paused){ //如果当前是暂停状态$('.btn-audio').css({'background':'url(images/voice_play.png) no-repeat center bottom','background-size':'cover'});audio.play(); //播放return;}else{//当前是播放状态$('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});audio.pause(); //暂停}});})
</script>

通过以上方法，audio的样式修改的问题就解决啦，你可以换成你想要的显示效果。

html5中audio播放器标签属性整理相关推荐

html5中音乐播放器怎么写,打造属于自己的音乐播放器 HTML5之audio标签
我的音乐播放器 HTML5中增加了Audio和Video标签,这两个标签的用法非常相似.功能却是相当强大,我们先来看一下Audio标签各个浏览器的支持情况.这里用的依然是Can I Use这个在线网站 ...
html5中音乐播放器怎么写,html5简单音乐播放器
自己写的一个简单的音乐播放器, 主要实现了控制播放暂停,时间显示,音乐进度条点击以及拖动改变播放进度效果. 基于jquery编写,需要引入jquery. HTML: 00:00:00 00:00:00 ...
html5media使用api,html5中media(播放器)的api使用指南.pdf
代码如下 : HTML Audio API HTML5 Audio API HTML5 Audio API demo by " target="_blank">Le ...
如何调整html中音乐播放器的大小,html5实现在线响应式音乐播放器
大基发猿U移近础开未C变近础开未C变近础开概很早的时候就有想法做一个音乐播放器玩玩,以前可能还考虑过做APP,大一的时候第一个html的静态页面也是做的音乐网站,想想,大概小时候比较喜欢音乐吧.然而, ...
html5 meta标签属性整理
html5 meta标签属性整理前言:不知道有没有人觉得,html的meta标签描述的头部信息特别多,有针对的SEO的头部信息,也有针对移动设备的头部信息,今日特地在网上搜集资料自己稍微对其整理一下 ...
html5网页中加入播放器,6 个 HTML5 的多媒体播放器
是 HTML5 中新引入的标签,用来在 Web 网页中嵌入视频播放功能,无需 Flash 和其他嵌入式插件的支持,是浏览器内建的功能,不过旨在一些高级浏览器中支持,例如Firefox, Safari ...
html5网页中加入播放器,10款jquery+html5实现的网页播放器
1.3D版HTML5模拟衣服拖拽动画效果这是一款3D版HTML5模拟衣服拖拽动画效果源码,是一款非常具有创意而且很好玩的HTML5动画.运行本例源码可见衣服布料呈3D环形显示,可以用鼠标左键来拖拽衣 ...
html在线音频播放器实训总结,HTML5音乐列表播放器SMusic开发总结
前段时间写过一篇介绍简单音乐播放器效果开发的博文<为你的博客添加简单的CSS3音乐播放器>,实现了单曲循环播放效果,这个效果也是我的博客首页一直有的效果,同时文中也介绍了一些简单的HTML ...
带倍速播放的播放器_带有HTML5的MP3播放器
带倍速播放的播放器 MP3 Player with HTML5 In you are a beginner in HTML5 and you are looking for new knowledge ...

html5中audio播放器标签属性整理

html5中audio播放器标签属性整理

HTML5 元素

audio播放器隐藏

audio标签控制函数功能说明

audio 可脚本控制的特性值

只读属性属性说明

html5中audio播放器标签属性整理相关推荐

最新文章

热门文章