声音在 html 中可以以不同的方式播放
问题以及 解决方法
在 html 中 播放音频 并不容易
我们需要谙熟大量技巧，以确保音频 文件 在所有浏览器中（Internet Explorer,Chrome,Firefox,Safari,Opera）和所有硬件上（PC,Mac,iPad,iPhone）都能够播放
在本节中，我们将介绍长久以来碰到的问题和 解决方法 。
使用 插件
浏览器 插件 是一种扩展浏览器标准 功能 的小型计算机程序
插件 可以使用 <object> 标签 或者 <em bed > 标签 添加 在 页面 上
这些 标签 定义资源 ( 通常非 HTML 资源 ) 的容器，根据类型，它们即会由浏览器 显示 ，也会由外部 插件 显示
使用 <em bed > 元素
<em bed > 标签 定义外部（非 HTML） 内容 的容器
这是 一个 HTML5 标签 ，在 HTML4 中是非法的，但是所有浏览器中都有效
下面的 代码 片段能够 显示 嵌入网页中的 MP3 文件
<em bed ?height="50"?width="100"?src="/static/i/html/horse.mp3">
问题
<em bed > 标签 在 HTML 4 中是无效的， 页面 无法通过 HTML 4 验证
不同的浏览器对音频格式的 支持 也不同
如果浏览器 不支持 该 文件 格式，没有 插件 的话就无法播放该音频
如果 用户 的计算机未安装 插件 ，无法 播放音频
如果把该 文件转换 为其他格式，仍然无法在所有浏览器中播放
使用 <object> 元素
<object> 标签 也可以定义外部 ( 非 HTML ) 内容 的容器
下面的 代码 片段能够 显示 嵌入网页中的 MP3 文件
<object?height="50"?width="100"?data="/static/i/html/horse.mp3"></object>
问题
不同的浏览器对音频格式的 支持 也不同
如果浏览器 不支持 该 文件 格式，没有 插件 的话就无法播放该音频
如果 用户 的计算机未安装 插件 ，无法 播放音频
如果把该 文件转换 为其他格式，仍然无法在所有浏览器中播放
使用 HTML5 <au dio > 元素
HTML5 <au dio > 元素是 一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效
<au dio > 在所有现代浏览器上都得到了良好的 支持
下面我们将使用 <au dio > 标签 来描述 MP3 文件 (Internet Explorer、Chrome 以及 Safari 中是有效的),同样 添加 了 一个 OGG 类型 文件 (Firefox 和 Opera浏览器中有效)
如果失败，它会 显示 一个 错误 文本信息
<au dio ?controls> ??<source?src="/static/i/html/horse.mp3"?type="au dio /mpeg"> ??<source?src="/static/i/html/horse.ogg"?type="au dio /ogg"> ????你的浏览器 不支持 ?<au dio >? </au dio >
问题
<au dio > 标签 在 HTML 4 中是无效的，我们的 页面 无法通过 HTML 4 验证
必须把音频 文件转换 为不同的格式
<au dio > 元素在老式浏览器中不起作用
最好的 HTML 解决方法
下面的范例使用了两个不同的音频格式
HTML5 <au dio > 元素会尝试以 mp3 或 ogg 来 播放音频
如果失败， 代码 将回退尝试 <em bed > 元素
<au dio ?controls?height="100"?width="100"> ????<source?src="/static/i/html/horse.mp3"?type="au dio /mpeg"> ????<source?src="/static/i/html/horse.ogg"?type="au dio /ogg"> ????<em bed ?height="50"?width="100"?src="horse.mp3"> </au dio >
问题
必须把音频转换为不同的格式
<em bed > 元素无法回退来 显示 错误 消息
雅虎媒体播放器 - 一个 简单的 添加 音频到网站上的方式
使用雅虎播放器是免费的
如需使用它，需要把这段 JavaScript 插入网页 底部
雅虎播放器可以播放 MP3 以及其他各种格式
我们只需 添加 一行 代码 到 页面 或 博客 中就可以轻松地将 HTML 页面 制作成专业的播放列表
<a?href="/static/i/html/horse.mp3">Play?Sound</a> <script?src="http://mediaplayer.yahoo测试数据/latest"></script>
如果我们要使用它，就需要把这段 JavaScript 插入网页 底部
<script?src="http://mediaplayer.yahoo测试数据/latest"></script>
然后只需简单地把 MP3 文件 链接 到您的 HTML 中，JavaScript 会 自动 地为每首歌创建播放按钮
<a?href="song1.mp3">Play?Song?1</a> <a?href="song2.wav">Play?Song?2</a>
雅虎媒体播放器为你的 用户 提供的是 一个 小型的播放按钮，而不是完整的播放器
不过，当点击该按钮，会弹出完整的播放器
请注意，这个播放器始终停靠在窗框 底部 ，只需点击它，就可将其滑出
使用超 链接
如果网页包含指向媒体 文件 的超 链接 ，大多数浏览器会使用"辅助应用程序"来播放 文件
以下 代码 片段 显示 指向 mp3 文件 的 链接
如果 用户 点击该 链接 ，浏览器会启动"辅助应用程序"来播放该 文件
<a?href="/static/i/html/horse.mp3">Play?the?sound</a>
内联的声音说明
当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音
如果打算在 web 应用程序中使用内联声音，需要意识到很多人都觉得内联声音令人恼火
同时请注意， 用户 可能已经 关闭 了浏览器中的内联声音选项
所以，我们建议只在 用户 希望听到内联声音的地方包含它们
一个 正面的例子是，在 用户 需要听到录音并点击某个 链接 时，会打开 页面 然后播放录音
HTML 多媒体 标签 标签 描述
<em bed >
定义内嵌对象，HTML4 中不赞成，HTML5 中允许<object>
定义内嵌对象<p ara m>
定义对象的参数<au dio >
定义了声音 内容<video>
定义 一个 视频或者影片<source>
定义了media元素的多媒体资源(<video> 和 <au dio >)<track>
规定media元素的字幕 文件 或其他包含文本的 文件 ( <video> 和 <au dio >)