H5 音频
HTML 5 音频
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 |
如果出现该属性,则音频在就绪后马上播放。 |
|
controls |
如果出现该属性,则向用户显示控件,比如播放按钮。 |
|
loop |
如果出现该属性,则每当音频结束时重新开始播放。 |
|
preload |
如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
|
url |
要播放的音频的 URL。 |
H5 音频的更多相关文章
- H5音频处理的一些小知识
前 言 LiuDaP 十一过后,小编要做一个关于音乐播放器的项目,要用到大量H5音频处理的内容,于是在十月一日国庆黄金周闲暇之际,自己学习了一下H5音频的相关内容.虽然自学的没有那么深入,但是对 ...
- IIS 配置 FTP 网站 H5 音频标签自定义样式修改以及添加播放控制事件
IIS 配置 FTP 网站 在 服务器管理器 的 Web服务器IIS 上安装 FTP 服务 在 IIS管理器 添加FTP网站 配置防火墙规则 说明:服务器环境是Windows Server 200 ...
- App中h5音频不能播放问题
前置:以下问题是针对vue项目的解决方案 问题一:IOS中音频不能自动播放 原因:ios禁止了音频自动播放 解决办法:在vue的生命周期mounted中获取音频Dom并调用音频播放方法play(),注 ...
- H5 音频标签自定义样式修改以及添加播放控制事件
说明: 需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的. 最终效果如下: 具体实现 思路: H5 的 <audio> 标签是由浏览器负责实现默认样式的.所以不同 ...
- H5音频和视频
使用媒体标签最大的缺点在于缺少编解码器的支持一.浏览器支持性检测检测浏览器是否支持audio元素或video元素最简单的方式就是用脚本动态创建它,然后检测特定函数是否存在 var hasVideo=! ...
- 那些年,我们一起被坑的H5音频
原文地址:http://weibo.com/p/23041874d6cedd0102vkbr 不要被这么文艺的标题吓到,这里不会跟你讲述中学时期泡妞史,也不会有其它什么现实不该有而小说噼里啪啦不能 ...
- 那些H5用到的技术(1)——素材加载
编码环境前言什么时候用到素材加载?loading提示,让用户等待图片的加载音频的加载利用神器PreloadJS总结 编码环境 Sublime Text 3 插件包括: Autoprefixer 自动补 ...
- H5知识点
一.总体变化 1.H5文档结构 <!DOCTYPE html> <html> <head> <title> 这是标题 </title> ...
- h5播放音乐
h5音频播放,里面參数能够查看http://www.w3school.com.cn/html5/html_5_audio.asp <audio controls="controls&q ...
随机推荐
- 基于Doubango的iOS客户端开源框架
一.ios-ngn-statck工程 1.Tests ---功能测试 2.底层模块(c和c++) Doubango --- 基于3GPP IMS/RCS 并能用于嵌入式和桌面系统的开源框架 1) ti ...
- HoloLens开发手记 - 构建2D应用 Building 2D apps
HoloLens可以让我们在真实世界中看到全息图像内容.但是它本质上还是一台Windows 10设备,这意味着HoloLens可以以2D应用形式运行Windows Store里的大部分UWP应用. 目 ...
- jquery常用的一些方法
一.选择网页元素(标签选择器) $(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class为myCla ...
- vijos P1001 谁拿了最多奖学金
vijos P1001 谁拿了最多奖学金 描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 1) 院士奖学金,每人8000元,期末平均成绩高于80分(&g ...
- BZOJ-2150部落战争(最小路径覆盖)
2150: 部落战争 Time Limit: 10 Sec Memory Limit: 259 MB Description lanzerb的部落在A国的上部,他们不满天寒地冻的环境,于是准备向A国 ...
- Hadoop权威指南:数据完整性
Hadoop权威指南:数据完整性 [TOC] 常用的错误检测码是CRC-32(循环冗余校验) HDFS的数据完整性 HDFS会对写入的所有数据计算校验和,并在读取数据时验证校验和 datanode负责 ...
- Hibernate核心配置文件
Hibernate.cfg.xml是Hibernate操作数据库的核心配置文件 *********************************************** 作用 01.管理实体类的 ...
- WebForm 三级联动
三级联动 数据库根据父级代号条件写查询 返回list<>集合 方法一: 创建三个下拉列表: ※AutoPostBack:否发生自动回传到服务器的操作.如果把该属性设置为 TRUE,则启用自 ...
- WinForm DataGridView控件、duck布局
1.DataGridView控件 显示数据表 (1)后台数据绑定: List<xxx> list = new List<xxx>(); dataGridView1.DataSo ...
- HTML5 & CSS3 初学者指南(4) – Canvas使用
介绍 传统的HTML主要用于文本的创建,可以通过<img>标签插入图像,动画的实现则需要第三方插件.在这方面,传统的HTML极其缺乏满足现代网页多媒体需求的能力.HTML5的到来,带来了新 ...