当前位置 : IT培训网 > Web前端 > Web教程 > 如何在HTML中植入音频(Audio)

如何在HTML中植入音频(Audio)

时间:2016-12-13 15:36:35  来源:web前端培训网  作者:IT培训网  已有:名学员访问该课程
标签(Tag):   html(100)音频(4)
在 HTML 中播放音频并不容易!您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。

如何在网页中播放音频呢,制作网页音频特效需要哪些代码呢,在生活中最常见的就是听歌了,一般都是在网页中找到这些歌曲,至于如何将歌曲植入网页的可能都不知道吧,今天我们就来学习下这方面的知识,希望可以帮助大家提高认知!

HTML 音频(Audio)

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

HTML 多媒体标签

New : HTML5 新标签

标签

描述

<embed>

定义内嵌对象。HTML4 中不赞成,HTML5 中允许。

<object>

定义内嵌对象。

<param>

定义对象的参数。

<audio>New

定义了声音内容

<video>New

定义一个视频或者影片

<source>New

定义了media元素的多媒体资源(<video> 和 <audio>)

<track>New

规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)

问题以及解决方法

在 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="chhch20161213001.mp3">

源代码:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.cnitedu.cn)</title> 

</head>

<body>

 

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

<p>如果你无法听到该音频,那么可能你的电脑或浏览器不支持该文件格式。</p>

<p>或者你没有打开扬声器。</p>

 

</body>

</html>

运行结果:

 

点击试听

如果你无法听到该音频,那么可能你的电脑或浏览器不支持该文件格式。

或者你没有打开扬声器。

问题:

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

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

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

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

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

使用 <object> 元素

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

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

实例

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

源代码:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.cnitedu.cn)</title> 

</head>

<body>

 

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

<p>如果你无法听到该音频,那么可能你的电脑或浏览器不支持该文件格式。</p>

<p>或者你没有打开扬声器。</p>

 

</body>

</html>

运行结果:

点击试听

如果你无法听到该音频,那么可能你的电脑或浏览器不支持该文件格式。

或者你没有打开扬声器。

问题:

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

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

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

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

使用 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="chhch20161213001.mp3" type="audio/mpeg">

  <source src="chhch20161213001.ogg" type="audio/ogg">

  Your browser does not support this audio format.

</audio>

源代码:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.cnitedu.cn)</title> 

</head>

<body>

 

<audio controls>

  <source src="chhch20161213001.mp3" type="audio/mpeg">

  <source src="chhch20161213001.ogg" type="audio/ogg">

  您的浏览器不支持该音频格式。

</audio>

 

</body>

</html>

运行结果:

点击试听

问题:

<audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。

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

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

最好的 HTML 解决方法

下面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败,代码将回退尝试 <embed> 元素。

实例

<audio controls height="100" width="100">

  <source src="chhch20161213001.mp3" type="audio/mpeg">

  <source src="chhch20161213001.ogg" type="audio/ogg">

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

</audio>

源代码:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.cnitedu.cn)</title> 

</head>

<body>

 

<audio controls>

  <source src="chhch20161213001.mp3" type="audio/mpeg">

  <source src="chhch20161213001.ogg" type="audio/ogg">

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

</audio>

 

</body>

</html>

运行结果:

点击试听

问题:

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

<embed> 元素无法回退来显示错误消息。

雅虎媒体播放器 - 一个简单的添加音频到你网站上的方式

使用雅虎播放器是免费的。如需使用它,您需要把这段 JavaScript 插入网页底部:

雅虎播放器可以播放MP3以及其他各种格式。你只需添加一行代码到你的页面或 博客中就可以轻松地将您的HTML页面制作成 专业的播放列表:

实例

<a href="chhch20161213001.mp3">Play Sound</a>

<script src="http://mediaplayer.yahoo.com/latest"></script>

源代码:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.cnitedu.cn)</title> 

</head>

<body>

 

<p><a href="chhch20161213001.mp3">Play mp3</a></p>

<p><a href="chhch20161213002.wav">Play wav</a></p>

 

<script src="https://mediaplayer.yahoo.com/latest"></script>

 

</body>

</html>

运行结果:

Play mp3

Play wav

如果你要使用它,您需要把这段 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="chhch20161213001.mp3">Play the sound</a>

源代码:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.cnitedu.cn)</title> 

</head>

<body>

 

<h2>Linking To a Song</h2>

 

<p><a href="chhch20161213001.mp3">点击此处播放</a></p>

 

</body>

</html>

运行结果:

Linking To a Song

点击此处播放

内联的声音说明

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

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

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

随着互联网的发展,音频设备逐渐的提升,高品质的音响设备充斥着我们的生活,打开页面就可以听到无数首歌曲,如果你也想在网页音频中奉献自己的一份理想,那就赶紧行动吧!

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
------分隔线----------------------------
Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频(Videos)播放