Chinaunix首页 | 论坛 | 博客
  • 博客访问: 72582
  • 博文数量: 59
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 600
  • 用 户 组: 普通用户
  • 注册时间: 2016-08-22 10:54
文章分类
文章存档

2016年(59)

我的朋友

分类: Html/Css

2016-10-20 11:32:12

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(15)——HTML5中的音频

浏览器虽然发展很快,但是浏览器中的标准还是不完善,在HTML4+CSS2+JS的前段开发中让很多程序员头疼的就是浏览器的兼容性问题,音频播放也一样,直到现在,仍然不存在一项网页上播放视频和音频的标准。现在,在大多数浏览器中,音频是通过插件(比如:flash插件)来播放的。然而,不是所有浏览器都具有这样的插件,所以对音频的播放造成了一定的麻烦。在HTML5的新标准中规定了一种通过audio元素来包含音频的标准方法,下面我们就来详细的了解一下该标签。

一、对音频格式的支持

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

 

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis    
MP3    
Wav    

 

二、如何使用

 

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >   
  2. <html>   
  3.     <body>   
  4.         <audio src="" controls="controls">  
  5.         您的浏览器不支持该HTML5标签  
  6.         audio>  
  7.     body>   
  8. html>  

 

 

点击开始按钮,播放歌曲(用的是MP3格式,只适用于IE9以上及Chrome3.0以上浏览器)

 

 

control属性显示控制台

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

要运行其他浏览器也支持就要使用如下方式

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <audio controls="controls">  
  2.   <source src="song.ogg" type="audio/ogg">  
  3.   <source src="song.mp3" type="audio/mpeg">  
  4. Your browser does not support the audio tag.  
  5. audio>  

三、audio标签的属性

 

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的音频的 URL。
阅读(403) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~