html5--4-4 audio元素/格式的转换

学习要点

  • 掌握audio元素的用法
  • 视频/音频文件的格式转换

当前，audio 元素支持三种音频格式：

  • Ogg 免费, 支持的浏览器:Firefox、Opera、Chrome
  • MP3 收费, 支持的浏览器: IE9+、Chrome、Safari
  • Wav 收费, 支持的浏览器: Firefox、Chrome、Safari

audio元素的属性

属性 属性值 描述
src url 要播放的 音频的 URL地址。
controls 空值/controls 向用户显示控件，比如播放按钮
autoplay 空值/autoplay 音频在就绪后自动播放。一般不设置该属性。
loop 空值/loop 循环播放。
preload auto/none/metadata 音频在页面加载时是否进行加载，并预备播放。一般不需要设置，使用默认值即可。

实例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <audio src="res/琴箫合奏.mp3" controls=""></audio>

     <br><br>

     <audio controls="">

         <source src="res/琴箫合奏.mp3" type="audio/mp3"></source>

         <source src="res/琴箫合奏.ogg" type="audio/ogg"></source>

         你的浏览器版本太低，请更换浏览器！

     </audio>

 </body>

 </html>

html5--4-4 audio元素/格式的转换的更多相关文章

  1. 基于HTML5 audio元素播放声音jQuery小插件

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...

  2. HTML5 video 和 audio

    video 用于在HTML或者XHTML文档中嵌入视频内容 使用 video 元素至少要提供两种视频格式的文件:OGG 和 MP4 OGG:采用 Theora 视频格式和 Vorbis 音频解码器 ( ...

  3. video元素和audio元素

    内容: 1.video元素 2.audio元素 注:这两个元素均是HTML5新增的元素 1.video元素 (1)用途 <video> 标签定义视频,比如电影片段或其他视频流 (2)标签属 ...

  4. html5多媒体Video/Audio

    video:    1.常见的视频格式 视频的组成部分:画面.音频.编码格式 视频编码:H.264.theora.VP8(google开源)      2.常见的音频格式     编码:AAC.MP3 ...

  5. HTML5之新增的元素

    今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大 ...

  6. 【HTML5】Web Audio API打造超炫的音乐可视化效果

    HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我!  源码已经挂到github上了,有兴趣的同学也可以去st ...

  7. 【原】HTML5 新增的结构元素——能用并不代表对了

    做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...

  8. HTML5之新增的元素和废除的元素 （声明：内容节选自《HTML 5从入门到精通》）

    新增结构元素: section元素 section元素定义文档或应用程序中的一个区段,比如章节.页眉.页脚或文档中的其他部分.它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构. ...

  9. html5学习（新增元素）

    来源于<实战html5>contenteditable 规定是否可编辑元素的内容 css3圆角 border-radius旋转变换 transform:rotate(); 变换 trans ...

随机推荐

  1. 358. Rearrange String k Distance Apart

    /* * 358. Rearrange String k Distance Apart * 2016-7-14 by Mingyang */ public String rearrangeString ...

  2. Android onCreate 的savedInstanceState 作用

    在activity的生命周期中,只要离开了可见阶段,或者说失去了焦点,activity就很可能被进程终止了!,被KILL掉了,,这时候,就需要有种机制,能保存当时的状态,这就是savedInstanc ...

  3. openfire Android学习(五)------连接断开重连

    首先要创建连接监听器,用来监听连接状态,这里我写了一个类 继承了ConnectionListener,重写了里面5个方法,最重要的两个方法connectionClosed()和connectionCl ...

  4. 浮窗WindowManager view返回和Home按键事件监听

    出于功能需求,需要在所有的view之上显示浮窗,于是需要在WindowManager的View上处理返回键的响应, mFloatingWindowView = layoutInflater.infla ...

  5. ARP协议(1)什么是ARP协议

    这是最近在看<TCP/IP具体解释>系列书总结出来的,之后会陆续把其它协议部分分享出来. 我尽量以简单易读.易懂的方式呈现出来,可是,因为文笔和水平有限.有些地方或许存在描写叙述上的不足或 ...

  6. 【Sprint3冲刺之前】项目完成时间表

    Sprint2冲刺成果——项目完成时间表 项目完成时间表 经过Sprint2小组总结会议的探讨,我们决定一起约定项目alpha版本,beta版本,release版本的发布时间,发布形式及预计完成效果 ...

  7. Fighting regressions with git bisect---within git bisect algorithm

    https://www.kernel.org/pub/software/scm/git/docs/git-bisect-lk2009.html Fighting regressions with gi ...

  8. shell grep正则匹配汉字

    Shell grep正则匹配中文 测试文本 demo_exe.c,内容如下,需要注意保存的编码格式,对输出到终端有影响: 我们中文操作系统ASNI默认是GBK的. #include<stdio. ...

  9. redis文档翻译_LRU缓存

    Using Redis as an LRU cache使用Redis作为LRU缓存 出处:http://blog.csdn.net/column/details/redisbanli.html Whe ...

  10. iOS开发---- 开发错误汇总及解决方法

    本文转载至 http://blog.csdn.net/shenjx1225/article/details/8561695 一.今天调试程序的时候,出现了一个崩溃,信息如下: 2013-02-01 0 ...