声音在HTML中可以有不同的播放方式。

问题与解决方案

用HTML播放音频不容易！

你需要懂得很多技巧，才能保证你的音频文件可以在所有浏览器(Internet Explorer、Chrome、Firefox、Safari、Opera)和所有硬件(PC、Mac、iPad、iPhone)上播放。

这里W3CSchool为你总结问题和解决方案。

使用插件

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

插件可以使用对象标签或嵌入标签添加到页面中。

这些标记定义了资源(通常是非HTML资源)的容器，这些资源根据其类型由浏览器和外部插件显示。

使用嵌入元素

嵌入标签为外部(非超文本标记语言)内容定义了一个容器。(这是HTML5标记，在HTML4中是非法的，但在所有浏览器中都有效。).

以下代码片段可以显示嵌入在网页中的MP3文件：

例子

嵌入高度='50 '宽度='100' src='horse.mp3 '

问题：

HTML 4中的嵌入标记无效。页面无法通过HTML 4身份验证。

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

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

如果用户的计算机上没有安装插件，音频将无法播放。

如果文件被转换成其他格式，它仍然不能在所有浏览器中播放。

使用对象元素

对象标签标签还可以为外部(非HTML)内容定义容器。

以下代码片段可以显示嵌入在网页中的MP3文件：

例子

对象高度='50 '宽度='100 '数据=' horse . MP3 '/对象

问题：

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

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

如果用户的计算机上没有安装插件，音频将无法播放。

如果文件被转换成其他格式，它仍然不能在所有浏览器中播放。

使用HTML5音频元素

HTML5音频元素是HTML5元素，在HTML 4中是非法的，但在所有浏览器中都是有效的。

音频元素适用于所有现代浏览器。

在下面，我们将使用音频标签来描述MP3文件(在互联网浏览器、Chrome和Safari中有效)，并添加一个OGG类型的文件(在Firefox和Opera浏览器中有效)。如果失败，它将显示错误文本消息：

例子

音频控制

source src=' horse . MP3 ' type=' audio/mpeg '

source src=' horse . ogg ' type=' audio/ogg '

您的浏览器不支持此音频格式。

/音频

问题：

HTML 4中的音频标签无效。您的页面无法通过HTML 4身份验证。

您必须将音频文件转换成不同的格式。

音频元素在旧浏览器中不起作用。

更好的HTML解决方案

以下示例使用两种不同的音频格式。HTML5音频元素试图在mp3或ogg中播放音频。如果失败，代码将返回并尝试嵌入元素。

例子

音频控制高度='100 '宽度='100 '

source src=' horse . MP3 ' type=' audio/mpeg '

source src=' horse . ogg ' type=' audio/ogg '

嵌入高度='50 '宽度='100' src='horse.mp3 '

/音频

问题：

您必须将音频转换成不同的格式。

嵌入元素无法回滚以显示错误消息。

雅虎媒体播放器-一个简单的方法来添加音频到您的网站

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

雅虎播放器可以播放MP3等格式。通过在页面或博客中添加一行代码，您可以轻松地将您的网页制作成专业的播放列表：

例子

a href='马. mp3 '播放声音/a

脚本src=' http://media player . Yahoo.com/latest '/脚本

如果您想使用它，您需要将这个JavaScript插入到页面的底部：

脚本src=' http://media player . Yahoo.com/latest '/脚本

然后只需将MP3文件链接到您的HTML，JavaScript就会自动为每首歌曲创建一个播放按钮：

a href='song1.mp3 '播放歌曲1/a

a href='song2.wav '播放歌曲2/a

.

.

雅虎媒体播放器为您的用户提供了一个小的播放按钮，而不是一个完整的播放器。但是，当你点击这个按钮，完整的播放器就会弹出来。

请注意，这个播放器总是停在窗框的底部。只要点一下就可以滑出来了。

使用超链接

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

下面的代码片段显示了一个mp3文件的链接。如果用户点击链接，浏览器将启动“辅助应用程序”播放文件：

例子

a href='马. mp3 '播放声音/a

内嵌声音描述

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

如果你打算在你的网络应用程序中使用内嵌声音，你需要意识到很多人觉得内嵌声音很烦人。另外，请注意，用户可能已经关闭了浏览器中的内嵌声音选项。

我们更好的建议是只在用户想听的地方加入内嵌声音。一个积极的例子是，当用户需要听到录音并点击一个链接时，页面会打开，然后播放录音。

HTML多媒体标签

新： HTML5新标签

标签

形容

把…嵌入

定义嵌入对象。HTML4不允许，HTML5允许。

目标

定义嵌入对象。

参数

定义对象的参数。

音频新

声音内容被定义

videoNew

定义视频或电影

sourceNew

定义媒体元素的多媒体资源(视频和音频)

trackNew

字幕文件或包含指定媒体元素的文本(视频和音频)的其他文件