`
zhongming_software
  • 浏览: 7415 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

HTML5(三).音频audio标签详解

 
阅读更多
Web 上的音频

直到现在,仍然不存在一项旨在网页上播放音频的标准。

今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

audio 元素能够播放声音文件或者音频流。

音频格式

当前,audio 元素支持三种音频格式:



如何工作

如需在 HTML5 中播放音频,您所有需要的是:

引用

<audio src="song.ogg" controls="controls">
</audio>


control 属性供添加播放、暂停和音量控件。

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的:

引用

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>


上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。

要确保适用于 Safari 浏览器,音频文件必须是 MP3 或 Wav 类型。

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:
实例

引用

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>


Internet Explorer

Internet Explorer 8 不支持 audio 元素。在 IE 9 中,将提供对 audio 元素的支持。

<audio> 标签的属性


引用:http://www.3wschool.com.cn/
  • 大小: 13.3 KB
  • 大小: 25.1 KB
  • 大小: 38.1 KB
分享到:
评论

相关推荐

    HTML5中的audio标签概述案例.pdf

    《HTML5中的audio标签详解及案例分析》 HTML5作为现代网页开发的重要标准,极大地丰富了网页的多媒体体验。其中,`&lt;audio&gt;`标签是HTML5引入的一个核心特性,用于在网页中嵌入音频内容,使得开发者能够轻松地实现...

    web前端工程-html5详解.docx

    三、 HTML5 的多媒体标签 HTML5 中的多媒体标签主要包括以下几个: 1. 视频标签 &lt;video&gt;:用于播放视频内容。 2. 音频标签 &lt;audio&gt;:用于播放音频内容。 3. 图像标签 &lt;img&gt;:用于显示图像内容。 四、 HTML5 的...

    audio.js插件

    2. **创建音频元素**:在HTML中创建`&lt;audio&gt;`标签,并设置必要的属性,如`src`(音频源)和`id`(用于JS操作)。 ```html &lt;audio id="myAudio" src="path/to/your/audio.mp3"&gt;&lt;/audio&gt; ``` 3. **初始化audio.js**:...

    Html5新增元素详解.pptx

    * audio 元素:用于添加音频内容。 * canvas 元素:用于创建动态图形。 * svg 元素:用于创建矢量图形。 Html5 中废除的元素包括: * big 元素:用于表示大号字体。 * center 元素:用于水平居中。 * font 元素:...

    H5新属性audio音频和video视频的控制详解(推荐)

    HTML5为网页提供了内置的音频和视频播放能力,无需依赖于Flash或Java Applets插件,使得在网页上嵌入多媒体内容变得轻而易举。本文详细介绍了如何利用H5中的audio和video标签实现对音视频文件的控制,并提供了一些与...

    HTML5开发精要与实例详解 pdf

    &lt;audio&gt;和标签让开发者可以直接在网页中嵌入音频和视频,不再依赖Flash等第三方插件。配合标签,HTML5可以实现动态图形绘制,为游戏和数据可视化提供了便利。 此外,HTML5的离线存储特性,如Application Cache和...

    前端项目-audio5js.zip

    《音频播放兼容性解决方案——audio5js前端项目详解》 在现代网页开发中,音频元素是不可或缺的一部分,HTML5的&lt;audio&gt;标签为开发者提供了原生的音频播放支持。然而,由于浏览器之间的差异,实现跨平台、跨设备的...

    HTML 5和 HTML 4的区别点及标签用法

    ### HTML 5与HTML 4的区别点及标签用法详解 HTML 5作为新一代的超文本标记语言标准,相比其前代HTML 4,在语法、功能以及对多媒体的支持上进行了大幅改进,旨在提升网页的交互性和用户体验。以下将详细介绍HTML 5与...

    HTML5开发精要与实例详解

    4. 多媒体支持:内置音频&lt;audio&gt;和视频标签,无需插件即可播放多媒体内容,支持多种编码格式,如MP4、WebM和Ogg。 5. canvas画布:提供JavaScript API,可进行动态图形绘制,实现游戏、图表、动画等功能。 6. svg...

    js音频插件audio.js

    audio.js是一个JavaScript库,它扩展了HTML5的`&lt;audio&gt;`标签的功能,使得音频播放更加灵活和兼容,尤其适用于那些需要在任何浏览器环境中播放音频的场景。本文将深入探讨audio.js的核心特性、工作原理以及如何在实际...

    html5常用标签.txt

    ### HTML5常用标签详解 #### 一、文档结构标签 **`&lt;!DOCTYPE&gt;`**: 定义文档类型。在HTML5中通常使用`&lt;!DOCTYPE html&gt;`来声明文档为HTML5。 **`&lt;html&gt;`**: 根标签,所有其他标签均位于此标签内部。它将文档分为...

    html5 实例详解

    8. **Audio/Video多媒体支持**:&lt;audio&gt;和元素使得在网页中直接嵌入音频和视频变得简单,无需依赖Flash等外部插件。 9. **Geolocation地理位置**:通过Geolocation API,网站可以获取用户的地理位置信息,为地图...

    HTML5标签速查表.pdf

    ### HTML5标签速查表详解 #### 一、基础标签 **1.1 文档类型声明** **标签**: `&lt;!DOCTYPE&gt;` **描述**: 定义文档类型为HTML5,通常位于文档的第一行。 **1.2 HTML文档定义** **标签**: `&lt;html&gt;` **描述**: ...

    HTML5详解 Html5实战

    HTML5的媒体元素`&lt;audio&gt;`和`&lt;video&gt;`使得在网页中内嵌音频和视频变得简单,无需依赖Flash等第三方插件。它们支持多种格式,如MP4、WebM和Ogg,且提供了APIs进行播放、暂停、音量控制等操作。 表单控件在HTML5中也...

    Apress.Pro.HTML5.Programming.Aug.2010.pdf

    - **视频与音频**:原生支持`&lt;video&gt;`和`&lt;audio&gt;`标签,无需第三方插件即可实现多媒体内容的播放。 - **跨平台兼容性**:提高用户体验,降低开发复杂度。 **4. 绘图与动画** - **Canvas**:提供了基于JavaScript的...

    《HTML 5开发精要与实例详解》.(陆凌牛).[PDF]

    - **`&lt;audio&gt;` 标签**:用于在网页中嵌入音频文件,支持多种格式如MP3、OGG等。 - **`&lt;video&gt;` 标签**:用于在网页中嵌入视频文件,同样支持多种格式如MP4、WEBM等。 这两种标签使得开发人员无需依赖Flash等插件...

    HTML5入门教程.pdf

    - **浏览器兼容性**:类似视频标签,为了确保不同浏览器间的兼容性,可以在`&lt;audio&gt;`标签内使用多个`&lt;source&gt;`标签,链接不同格式的音频文件。 #### 六、HTML5的其他特性 - **地理定位**:允许网站获取用户的地理...

    HTML5 embed标签定义和用法详解

    HTML5的`&lt;embed&gt;`标签是用来插入外部内容的,如多媒体插件,如Flash、PDF、音频或视频等。这个标签允许网页开发者将各种不同类型的媒体整合到他们的页面中,提供丰富的用户体验。在HTML4.01标准中,`&lt;embed&gt;`标签并...

    HTML5开发精要与实例详解代码清单

    1. 新元素:HTML5引入了语义化标签,如、、、等,使网页结构更清晰,有利于搜索引擎优化(SEO)和无障碍访问。 2. 表单控制:新增了、等表单控件,提供了更好的用户体验和数据验证功能。 3. 媒体元素:&lt;audio&gt;和元素...

Global site tag (gtag.js) - Google Analytics