TML5 提供了播放音频文件的标准。

互联网上的音频

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

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

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.

注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.

HTML5 Audio - 如何工作

如需在 HTML5 中播放音频，你需要使用以下代码：

实例

<audiocontrols><sourcesrc="horse.ogg"type="audio/ogg"><sourcesrc="horse.mp3"type="audio/mpeg">您的浏览器不支持 audio 元素。</audio>

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

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

音频格式及浏览器支持

目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

音频格式的MIME类型

HTML5 Audio 标签

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

切图网一个客户项目中，用到了背景音乐，采用了html5 audio标签， 并且设置了 autoplay 自动播放，在PC上正常，但是一到手机下就无法自动播放。

即便使用JS ,调用audio 对象的播放方法 play() 也不能自动播放！ 这是为什么呢？

于是打破砂锅问到底的决心，做了好多种demo，例子

http://m.slicy.cn/bg-music.html

测试，苹果、安卓还是不行，最后发现真相的我，眼泪掉下来 。 原因在这：

为了防止不必要的自动播放浪费流量，手机网页访问带有audio的页面是不会自动播放的。

Safari屏蔽了autoplay，必须由用户交互事件触发，因为autoplay在移动网络环境下可能会造成用户流量费剧增

下面是引自Safari Reference

In Safari on iPhone OS (for all devices, including iPad), where the

user may be on a cellular network and be charged per data unit,

autobuffering and autoplay are disabled. No data is loaded until the

user initiates it. This means the JavaScript play() and load() methods

are also inactive until the user initiates playback, unless the play()

method is triggered by user action.

音在HTML中可以以不同的方式播放.

问题以及解决方法

在 HTML 中播放音频并不容易！

您需要谙熟大量技巧，以确保您的音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

在这W3CSchool 为您总结了问题和解决方法。

使用插件

浏览器插件是一种扩展浏览器标准功能的小型计算机程序。

插件可以使用 <object> 标签 或者 <embed> 标签添加在页面上.

这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。

使用 <embed> 元素

<embed>标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。

下面的代码片段能够显示嵌入网页中的 MP3 文件：

实例

<embed height="50" width="100" src="horse.mp3">

问题:

• <embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。

• 不同的浏览器对音频格式的支持也不同。

• 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。

• 如果用户的计算机未安装插件，无法播放音频。

• 如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

使用 <object> 元素

<object tag> 标签也可以定义外部（非 HTML）内容的容器。

下面的代码片段能够显示嵌入网页中的 MP3 文件：

实例

<object height="50" width="100" data="horse.mp3"></object>

问题:

• 不同的浏览器对音频格式的支持也不同。

• 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。

• 如果用户的计算机未安装插件，无法播放音频。

• 如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

使用 HTML5 <audio> 元素

HTML5 <audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

The <audio> element works in all modern browsers.

以下我们将使用 <audio> 标签来描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的), 同样添加了一个 OGG 类型文件(Firefox 和 Opera浏览器中有效).如果失败，它会显示一个错误文本信息:

实例

<audio controls>

<source src="horse.mp3" type="audio/mpeg">

<source src="horse.ogg" type="audio/ogg">

Your browser does not support this audio format.

</audio>

问题:

• <audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。

• 您必须把音频文件转换为不同的格式。

• <audio> 元素在老式浏览器中不起作用。

最好的 HTML 解决方法

下面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。

实例

<audio controls height="100" width="100">

<source src="horse.mp3" type="audio/mpeg">

<source src="horse.ogg" type="audio/ogg">

<embed height="50" width="100" src="horse.mp3">

</audio>

问题:

• 您必须把音频转换为不同的格式。

• <embed> 元素无法回退来显示错误消息。

雅虎媒体播放器 - 一个简单的添加音频到你网站上的方式

使用雅虎播放器是免费的。如需使用它，您需要把这段 JavaScript 插入网页底部：

雅虎播放器可以播放MP3以及其他各种格式。你只需添加一行代码到你的页面或 博客中就可以轻松地将您的HTML页面制作成 专业的播放列表：

实例

<a href="horse.mp3">Play Sound</a>

<script src="http://mediaplayer.yahoo.com/latest"></script>

如果你要使用它，您需要把这段 JavaScript 插入网页底部：

<script src="http://mediaplayer.yahoo.com/latest"></script>

然后只需简单地把 MP3 文件链接到您的 HTML 中，JavaScript 会自动地为每首歌创建播放按钮：

<a href="song1.mp3">Play Song 1</a>

<a href="song2.wav">Play Song 2</a>

...

...

雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。

请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。

使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。

以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：

实例

<a href="horse.mp3">Play the sound</a>

内联的声音说明

当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。

如果您打算在 web 应用程序中使用内联声音，您需要意识到很多人都觉得内联声音令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。

我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。

HTML 多媒体标签

New : HTML5 新标签

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！