您的位置:首页> 前端教程> HTML教程
文章导航

HTML 音频

2018-10-22 17:25| 作者: admin| 查看: 757| 评论: 0|来自: 蚂蚁部落

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

不过在网页上播放音频需要一定的格式,下面就对常用的方式做一下简单介绍。

一.使用插件:

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

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

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

二.使用<embed>元素:

<embed>标签定义外部(非HTML)内容的容器。

HTML5新增标签,在HTML4中是非法的,但是所有浏览器中都有效。

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<embed src="demo/html5/audio/horse.mp3">
<p>如果没有听到音频效果,可能是由于当前浏览器不支持。</p>
</body>
</html>

特别说明:

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

(2).不同的浏览器对音频格式的支持也不同。

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

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

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

二.使用<object>元素:

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

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<object data="demo/html5/audio/horse.mp3"></object>
<p>如果没有听到音频效果,可能是由于当前浏览器不支持。</p>
</body>
</html>

特别说明:

(1).不同的浏览器对音频格式的支持也不同。

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

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

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

三.使用HTML5<audio>元素:

<audio>是一个HTML5元素,在HTML 4中是非法的,在所有浏览器中都有效。

以下将使用<audio>标签来描述MP3文件, 同样添加了一个OGG类型文件(Firefox和Opera浏览器中有效)。

如果失败,它会显示一个错误文本信息:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<audio controls>
  <source src="demo/html5/audio/horse.mp3" type="audio/mpeg">
  <source src="demo/html5/audio/horse.ogg" type="audio/ogg">
  你的浏览器不支持
</audio>
</body>
</html>

四.最好的HTML解决方法:

下面的例子使用了两个不同的音频格式。

<audio>元素会尝试以mp3或ogg来播放音频。如果失败,代码将回退尝试<embed>元素。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<audio controls>
  <source src="demo/html5/audio/horse.mp3" type="audio/mpeg">
  <source src="demo/html5/audio/horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="demo/html5/audio/horse.mp3">
</audio>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部