HTML5 <Audio>标签API整理(三)
一、浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.
注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.
二、HTML5 Audio - 如何工作
如需在 HTML5 中播放音频,你需要使用以下代码:
实例
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。
</audio>
control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件
音频格式及浏览器支持
推荐MP3格式
目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer 9+ | YES | NO | NO |
| Chrome 6+ | YES | YES | YES |
| Firefox 3.6+ | YES | YES | YES |
| Safari 5+ | YES | YES | NO |
| Opera 10+ | YES | YES | YES |
音频格式的MIME类型
| Format | MIME-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
更多:
HTML5 <Audio>标签API整理(三)的更多相关文章
- HTML5 <Audio/>标签Api整理(二)
1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...
- HTML5 <Audio>标签API整理(一)
简单实例: <audio id="myAudio"></audio> <script> var myAudio = document.getEl ...
- HTML5 Audio标签方法和函数API介绍
问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...
- CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件
CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件 原因略. 解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...
- html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案
html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...
- html5 audio标签切换播放音乐的方法
html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...
- ios加载html5 audio标签用js无法自动播放
html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...
- 论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...
- html5 -----audio标签
在现在的公司上班需要做一个html5页面,上下可以滑动的,在页面上需要音乐,默认开始音乐播放,点击音乐标签后音乐停止.后来在项目开发中,遇到性能优化的问题,所以我建议大家以后在使用时不要直接在页面中使 ...
随机推荐
- PHP实现数据分页显示
分页在后台管理中是经常使用的功能,分页显示方便大量数据的管理. 实例代码如下: <!DOCTYPE html> <html> <head> <meta cha ...
- Spark官方文档中推荐的硬件配置
1.关于存储: 1).可能的话,Spark节点与HDFS节点是一一对应的 2).如果做不到,那至少保证Spark节点与HDFS节点是一个局域网内 2.关于硬盘: 1).官方推荐每台机子4-8个硬盘,然 ...
- Android导入依赖appcompat-v7报错
Android导入依赖appcompat-v7报错 导入appcompat-v7时报错了 导入的是implementation 'com.android.support:appcompat-v7: ...
- 关于configure: error: no acceptable C compiler found in $PATH
Linux系统在安装python3的时候报错: $ ./configure --prefix=/usr/local/python3 checking build system type... x86_ ...
- Vue之双向绑定原理动手记
Vue.js的核心功能有两个:一是响应式的数据绑定系统,二是组件系统.本文是通过学习他人的文章,从而理解了双向绑定原理,从而在自己理解的基础上,自己动手实现数据的双向绑定. 目前几种主流的mvc(vm ...
- ThreadLocal和InheritableThreadLocal使用
InheritableThreadLocal代码 public class InheritableThreadLocal<T> extends ThreadLocal<T> { ...
- Xamarin iOS教程之页面控件
Xamarin iOS教程之页面控件 Xamarin iOS 页面控件 在iPhone手机的主界面中,经常会看到一排小白点,那就是页面控件,如图2.44所示.它是由小白点和滚动视图组成,可以用来控制翻 ...
- 2018-2019-20172329 《Java软件结构与数据结构》第五周学习总结
2018-2019-20172329 <Java软件结构与数据结构>第五周学习总结 教材学习内容总结 <Java软件结构与数据结构>第九章-排序与查找 一.查找 1.查找概念简 ...
- BZOJ2905: 背单词 AC自动机+fail树+线段树
$zjq$神犇一眼看出$AC$自动机 $Orz$ 直接就讲做法了 首先对每个串建出$AC$自动机 将$fail$树找到 然后求出$dfs$序 我们发现一个单词 $S_i$是$S_j$的子串当且仅当$S ...
- Android四种Activity的加载模式
建议首先阅读下面两篇文章,这样才可以更好的理解Activity的加载模式: Android的进程,线程模型 http://www.cnblogs.com/ghj1976/archive/2011/04 ...