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. Maven添加坐标（依赖）及在Eclipse中的操作

    例如:添加一个spring-test.jar的依赖过程,普遍的做法就是直接操作pom.xml文件. 1.打开maven的中央仓库:http://search.maven.org/ 2.搜索仓库: 进入 ...

  2. 全面解读java虚拟机（面试考点大全）d

    学习java以来,jvm的原理已经看过好多遍了,可是很多知识点都串不起来. 今天我把jvm相关知识整理了一下,看完之后肯定会对JVM很的清楚. JVM是虚拟机,也是一种规范,他遵循着冯·诺依曼体系结构 ...

  3. TDDL-剖析淘宝TDDL

    TDDL-剖析淘宝TDDL 学习了:https://blog.csdn.net/sumj7011/article/details/78286741 Taobao Distribute Data Lay ...

  4. IOS 开发推荐经常使用lib

    1. Mantle Mantle 让我们能简化 Cocoa 和 Cocoa Touch 应用的 model 层.简单点说.程序中常常要进行网络请求,请求到得通常是 json 字符串.我们通常会建一个 ...

  5. vue2.0 自定义 提示框（Toast）组件

    1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...

  6. was系统错误日志大量出现标识符缺失

    原创作品.出自 "深蓝的blog" 博客,深蓝的blog:http://blog.csdn.net/huangyanlong/article/details/46909941 近日 ...

  7. hadoop集群搭建datenode为0问题的解决

       搭建了一个小的实验集群,一共4台机器,一台namenode,三台datenode.运行start-all,发如今namenode上没有报不论什么错误,可是启动后直接显示datenode数量为0. ...

  8. 在fedora25x86下编译opencv的Android版本的过程记录

    准备材料: 1. 32位的Fedora25(不建议使用64位系统----64位系统下也是可以编译的,这里为了简单起见,考虑使用32位操作系统.事实上,本人在64位操作系统下也做了尝试,也完成了编译.) ...

  9. On ROWNUM and Limiting Results

    This issue's Ask Tom column is a little different from the typical column. I receive many questions ...

  10. 怎么理解RSA算法

    原文地址:http://www.ittenyear.com/414/rsa/ 怎么理解RSA算法 能够把非对称加密算法里的公钥想象成一个带锁的箱子,把私钥想象成一把钥匙 能够把对称加密算法里的密钥想象 ...