HTML 音频(Audio)-天涯论坛 - Powered by Discuz! Archiver

nykek5i 发表于 2024-10-3 11:11:11

HTML 音频(Audio)

<div style="color: black; text-align: left; margin-bottom: 10px;">
 声音在HTML中能够以区别的方式播放.
 问题以及处理办法
 在 HTML 中播放音频并不易！
 您需要谙熟海量技巧，以保证您的音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。
 在这W3CSchool 为您总结了问题和处理办法。
 <img src="https://p3-sign.toutiaoimg.com/111200046765a3ce9032~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728097373&x-signature=Cr%2BAraCiMfm0HqxI%2F8EkOEmSRKQ%3D" style="width: 50%; margin-bottom: 20px;">
 运用插件
 浏览器插件是一种扩展浏览器标准功能的小型计算机程序。
 插件能够运用 <object> 标签 或 <embed> 标签添加在页面上. 
 这些标签定义资源（一般非 HTML 资源）的容器，按照类型，它们即会由浏览器表示，亦会由外边插件显示。
 运用 <embed> 元素
 <embed>标签定义外边（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是违法的，然则所有浏览器中都有效）。
 下面的代码片段能够表示嵌入网页中的 MP3 文件：
 实例
 <embed height="50" width="100" src="horse.mp3">
 <img src="https://p3-sign.toutiaoimg.com/1116000345211cb81097~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728097373&x-signature=fhLBsMCPMA5f6YbNqLMf3PrbSUQ%3D" style="width: 50%; margin-bottom: 20px;">
 问题:
 <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>
 <img src="https://p3-sign.toutiaoimg.com/119a00030bcaf22e2a81~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728097373&x-signature=i0ZNOkJCnCn9Rrn1EgzgtF%2BGtPw%3D" style="width: 50%; margin-bottom: 20px;">
 问题:
 <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 新标签
 <div style="color: black; text-align: left; margin-bottom: 10px;">
 <div style="color: black; text-align: left; margin-bottom: 10px;">标签描述<embed>定义内嵌对象。HTML4 中不赞成，HTML5 中准许。<object>定义内嵌对象。<param>定义对象的参数。<audio>New定义了声音内容<video>New定义一个视频或影片<source>New定义了media元素的多媒介资源(<video> 和 <audio>)<track>New规定media元素的字幕文件或其他包括文本的文件 (<video> 和<audio>)</div>
 </div>
 如您还有不明白的能够在下面与我留言或是与我探讨QQ群308855039，咱们一块飞！
</div>

b1gc8v 发表于 2024-10-29 05:42:58

网站建设seio论坛http://www.fok120.com/

页: [1]

天涯论坛's Archiver

HTML 音频(Audio)