掌握HTML5中的多媒体--音频(audio)

使用音频标签<audio>

音频标签的使用和视频是非常相似的:指定多个音频文件,浏览器会播放其中支持的第一个。

1.       <audio src="audio.ogg" controls>

2.       你的浏览器不支持<audio>标签.

3.      
</audio>

 

Figure 5列出了所有<audio>可用的属性. 因为不需要像视频播放器那样显示整个控件,所以高、低和预览图(poster)都不再需要了。

Figure 5
音频标签<audio>的属性


Attribute


Value


Description


 Autoplay


autoplay


如果指定, 音频会在准备好后立即播放.


 Controls


controls


显示播放控制工具栏..


 Loop


loop


如果指定,则循环播放.


 Preload


preload


如果指定,音频会在加页面加载过程中被加载。当Autoplay被指定时,会被忽略。


 Src


url


目标音频的URL.

 

和视频<video>标签一样,你可以指定多个文件,浏览器会播放其中支持的第一个文件。你也可以指定一个回退(fallback)信息以供浏览器不支持<audio>标签时显示。下面是一个简单的例子:

1.       <audio controls autoplay>

2.          <source src="audio1.ogg" type="audio/ogg" />

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

4.           你的浏览器不支持<audio>标签.

5.      
</audio>

 

总结

当前在HTML5多媒体方面最大的问题是你必须为不同的浏览器提供不同格式的文件,不过它的应用也是大势所趋。以下是一些很棒的参考内容:

参考:掌握HTML5中的多媒体--视频(video)

原文地址:Working with Media in HTML5

作者:Jason Beres

转载请注明出处:http://blog.csdn.net/horkychen

时间: 2024-11-01 14:23:05

掌握HTML5中的多媒体--音频(audio)的相关文章

HTML5使用JavaScript控制<audio&gt;音频的播放

1,下面是一个播放音乐的最简单样例 (controls属性告诉浏览器要有基本播放控件)原文:HTML5 - 使用<audio>播放音频 <audio src="hangge.mp3" controls></audio> 2,预加载媒体文件 设置preload不同的属性值,可以告诉浏览器应该怎样加载一个媒体文件:(1)值为auto:让浏览器自动下载整个文件(2)值为none:让浏览器不必预先下载文件(3)值为metadata:让浏览器先获取音频文件开头

《HTML5移动应用开发入门经典》—— 2.1 HTML5中的新标签

2.1 HTML5中的新标签 HTML5移动应用开发入门经典 HTML5为HTML规范加入了一些新的特性,其中最容易理解的就是新的标签.它们过去从未成为HTML的一部分,但现在却是HTML元素了. 2.1.1 新布局标签 大部分新标签被称为"分节"元素,它们为HTML文档的布局及分段提供语义.第9章将更详细地介绍这些标签. 新布局标签如下所示. --文档或站点的一个独立部分. --页面或站点主题之外的内容. --figure元素的标题. --独立于文本流之外的一段流内容(如图形.图表等

html5中source标签的学习

source标签在html5中的作用是定义媒介源,比如<video>和<audio>定义媒介资源.这最新的HTML5标签是用来允许你指定视频和音频的文件. 示例代码: <video controls> <source="video.WMV" type="video/WMV" /> <!-MP4 for Mozilla Firefox --> <source="video.ogg"

IE9对HTML5中部分属性不支持的原因分析

  具体方法如下: 众所周知,在IE9中对于HTML5标准中的离线应用程序以及CSS3中的一部分不提供支持.本文对此做一简要分析. 微软日前已经发布了Internet Explorer 9(以下简称IE9)正式版.在该版本中,微软遵循他们的发展战略,对于作为最新Web标准的HTML5与CSS3中大多数功能提供了支持. 同时,微软也准备将IE9应用在Windows Phone 7中使用.IE9无疑成为了微软的Internet战略中非常重要的一个环节. 但是,现在公布的IE9中,应该被用来与Fire

HTML5中的标签属性简介

HTML 5 通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精确规则,HTML 5 改进了互操作性,并减少了开发成本. HTML 5 中的新特性包括了嵌入音频.视频和图形的功能,客户端数据存储,以及交互式文档. HTML 5 还包含了新的元素,比如:<nav>, <header>, <footer> 以及 <figure> 等等. HTML 5 工作组包括:AOL, Apple, Google, IBM, Microsoft, Mozilla,

html5视频video与声频audio详解

html5视频video与声频audio详解      在html5中出现了一些新特性: canvas 元素 视频 video 和 声频audio 元素 : 对本地离线存储(localstorage,sessionstorage)的支持 : 新增特殊内容元素:article.footer.header.nav.section : 新增表单控件: calendar.date.time.email.url.search .     今天看看视频和声频:在html5中规定了视频的标准方法:video

《HTML5开发手册》——第1章 HTML5中新的结构元素 第1章 HTML5中新的结构元素

第1章 HTML5中新的结构元素 HTML5并不是一种具有JavaScript API和酷炫视频的交互式巫术.它有20多个新的元素,可以用来开发Web页面.添加语义以交付容易访问的可重用内容. 在后面章节,我们将学习新的HTML5表单控件和多媒体元素.本章主要讲解新的结构元素,如header.hgroup.nav.footer.article.section和aside.你将知道何时以及如何单独或组合使用这些新元素.实际上,你还将学会利用这些新元素创建一个基本的网站模板,如图1.1所示. 1.1

libmad-提取mp3中真正的音频数据

问题描述 提取mp3中真正的音频数据 用libmad解码,运行./minimad 输出乱码显示decoding error 0x0101(lost synchronization)然后安装了zlib和libid3tag ,这时应该这样修改minimad.c把后面加装的两个库加进去.目地是想获得音频数据(如果数据是十进制或十六进制的更好),最终目地是通过音频数据控制灯光的闪烁(像舞台灯光). 解决方案 内维尔戈达德.最好的内维尔戈达德音频MP3电子书.ffmpeg提取音频.转换为mp3

HTML5中的Range对象的研究

一:Range对象的概念  Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下:       var  range = document.createRange(); 在html5中,每一个浏览器窗口及每一个窗口中都有一个selection对象,代表用户鼠标在页面中所选取的区域,(注意:经过测试IE9以下的浏览器不支持Selection对象), 可以通过如下语句创建selection对象:    var  se