外链论坛

 找回密码
 立即注册
搜索
查看: 2|回复: 0

HTML 音频(Audio)

[复制链接]

2618

主题

4840

回帖

9916万

积分

论坛元老

Rank: 8Rank: 8

积分
99160655
发表于 8 小时前 | 显示全部楼层 |阅读模式

声音在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">lay 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">lay Song 1</a>

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

...

...

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

重视,这个播放器始终停靠在窗框底部。只需点击它,就可将其滑出。

运用超链接

倘若网页包括指向媒介文件的超链接,大都数浏览器会运用"辅助应用程序"来播放文件。

以下代码片段表示指向 mp3 文件的链接。倘若用户点击该链接,浏览器会起步"辅助应用程序"来播放该文件:

实例

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

内联的声音说明

当您在网页中包括声音,做为网页的构成部分时,它被叫作为内联声音。

倘若您打算在 web 应用程序中运用内联声音,您需要认识非常多人都觉得内联声音令人恼火。同期重视,用户可能已然关闭了浏览器中的内联声音选项。

咱们最好的意见仅在用户期盼听到内联声音的地区包括它们。一个正面的例子是,在用户需要听到录音并点击某个链接时,会打开页面而后播放录音。

HTML 多媒介标签

New : HTML5 新标签

标签描述<embed>定义内嵌对象。HTML4 中不赞成,HTML5 中准许。<object>定义内嵌对象。<param>定义对象的参数。<audio>New定义了声音内容<video>New定义一个视频影片<source>New定义了media元素的多媒介资源(<video> 和 <audio>)<track>New规定media元素的字幕文件或其他包括文本的文件 (<video> 和<audio>)

如您还有不明白的能够在下面与我留言或是与我探讨QQ群308855039,咱们一块飞!

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-10-3 19:15 , Processed in 0.072853 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.