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 ...
随机推荐
- 一起学 Java(四) File、Try 、序列化、MySQL、Socket
一.Java 流(Stream).文件(File)和IO Java.io 包几乎包含了所有操作输入.输出需要的类.所有这些流类代表了输入源和输出目标. Java.io 包中的流支持很多种格式,比如:基 ...
- 理解javascript中的Function.prototype.bind
在初学Javascript时,我们也许不需要担心函数绑定的问题,但是当我们需要在另一个函数中保持上下文对象this时,就会遇到相应的问题了,我见过很多人处理这种问题都是先将this赋值给一个变量(比如 ...
- svn conflicts: local delete, incoming delete upon update
svn st查看更新的时候发现存在conflicts,提示很多 local delete, incoming delete upon update , $:svn st ? C IMIRROR.T3 ...
- 修改WebView
http://jwdev.cn/2015/09/28/use-javascript-to-delete-web-element/
- excel表格的特殊需求引发的Java思考
前言: 前些天遇到了这样的一个需求,将下图: 将表格中货号-前面部分一致的行合成一行,并且将第二行,第三行的价格添加到第一行中为价格二,价格三.如图: 接到这样的需求,我的第一感觉是直接手动合并(暗暗 ...
- js加载XML文件
// XML文件 <?xml version="1.0" encoding="gb2312"?> <root> <father n ...
- WDCP下安装PHPWind
创建整站跟新建站点的区别是创建整站会一并生成ftp跟mysql数据库 这边只要填写一个域名(如果你有域名就填写下域名 如果你没有域名 或者跟我一样到这步去申请域名的可以填写ECS公网ip否则无法访问新 ...
- 随机生成并排序 C,去同,有序数组合并排序
#include<iostream> #include<stdlib.h> #include<time.h> using namespace std; int ma ...
- delegate vs event
What are the differences between delegate and an event? An event declaration adds a layer of abstrac ...
- PrefixHeader.pch' file not found 以及 Xcode 中如何添加pch文件
在开发的过程中,有时候接触到旧项目,会报: 'PrefixHeader.pch' file not found 的错误! 在Xcode6之前,新建一个工程的时候,系统会帮我们自动新建一个以工程名为名字 ...