目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件。而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览器升级诸如Adobe Flash、Apple QuickTime等播放插件,只需使用现代浏览器就可以聆听任何可以发出声音的WEB网站。

WEB中的Audio标签

HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签。使用audio标签可以控制音频的播放与停止,循环播放与播放次数设置,以及播放位置等等,详情请看下表。

属性 描述
autoplay true | false 如果是 true,则音频在就绪后马上播放。
controls true | false 如果是 true,则向用户显示控件,比如播放按钮。
end numeric value 定义播放器在音频流中的何处停止播放。默认地,声音会播放到结尾。
loopend numeric value 定义在音频流中循环播放停止的位置,默认是 end 属性的值。
loopstart numeric value 定义在音频流中循环播放的开始位置。默认是 start 属性的值。
playcount numeric value 定义音频片断播放多少次。默认是 1。
src url 所播放音频的 url。
start numeric value 定义播放器在音频流中开始播放的位置。默认地,声音在开头进行播放。

目前支持audio标签的浏览器有:

IE9,Firefox, Opera,Chrome和Safari都支持<audio>标签。

注意:IE8和更早的版本,不支持<audio>标签。

如何使用Audio

要在HTML5中播放音频,需要在body中插入以下代码:

<audio controls="controls">
<source src="music.ogg" />
<source src="music.mp3" />
<source src="music.wav" />
</audio>

  你可以在<audio>和</audio>标签之间插入文字内容,这样如果浏览器不支持audio,那么会显示这些文字。

也许你会问auto中怎么会包含3个source标签呢?这是为了浏览器和音频格式的兼容性,浏览器制造商并非都同意使用某一种音频文件格式。例如,Chrome、Internet Explorer 9 (IE9) 和 Safari 浏览器不支持 WAV 文件,这是一种使用非压缩格式且正在衰败的标准。我们将每个视频文件名放在单独的 <source> 标签里,并且音频容器中的所有源标签都由<audio></audio> 构成,如下所示。那么,无论访问者使用什么浏览器,它都将自动选择所读取的第一个文件类型,并为您播放声音。

HTML5浏览器和音频格式兼容性

音频格式 Chrome Firefox IE9 Opera Safari
OGG 支持 支持 支持 不支持 不支持
MP3 支持 不支持 支持 不支持 支持
WAV 不支持 支持 不支持 支持 不支持

此外,不同浏览器音频空间外观也不一样。

HTML5 让开发人员可以更轻松地提供大量WEB体验。<audio>标签是令人兴奋的新添内容,不再需要外部音乐播放器,使音频的提供像显示图像一样简单。有了基于标准的音频控件和让用户更易于与声音进行交互的新浏览器功能,你可以轻松的在WEB页面上定制MP3播放器了。

转载:helloweba.com 原文链接:http://www.helloweba.com/view-blog-177.html
 

HTML5的Audio标签打造WEB音频播放器的更多相关文章

  1. 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况

    对比audio标签 和 Web Audio API 各平台浏览器的支持情况:   audio element Web Audio API desktop browsers Chrome 14 Yes  ...

  2. 基于canvas和Web Audio的音频播放器

    wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你能够使用它来制作各种HTML5音频播放器,它能够在各种支持 Web A ...

  3. HTML5 音频播放器-Javascript代码(短小精悍)

    直接上干货咯! //HTML5 音频播放器 lzpong 2015/01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...

  4. 【jquery】一款不错的音频播放器——Amazing Audio Player

    前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器——Amazing Audio Player. 介绍: Amazing Audio Player 是一个使用很方便的 Windows ...

  5. JavaScript一个页面中有多个audio标签,其中一个播放结束后自动播放下一个,audio连续播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Wavesurfer.js音频播放器插件的使用教程

    Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import W ...

  7. 基于vue的移动端web音乐播放器

    声明 以下只是学习完慕课网huangyi老师实战视频课程的笔记内容,仅供个人参考学习使用.如果对Vue2.0实战高级-开发移动端音乐WebApp感兴趣的话,请移步这里:https://coding.i ...

  8. 与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成

    原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页][源码下载] 与众不同 win ...

  9. Unity3D音频播放器 动态装载组件

    大多数在线Unity有关如何只教程Unity在播放音乐.之后如何通过拖动它们无法继续添加音频文件 但有时在游戏中的对象要玩几个声音.这时候我们就需要使用代码控制,拖动推教程AudioClip颂值的方法 ...

随机推荐

  1. React Native之 ScrollView介绍和使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  2. MAC OS X El CAPITAN 搭建SPRING MVC (1)- 目录、包名、创建web.xml

    一. 下载STS(Spring Tool Suite) 官方地址:http://spring.io/tools/sts 下载spring tool suite for mac 最新版本.这个IDE是很 ...

  3. 了解JavaScript 对象属性的标签

    对象属性的标签 value(属性值), writable(属性可写), enumerable(属性可枚举), configurable(属性可配置), 这些属性标签使对象所持有的属性体现出不同的特性, ...

  4. MBProgressHUD 显示后,为何不能点击屏幕其他地方

    解决办法: hud.userInteractionEnabled= NO;  就是这么简单粗暴!这个问题 我一定要发到首页候选区! /********************************* ...

  5. Junit单元测试

    写一个被测试的类 这是类中的一些方法,将一个16进制转化为10进制 reckon()为转化的主要方法,返回结果为10进制数 judge()判断字符是否在0-9,A-F之间,并将字符转化为0-15之中的 ...

  6. python3: error while loading shared libraries: libpython3.5m.so.1.0: cannot open shared object file: No such file or directory

    安装python3遇到报错: wget https://www.python.org/ftp/python/3.5.2/Python-3.5.2.tgz ./configure --prefix=/u ...

  7. POJ 3254. Corn Fields 状态压缩DP (入门级)

    Corn Fields Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 9806   Accepted: 5185 Descr ...

  8. python中的迭代、生成器等等

    本人对编程语言实在是一窍不通啊...今天看了廖雪峰老师的关于迭代,迭代器,生成器,递归等等,word天,这都什么跟什么啊... 1.关于迭代 如果给定一个list或tuple,我们可以通过for循环来 ...

  9. Ajax中POST和GET的区别

    Get和Post都是向服务器发送的一种请求,只是发送机制不同. 1. GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给WEB服务器.当然在Ajax请求中,这种 ...

  10. 监控系统Opserver的配置调试

    Stack Exchange开源其监控系统Opserver有一段时间了.之前在项目中用过他们的MiniProfile来分析页面执行效率和帮助新人了解项目,当他们开源了其监控系统的时候正好部门也在关注监 ...