一、浏览器支持

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整理(二)

HTML5 WebAudioAPI简介(一)

HTML5 <Audio>标签API整理(三)的更多相关文章

  1. HTML5 <Audio/>标签Api整理(二)

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  2. HTML5 <Audio>标签API整理(一)

    简单实例: <audio id="myAudio"></audio> <script> var myAudio = document.getEl ...

  3. HTML5 Audio标签方法和函数API介绍

    问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...

  4. CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

    CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件   原因略.   解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...

  5. html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案

    html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...

  6. html5 audio标签切换播放音乐的方法

    html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...

  7. ios加载html5 audio标签用js无法自动播放

    html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...

  8. 论HTML5 Audio 标签歌词同步的实现

    HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...

  9. html5 -----audio标签

    在现在的公司上班需要做一个html5页面,上下可以滑动的,在页面上需要音乐,默认开始音乐播放,点击音乐标签后音乐停止.后来在项目开发中,遇到性能优化的问题,所以我建议大家以后在使用时不要直接在页面中使 ...

随机推荐

  1. df -h命令卡死解决办法

    1.现象 同事突然反应说有个服务器进入/目录运行 ls  -l 无反应,同时运行df  -h也卡死了.如果你的机器有用到nfs请直接看第四大点. 2.分析 运行mount [conversant@sw ...

  2. Codeforces Round #254 (Div. 1) D - DZY Loves Strings

    D - DZY Loves Strings 思路:感觉这种把询问按大小分成两类解决的问题都很不好想.. https://codeforces.com/blog/entry/12959 题解说得很清楚啦 ...

  3. Linux性能优化之内存优化(二)

    前言 不知道大家看完前面一章关于CPU优化,是否受到相应的启发呢?如果遇到任何问题,可以留言和一起探讨这方面的问题.接下来我们介绍一些关于内存方面的知识.内存管理软件包括虚拟内存系统.地址转换.交换. ...

  4. SpringBoot中使用纯scala进行开发 配置教程 非常简单的案例

    新建项目 建好之后 建一个叫scala的文件夹 并把它标记为root文件夹 修改pom.xml文件 复制粘贴如下内容: 添加的插件的作用,如果不添加,在新建文件的时候右键只能新建java的文件,无法创 ...

  5. 001.NTP简介

    一 NTP简介 ntp服务器顾名思义就是时间同步服务器(Network Time Protocol),时间同步对于计划备份.入侵检测记录.分布式任务调度或者事务订单管理来说都是非常有必要的日常任务. ...

  6. Android 常见SD卡操作

    目录 Android 常见SD卡操作 Android 常见SD卡操作 参考 https://blog.csdn.net/mad1989/article/details/37568667. [0.] E ...

  7. Linux驱动之USB(个人)

                              USB概述 <USB简介> a:背景 USB是Universal Serial Bus的缩写,是一种全新的,双向同步传输的,支持热插拔的 ...

  8. 五校联考R1 Day2T2 矩阵matrix(容斥)

    题目链接 容易想到容斥,但是很恶心,因为要对行和列都容斥,然后行+列又要容斥.. 于是得到\(O(nm\log)\)的做法. 就有70分了: #include <cstdio> #incl ...

  9. AIM Tech Round 3 (Div. 1) A. Letters Cyclic Shift 贪心

    A. Letters Cyclic Shift 题目连接: http://www.codeforces.com/contest/708/problem/A Description You are gi ...

  10. 使用 IntraWeb (26) - 基本控件之 TIWMenu

    TIWMenu 的任务是让原来的 TMainMenu 呈现在网页上, 通过其 AttachedMenu 属性关联一个 TMainMenu 是必需的. TIWMenu 所在单元及继承链: IWCompM ...