牛骨文教育服务平台(让学习变的简单)
HTML 教程
HTML 简介
HTML 编辑器
HTML 元素
HTML 属性
HTML 标题
HTML 段落
HTML 文本格式化
HTML 链接
HTML 头部
HTML CSS
HTML 图像
HTML 表格
HTML 列表
HTML 区块
HTML 布局
HTML 表单
HTML 框架
HTML 颜色
HTML 颜色名
HTML 颜色值
HTML 脚本
HTML 字符实体
HTML URL
HTML 速查列表
HTML 总结
HTML - XHTML
HTML 多媒体
HTML 插件
HTML 音频(Audio)
HTML 视频（Videos）
<!--...-->
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<head>
<header>
<hgroup>
<h1> - <h6>
<hr>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<keygen>
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<html>
<progress>
<q>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<track>
<tt>
<u>
<ul>
<video>
<wbr>
当前位置:牛骨文教育服务平台 》开发手册 》 Web前端开发 》 html 》 HTML 音频(Audio)

HTML 音频(Audio)


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

问题以及解决方法

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

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

在本章，W3CSchool 为您总结了问题和解决方法。

使用插件

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

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

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

使用 元素

标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。

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

实例



 
 
牛骨文（niuguwen.cn） 

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

或者你没有打开扬声器。


运行实例 »

点击 "运行实例" 按钮查看在线实例

问题:

使用 元素

标签也可以定义外部（非 HTML）内容的容器。

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

实例



 
 
牛骨文（niuguwen.cn） 

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

或者你没有打开扬声器。


运行实例 »

点击 "运行实例" 按钮查看在线实例

问题:

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

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

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

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

使用 HTML5

HTML5

The

以下我们将使用

实例



 
 
牛骨文（niuguwen.cn） 




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

运行实例 »

点击 "运行实例" 按钮查看在线实例

问题:

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

最好的 HTML 解决方法

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

实例



 
 
牛骨文（niuguwen.cn） 




  
  
  

运行实例 »

点击 "运行实例" 按钮查看在线实例

问题:

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

  • 元素无法回退来显示错误消息。

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

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

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

实例



 
 
牛骨文（niuguwen.cn） 




Play mp3


Play wav

运行实例 »

点击 "运行实例" 按钮查看在线实例

如果你要使用它，您需要把这段 JavaScript 插入网页底部：

然后只需简单地把 MP3 文件链接到您的 HTML 中，JavaScript 会自动地为每首歌创建播放按钮：

Play Song 1
Play Song 2
...
...

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

请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。

使用超链接

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

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

实例



 
 
牛骨文（niuguwen.cn） 




Linking To a Song



点击此处播放

运行实例 »

点击 "运行实例" 按钮查看在线实例

内联的声音说明

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

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

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

HTML 多媒体标签

 

标签描述
定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
定义内嵌对象。
定义对象的参数。
定义了声音内容
定义一个视频或者影片
定义了media元素的多媒体资源(
规定media元素的字幕文件或其他包含文本的文件 (
copyright © 2008-2019 亿联网络 版权所有 备案号：粤ICP备14031511号-2