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. ie下li标签中span加float:right不换行问题解决方案

    在IE6,IE7下使用标签时,在加入右浮动样式(float:right)后,会换行的bug解决方案:bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行 <ul> <li> ...

  2. Ubuntu 16.04下使用Wine安装Xshell 4和Xftp 4

    说明: 1.使用的Wine版本是深度出品(Deepin),已经精简了很多没用的配置,使启动能非常快,占用资源小. 2.由于Xshell 5的C++库无法在这个Wine版本运行,即使升级官方原版的2+版 ...

  3. MAC终端命令行整理

    参考:http://www.jianshu.com/p/3291de46f3ff 目录操作 命令名 说明 举例 cd 切换到指定目录 cd test ls 查看这个目录下的所有文件 ls /Users ...

  4. OpenLayers3 动画

    参考文章 openlayers3中三种动画实现

  5. KVC技巧二则

    说两个与KVC相关的技巧. 1.KVC与字典 有时候我们需要取出嵌套字典中的某个键的值.例如某个嵌套字典: NSDictionary *dict = @{@"subDict":@{ ...

  6. C#中二进制，八进制，十六进制到十进制的相互转换

    1.十进制数字向二进制,八进制,十六进制字符串的转换,使用函数 Convert.ToString(int value, int toBase): 它可以把一个数字转换为不同进制数值的字符串格式,其中t ...

  7. Office 顿号怎么输

    中文状态下回车上面一个按键就是  

  8. POJ 3978（求素数）

    知识点:      1.求素数的test,从2~sqrt(n):           2.假设数据非常多,能够用素数表记录,然后sum=prime[m]-prime[n]求得! ! !! !!! !! ...

  9. 使用match、test控制输入字符格式后键盘向左向右键光标自动定位解决

    直接举例说明(正则表达式替换红色区域即可) /** * 判断是否位数字 * @param obj 数字 */ function numOnly(obj) { if(!(/^\d*$/.test(obj ...

  10. node.js如何读取MySQL数据

    先安装mysql模块. node.js默认安装时,模块文件放在 /usr/local/lib/node_modules 这个目录下,为了便宜管理,模块还是统一安装到这里好. $ cd /usr/loc ...