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. Andriod PopupWindow 键盘冲突

    调起键盘的时候,弹出PopupWindow,但是键盘没有隐藏. private void init() { View contentView = LayoutInflater.from(mContex ...

  2. centos 升级内核失败回救

    在升级 centos6.3上使用, yum -y update  ... 灾难出现了!!! 解决方法: 1. 在机器启动的时候, 按F1, 会出现选择内核,选一个原来的. 2. vim /etc/gr ...

  3. 赵雅智_Fragment

    当我们须要动态的多界面切换的时候,就须要将UI元素和Activity融合成一个模块. 在2.3中我们一般通过各种Activity中进行跳转来实现多界面的跳转和单个界面动态改变.在4.0或以上系统中就能 ...

  4. C 标准库 - <locale.h>

    C 标准库 - <locale.h> 简介 locale.h 头文件定义了特定地域的设置,比如日期格式和货币符号.接下来我们将介绍一些宏,以及一个重要的结构 struct lconv 和两 ...

  5. HDOJ题目2089 不要62(数位DP)

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  6. ssm 网页

    http://stackoverflow.com/questions/14545872/bean-named-xxx-must-be-of-typexxx-but-was-actually-of-ty ...

  7. find and xargs

    调整搜索深度 -mandepth 搜索当前目录,而不进入子目录: find . -maxdepth 0 -name "debug*" Linux中find常见用法示例 ·find  ...

  8. [框架安装趟雷指南]Ubuntu+1060+cuda+cudnn+Keras+TH+TF+MXnet

    [框架安装趟雷指南]Ubuntu+1060+cuda+cudnn+Keras+TH+TF+MXnet https://zhuanlan.zhihu.com/p/23480983 天清 9 个月前 写这 ...

  9. 关于Yapi出现 请求异常，请检查 chrome network 错误信息...

    项目开发中由于后台接口还没有,打算使用mock模拟本地数据,配置好接口,运行接口出现 检查了cross-request插件是否安装以及激活,发现没有问题,最后发现是我的请求地址写错了,,这里请求地址需 ...

  10. java IO 框架图