小白学习的Web教程:HTML 音频(Audio)

开课吧开课吧锤锤2021-04-12 10:39

    网络前端高薪的诱惑,学习门槛低,不管是学生党还是工作者,都渴望凭借自己的能力,空闲的时间,去学前端。也许是一种爱好,也许是一种想从事的工作。但它真的那么简单吗?现在,初级前端的工作,已接近饱和,并处于供过于求的状态,企业更需要的是具备扎实的基础,至少具备后端技能的前端开发工程师。已不像之前所说的美工,美工了。在许多大企业中,前端开发岗位是独立的,需要专业技能。

web

    HTML音频(Audio)

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

    问题以及解决方法

    在HTML中播放音频并不容易!

    您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中(InternetExplorer,Chrome,Firefox,Safari,Opera)和所有硬件上(PC,Mac,iPad,iPhone)都能够播放。

    使用插件

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

    插件可以使用<object>标签或者<embed>标签添加在页面上.

    这些标签定义资源(通常非HTML资源)的容器,根据类型,它们即会由浏览器显示,也会由外部插件显示。

    使用<embed>元素

    <embed>标签定义外部(非HTML)内容的容器。(这是一个HTML5标签,在HTML4中是非法的,但是所有浏览器中都有效)。

    下面的代码片段能够显示嵌入网页中的MP3文件:

<embed height="50" width="100" src="horse.mp3">

    问题:

    <embed>标签在HTML4中是无效的。页面无法通过HTML4验证。

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

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

    如果用户的计算机未安装插件,无法播放音频。

    如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。

    使用<object>元素

    <objecttag>标签也可以定义外部(非HTML)内容的容器。

    下面的代码片段能够显示嵌入网页中的MP3文件:

<object height="50" width="100" data="horse.mp3"></object>

    问题:

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

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

    如果用户的计算机未安装插件,无法播放音频。

    如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。

    使用HTML5元素

    HTML5元素是一个HTML5元素,在HTML4中是非法的,但在所有浏览器中都有效。

    Theelementworksinallmodernbrowsers.

    浏览器兼容

    格中的数字表示支持该属性的第一个浏览器版本号。

web

    以下我们将使用标签来描述MP3文件(InternetExplorer、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>

    问题:

    标签在HTML4中是无效的。您的页面无法通过HTML4验证。

    您必须把音频文件转换为不同的格式。

    元素在老式浏览器中不起作用。

    最好的HTML解决方法

    下面的例子使用了两个不同的音频格式。HTML5元素会尝试以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>元素无法回退来显示错误消息。

    使用超链接

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

    以下代码片段显示指向mp3文件的链接。如果用户点击该链接,浏览器会启动"辅助应用程序"来播放该文件:

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

    内联的声音说明

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

    如果您打算在web应用程序中使用内联声音,您需要意识到很多人都觉得内联声音令人恼火。同时请注意,用户可能已经关闭了浏览器中的内联声音选项。

    我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是,在用户需要听到录音并点击某个链接时,会打开页面然后播放录音。

    前端学习永远不会是单枪匹马,需要前人的引领,也需要平台的不断交流与思想碰撞。这能够快速入门,减少走弯路,还能让自己找到问题的根源。更多的Web教程尽在开课吧广场Web教程频道。

有用
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
云开发实战特训营