给客户做网站建设方案,长沙网络营销群,天健oa管理系统,wordpress标签模板HTML 音频(Audio) 声音在HTML中可以以不同的方式播放. 问题以及解决方法
在 HTML 中播放音频并不容易#xff01;
您需要谙熟大量技巧#xff0c;以确保您的音频文件在所有浏览器中#xff08;Internet Explorer, Chrome, Firefox, Safari, Opera#xff09;和所有硬件上…
HTML 音频(Audio) 声音在HTML中可以以不同的方式播放. 问题以及解决方法
在 HTML 中播放音频并不容易
您需要谙熟大量技巧以确保您的音频文件在所有浏览器中Internet Explorer, Chrome, Firefox, Safari, Opera和所有硬件上PC, Mac , iPad, iPhone都能够播放。
在本章W3Cschool为您总结了问题和解决方法。
您可以参考本站的 HTML 参考手册的 audio 标签一节来获得更多详细信息 使用插件
浏览器插件是一种扩展浏览器标准功能的小型计算机程序。
插件可以使用 object 标签 或者 embed 标签添加在页面上.
这些标签定义资源通常非 HTML 资源的容器根据类型它们即会由浏览器显示也会由外部插件显示。 使用 embed 元素
embed标签定义外部非 HTML内容的容器。这是一个 HTML5 标签在 HTML4 中是非法的但是所有浏览器中都有效。
下面的代码片段能够显示嵌入网页中的 MP3 文件
实例
embed height50 width100 srchorse.mp3
尝试一下 »
问题: embed 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。 不同的浏览器对音频格式的支持也不同。 如果浏览器不支持该文件格式没有插件的话就无法播放该音频。 如果用户的计算机未安装插件无法播放音频。 如果把该文件转换为其他格式仍然无法在所有浏览器中播放。 使用 object 元素
object 标签也可以定义外部非 HTML内容的容器。
下面的代码片段能够显示嵌入网页中的 MP3 文件
实例
object height50 width100 datahorse.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 srchorse.mp3 typeaudio/mpeg source srchorse.ogg typeaudio/ogg Your browser does not support this audio format. /audio
尝试一下 »
问题: audio 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。 您必须把音频文件转换为不同的格式。 audio 元素在老式浏览器中不起作用。 最好的 HTML 解决方法
下面的例子使用了两个不同的音频格式。HTML5 audio 元素会尝试以 mp3 或 ogg 来播放音频。如果失败代码将回退尝试 embed 元素。
实例
audio controls height100 width100 source srchorse.mp3 typeaudio/mpeg source srchorse.ogg typeaudio/ogg embed height50 width100 srchorse.mp3 /audio
尝试一下 »
问题: 您必须把音频转换为不同的格式。 embed 元素无法回退来显示错误消息。 雅虎媒体播放器 - 一个简单的添加音频到你网站上的方式
使用雅虎播放器是免费的。如需使用它您需要把这段 JavaScript 插入网页底部
雅虎播放器可以播放 MP3 以及其他各种格式。你只需添加一行代码到你的页面或 博客中就可以轻松地将您的 HTML 页面制作成专业的播放列表
实例
a hrefhorse.mp3Play Sound/a script srchttp://mediaplayer.yahoo.com/latest relexternal nofollow relexternal nofollow /script
尝试一下 »
如果你要使用它您需要把这段 JavaScript 代码插入网页底部
script srchttp://mediaplayer.yahoo.com/latest relexternal nofollow relexternal nofollow /script
然后只需简单地把 MP3 文件链接到您的 HTML 中JavaScript 会自动地为每首歌创建播放按钮 a hrefsong1.mp3Play Song 1/a a hrefsong2.wavPlay Song 2/a ... ...
雅虎媒体播放器为您的用户提供的是一个小型的播放按钮而不是完整的播放器。不过当您点击该按钮会弹出完整的播放器。
请注意这个播放器始终停靠在窗框底部。只需点击它就可将其滑出。 使用超链接
如果网页包含指向媒体文件的超链接大多数浏览器会使用辅助应用程序来播放文件。
以下代码片段显示指向 MP3 文件的链接。如果用户点击该链接浏览器会启动辅助应用程序来播放该文件
实例
a hrefhorse.mp3Play the sound/a
尝试一下 » 内联的声音说明
当您在网页中包含声音或者作为网页的组成部分时它被称为内联声音。
如果您打算在 Web 应用程序中使用内联声音您需要意识到很多人都觉得内联声音令人恼火。同时请注意用户可能已经关闭了浏览器中的内联声音选项。
我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是在用户需要听到录音并点击某个链接时会打开页面然后播放录音。 HTML 多媒体标签
New : HTML5 新标签
标签描述embed定义内嵌对象。HTML4 中不赞成HTML5 中允许。object定义内嵌对象。param定义对象的参数。audioNew定义了声音内容videoNew定义一个视频或者影片sourceNew定义了media元素的多媒体资源(video 和 audio)trackNew规定media元素的字幕文件或其他包含文本的文件 (video 和audio)
