HTML5 播放音频

分享到:

HTML5 提供了播放音频的标准。

Web 上的音频

直到现在,仍然不存在一项旨在网页上播放音频的标准。

今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

audio 元素能够播放声音文件或者音频流。

音频格式

当前,audio 元素支持三种音频格式:

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis    
MP3    
Wav    

如何工作

如需在 HTML5 中播放音频,您所有需要的是:

<audio src="song.ogg" controls="controls">  </audio>  

control 属性供添加播放、暂停和音量控件。

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的:

实例

<audio src="song.ogg" controls="controls">  Your browser does not support the audio tag.  </audio>

上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。

要确保适用于 Safari 浏览器,音频文件必须是 MP3 或 Wav 类型。

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:

实例

<audio controls="controls">    <source src="song.ogg" type="audio/ogg">    <source src="song.mp3" type="audio/mpeg">  Your browser does not support the audio tag.  </audio>

Internet Explorer

Internet Explorer 8 不支持 audio 元素。在 IE 9 中,将提供对 audio 元素的支持。

<audio> 标签的属性

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的音频的 URL。
昵    称:
验证码:

相关文档:

  • 【HTML5】HTML5 综合
    HTML5教程: 视频教程:http://www.socss.cn/html5视频教程大集合/ DCloud关于HTML5:http://ask.dcloud.net.cn/docs 开发工具:HBuilder飞一样的编码 HTML5应...
  • 从程序员到创业者的蜕变(全)
    这个标题看起来挺吸引人,其实只是一个普通的人在瞎折腾罢了。之所以写这么多非技术类的“水文”,是我觉得思维要比技术重...
  • 移动端UC /QQ 浏览器的部分私有Meta 属性
    如同桌面端一样,在国内做web移动开发的话肯定得考虑下移动端占有率靠前的几个国产浏览器的一些适配工作。好在当前移动端浏览器都...
  • Web NFC API
    W3CEditor'sDraft29December2014 Thisversion:http://www.w3.org/2012/nfc/web-api/Latestpublishedversion:http://www.w3.org/TR/nfc/Latesteditor'sdraft:htt...
  • h5中form表单中input新增的属性值
    在HTML5中增加了许多新的标签和功能属性,今天我们来看一个Form表单在HTML5中新的使用方法。那么在HTML5中新加入的这个功能与之前咱们...
  • jQuery.uploadify-----文件上传带进度条,支持多文件上传的插件
    借鉴别人总结的uploadify:基于jquery的文件上传插件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,控制文件上传大小,...
  • 27款前端开发中经典的 CSS 框架
    利用CSS框架,可以简化你的工作,提高工作效率。CSS框架是一系列CSS文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单...
  • 八大Webkit内核浏览器
    列举出时下最流行的Webkit内核浏览器,所以我们并不会做出评测和对比。PS:本文列举的浏览器有一部分为IE+Webkit双核浏览器,如果您对...
  • 文件上传相关的事儿
    自从web进入了2.0的时代,文件上传的功能几乎是遍地开花。小到设置头像,大到网盘管理,都离不开文件上传的功能。今天小剧就来扒一...
  • CSS中控制换行的四种属性
    一、white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果,点此查看示例。 ExampleSourceCode...
  • Gogs
    Gogs(GoGitService)是一个基于Go语言的自助Git服务。Gogs的目标是打造一个最简单、最快速和最轻松的方式搭建自助Git服务。使用Go语言开发使...
  • html5--geolocation实践
    html5太强大了,新功能我就不废话了。看下一个geolocation的实例吧 应用geolocation获取用户的地理位置(原文链接http://www.ibm.com/developerworks/c...
  • Django 的 CSRF 保护机制(转)
    addbyzhj:其实我个人推荐前端不要将数据放在cookie中,而是放在其它本地存储(HTML5中称之为WebStorage),本地存储与cookie的一 个重要区别...
  • js优化提升访问速度
    一、给JS文件减肥。 有的人为了给网站增加炫目效果,往往会使用一些JS效果代码,这在上个世纪似乎还很流行,对于现在来说,最好在...
  • 树莓派学习笔记——使用文件IO操作GPIO SysFs方式
    0前言...
  • jquery图片上传新思路
    本文主要针对于上传多张图片时,要显示进度条但是表单窗口不够显示的情形。其解决方案如下: 1、在表单窗口添加能够显示上传成功...
  • HTML5 桌面提示
    <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title>DesktopNotification</title> </head> <body>...
  • 最新软件应用合集
    最新软件应用合集学习软件c语言编程软件路由器管理软件物流管理软件html5开发工具音频解码器磁盘清理软件安卓模拟器大全送货单打印...
  • 22个常见HTML5新特性
    1,新DOCTYPE 还在使用那个讨厌的的标准doctype?试试下面这个 <!DOCTYPEHTML> 2.<figure>标签(图元素) <figure> <imgsrc="path/to/imag...
  • HTML 5 History API的”前生今世”
    原文:AnIntroductionToTheHTML5HistoryAPI 译文:关于HTML5HistoryAPI的介绍 译者:dwqs History是有趣的,不是吗?在之前的HTML版本号中,我们对浏览...