zoukankan      html  css  js  c++  java
  • 小强的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    

    二、如何使用

    <!DOCTYPE html> 
    <html> 
    	<body> 
    		<audio src="http://www2.shengda.edu.cn/ytw/gbzx/photo/bgmusic.mp3" controls="controls">
    		您的浏览器不支持该HTML5标签
    		</audio>
    	</body> 
    </html>

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

    control属性显示控制台

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

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

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

    三、audio标签的属性

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

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

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

    src url 要播放的音频的 URL。


    Java学习交流群142979499 JAVA技术交流群
    Android学习交流群311273384 android学习交流群

  • 相关阅读:
    CSS常用记录
    CSS字体图标使用方式
    CSS之多个div一行排列
    Mysql MVCC原理和幻读解决
    第8章 管理还原数据
    第20章 数据的移动
    oracle恢复删除的数据
    第11章 索引的管理与维护
    第10章 管理表
    第19章 归档模式下的数据库恢复
  • 原文地址:https://www.cnblogs.com/lanzhi/p/6469323.html
Copyright © 2011-2022 走看看