<rp id="9thzz"><acronym id="9thzz"></acronym></rp>
    1. <dd id="9thzz"></dd>
    2. 首页 > 网页教程 > HTML > HTML5的Audio标签使用详解

      HTML5的Audio标签使用详解

      时间:2013-06-24    来源:IT路人

      世界上公认的第一个网页是诞生于1992年,发展至今,网页已经有21年历史了。在这21年里面,网页开发的标准从没有完全统一过。而我们经常见到的web音频就是这么样子的。现在,大部分的网页音频播放依靠着flash,但是显然地,flash已经越来越不适用于web开发。所以呢,苹果放弃了flash,而Android也宣布不再支持flash。主要原因就是HTML5的诞生,为web开发提供了更加便捷、高效的音频应用。那么,在网页中HTML5音频或者说HTML5播放器是怎么应用的呢。

      HTML5 audio

      在HTML5标准网页里面,我们可以运用audio标签来完成我们对声音的调用及播放。以下是最经常见到的运用HTML5三种基本格式:

      1.最少的代码

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

      2.带有不兼容提醒的代码

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

      3.尽量兼容浏览器的写法

      <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>
      

      HTML5音频格式

      当前,HTML5 Audio标签支持三种格式的音频,分别是wav mp3和ogg格式。而目前主流浏览器对他们的支持如下:

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

      IE8以及IE8以下不支持HTML5的audio标签

      HTML 5 Audio属性

      1. autoplay:唯一可选值为autoplay,出现autoplay属性并准确赋值时,音频将会自动播放
      2. controls:唯一可选值为controls,出现controls属性并准确赋值时,音频播放控件将会显示,控件包括:播放、暂停、定位、音量、全屏切换、字幕(如果可用)、音轨(如果可用)。
      3. loop:唯一可选值为loop,出现loop属性并准确赋值时,音频将会循环播放。
      4. preload:可选值有auto(当页面加载后载入整个音频)、meta(当页面加载后只载入元数据)和none(当页面加载后不载入音频) 如果设置了前面的autoplay属性,那么preload将会被忽略。
      5. src:指定音频URL地址,可以是相对的URL也可以是绝对的URL 当然还可以像第2和第3个例子一样,用source标签来指定源。
      相关推荐
      能让IE支持HTML5的解决方案
      谷歌弃Gears浏览器插件 转重点开发HTML5
      采用HTML5搭建的多个网站尝鲜试用
      体验HTML5 Canvas对象的强大 五款在线绘图应用示例
      HTML5新特性:用链接预取功能给网站提速
      如何用HTML5制作网页?
      神奇的HTML5动画效果演示网站
      网页设计师必收藏的十五个HTML5资源
      十三个网站案例让你提前体验HTML5和CSS3的魅力
      基于HTML5的绘图程序Muro,支持Wacom手写绘图板
      HTML5的一些的趣味小应用
      HTML5、CSS和JavaScript与Web移动应用的未来趋势
      十款基于HTML5开发的精彩WEB应用(HTML5网站演示)
      学好HTML5必备的七个在线资源推荐
      HTML5教程之表单功能详解
      四个HTML 5标签、属性、事件及浏览器兼容性速查表分享
      15个采用HTML5实现的网站界面设计欣赏
      HTML5的革新:语义更明确简洁的结构
      21款效果惊艳基于HTML5的应用程序欣赏
      16个颇具创意的HTML5网站设计
      能让IE浏览器也支持HTML5标准的办法
      25个超炫的HTML5+CSS3网页应用案例欣赏
      2012年Web开发有关HTML5的14个预测
      新手入门:HTML5是什么?
      35个WEB开发必备的实用HTML5教程
      18个国外HTML5网站布局编码教程分享
      10款HTML5框架推荐,WEB开发必备利器
      8款很酷基于HTML5技术的网站设计欣赏
      详解有关于HTML5的七个误解
      10个超炫酷的HTML5和JS技术实验性演示网站
      8个优秀的基于HTML5的信息图网站欣赏
      网页使用HTML5代码需兼容IE的写法分享
      HTML5新手入门教程之第一篇:什么是HTML5?
      从9个不同的方面深入分析HTML5的性能
      Google推荐:HTML5代码的15条规范
      HTML5能否成为未来移动互联网的APP?

      精彩推荐

      热门教程

      99热 久久99热视频只有精品 玖玖热爱视频精品 99热这里只有精品 久久re热这里只是精品