<!--

    audio通过属性的设置可以控制音频播放的行为：

    表6-2 audio元素的属性

    ————————————————————————————————————————————————————————

    属性            值                 描述

    autoplay        autoplay          音频就绪后马上播放

    controls        controls          向用户显示控件，比如播放按钮

    loop            loop        　　　 音频播放结束后重新播放

    preload         preload           音频在页面加载并预备播放。如果使用“autoplay”，则忽略该属性

    src             url               要播放音频的url

    ————————————————————————————————————————————————————————

    表6-3 audio元素的方法

    ————————————————————————————————————————————————————————

    方法                        描述

    addTextTrack()              向音频添加新的文本轨道

    canPlayType()               检测浏览器是否能播放指定的音频类型

    load()                      重新加载音频元素

    play()                      开始播放音频

    pause()                     暂停当前播放的音频

    ————————————————————————————————————————————————————————

    表6-4 audio元素的常用事件

    ————————————————————————————————————————————————————————

    事件                        　　 描述

    canplay                     　　当前浏览器可以播放音频时

    pause                         　当音频已暂停时

    play                            当音频已开始或不再暂停时

    playing                         当音频在因缓冲而暂停或停止后就就绪时

    progress                        当浏览器正在下载音频时

    volumechange                    当音量已更改时

    timeupdate                      当前的播放位置已更改时

    ————————————————————————————————————————————————————————

    -->

    <!DOCTYPE html>

    <html>

    <head>

        <meta charset="utf-8">

        <title>audio</title>

    </head>

    <body>

        <br>

        <audio src="E:\MUSIC\Diplo - revolution.mp3" controls="controls" autoplay="autoplay">

            您的浏览器不支持audio标签

        </audio>

    </body>

    </html>

<!--

    另外，audio元素可以设置多个source元素。source元素可以连接不同的音频文件，浏览器将使用第一个可识别的格式

    <audio controls>

    <source src=".../a.mp3" type="audio/mpeg"></audio>

    <source src=".../b.mp3" type="audio/ogg"></audio>

-->

运行结果：

【HTML5】 web上的音频的更多相关文章

  1. html5页面怎么播放音频和视频

    html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...

  2. html5中audio支持音频格式

    HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持.不是所有的浏览器都支持MP ...

  3. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  4. HTML5学习总结-04 音频&视频播放

    一 音频播放 1 Audio(音频) HTML5提供了播放音频文件的标准 2 control(控制器) control属性攻添加播放,暂停和音量空间. 3 标签定义声音 <audio> 例 ...

  5. 网页上播放音频、视频Mp3，Mp4

    昨天在处理网页上播放音频mp3,视频mp4上用了一天的时间来比较各种方案,最终还是选择了HTML5的 标签,谷歌浏览器.IE浏览器对标签的支持都很好,火狐上需要安装quicktime插件,效果比较差. ...

  6. JavaScript多线程之HTML5 Web Worker

    在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...

  7. HTML5的视频和音频

    1.HTML5视频 HTML5 规定了一种通过 video 元素来包含视频的标准方法. <!DOCTYPE html> <html> <head> <meta ...

  8. 深入HTML5 Web Worker应用实践：多线程编程

    HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...

  9. 四种途径将HTML5 web应用变成android应用

    作为下一代的网页语言,HTML5拥有很多让人期待已久的新特性.HTML5的优势之一在于能够实现跨平台游戏编码移植,现在已经有很多公司在移动 设备上使用HTML5技术.随着HTML5跨平台支持的不断增强 ...

随机推荐

  1. ThinkPhp 3.2 数据的连贯操作

    ThinkPHP模型基础类提供的连贯操作方法(也有些框架称之为链式操作),可以有效的提高数据存取的代码清晰度和开发效率,并且支持所有的CURD操作. 使用也比较简单, 假如我们现在要查询一个User表 ...

  2. 逆向工程学习第二天--动手开发自己的第一个shellcode

    一个简单的c语言添加windows管理员账号的小程序,之前在渗透的时候经常用到,现在拿它来做自己的第一个shellcode. C代码: #pragma comment(lib, "netap ...

  3. Struts2 更改校验配置文件位置

    @(Java)[Struts|Interceptor] Struts2 更改校验配置文件位置 在Struts2中提供的拦截器校验ValidationInterceptor,该校验器中默认的配置文件位于 ...

  4. Android中Service通信(二)——绑定Service进行通信

    一.把输入文本的数据同步到服务的实例(如何执行服务的内部代码) 绑定服务比启动服务更加方便高效,绑定服务中的直接方法调用比Intent作为载体传输更为快捷得多. 1.activity_main.xml ...

  5. 1.1、MyEclipse自定义注释

    一.修改进入路径: Window->Preference->Java->Code Style->Code Template->Comments 二:编辑自定义注释 文件  ...

  6. DNA解链统计物理

    来源:Kerson Huang, Lectures on Statistical Physics and Protein Folding, pp 24-25 把双链DNA解开就像拉拉链.设DNA有\( ...

  7. PJAX的实现与应用

    一.前言 web发展经历了一个漫长的周期,最开始很多人认为Javascript这们语言是前端开发的累赘,是个鸡肋,那个时候人们还享受着从一个a链接蹦 到另一个页面的web神奇魔术.后来随着JavaSc ...

  8. Linux各个目录的作用及内容

    1)根目录“/”    根目录位于目录结构的最顶层,用斜线(/)表示,类似于Windows操作系统的“C:\“,包含Fedora操作系统中所有的目录和文件. 2)/bin    /bin 目录又称为二 ...

  9. QuartusII Design partion and logic lock

    Design partion Design partion常用于“增益变量(QIC)”,通过Design Partition对子模块进行“逻辑分区”,在Design Partition Window中 ...

  10. react+redux官方实例TODO从最简单的入门（4）-- 改

    上一篇文章实现了<删>这个功能,那么我们继续添加下一功能--<改> 这个修改的功能是通过双击每个子选项实现 第一步:按规矩来,添加一个状态声明 第二步:action中约定我们要 ...