一、Audio标签

Web 上的音频

直到现在,仍然不存在一项旨在网页上播放音频的标准。

今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

audio 元素能够播放声音文件或者音频流。

二、音频格式

当前,audio 元素支持三种音频格式:

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis    
MP3    
Wav    

三、使用

<audio src="test.mp3" autoplay="autoplay" controls="controls" id="audio1" loop="loop">
您的浏览器不支持音频标签
</audio>

四、<audio> 标签的属性

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的音频的 URL。

HTML5--Audio的更多相关文章

  1. Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!

    继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...

  2. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  3. 开大你的音响,感受HTML5 Audio API带来的视听盛宴

    话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等 ...

  4. HTML5 Audio and Video 的新属性简介

    前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio a ...

  5. HTML5 Audio and JavaScript Control

    IE8 以下无效 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=u ...

  6. [jPlayer] HTML5 Audio & Video for jQuery

    ---------------------------------------------------------------------------------------------------- ...

  7. html5 audio音频播放全解析

    序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...

  8. Html5 audio stop

    //html5 stop audio play function stopPlay(el){ el.pause(); el.currentTime = 0; } 使用: var el = docume ...

  9. HTML5 <Audio/>标签Api整理(二)

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  10. Using HTML5 audio and video

    From:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video Using HTML5 ...

随机推荐

  1. DB2 v9.1 RACF 瞎学笔记

    一.DB2 RACF control module 定义在prefix.SDSNSAMP(DSNXRXAC)中,查找一下数据集 符合*.SDSNSAMP数据集有两个,我这里使用的DB V9,自然pre ...

  2. Linux高级编程--05.文件读写

    缓冲I/O和非缓冲I/O 文件读写主要牵涉到了如下五个操作:打开.关闭.读.写.定位.在Linux系统中,提供了两套API, 一套是C标准API:fopen.fclose.fread.fwrite.f ...

  3. NavMesh系统动态碰撞的探讨

    Unity3D提供的NavMesh系统可以方便的解决游戏的寻路问题,但是该系统有一个比较让人不理解的问题: NavMesh导航时会忽略Physics系统本身的碰撞,也就是说NavMeshAgent在移 ...

  4. ruby -- 进阶学习(十一)配置解决production环境下无法加载css或js

    最近配置production环境,找了好几份文档,从傻逼到苦逼~~终于配置成功~~@_@!!! 首先,先加载以下几个插件: # Use Uglifier as compressor for JavaS ...

  5. 编写高质量JS代码的68个有效方法(十二)

    No.56.避免不必要的状态 Tips: 尽可能地使用无状态的API 如果API是有状态的,标示出每个操作与哪些状态有关联 无状态的API简洁,更容易学习和使用,也不需要考虑其他的状态.如: 'tes ...

  6. Entity Framework增删改之通用精简方法

    用EF用了好长一段时间了,从EF4.0的版本开始接触,感觉这个ORM不能说性能是最好的,但是我个人感觉功能实现以及和mvc的结合还是一个不错的企业级网站的解决方案,在此写个简易的通用扩展方法来方便大家 ...

  7. install keepalived on RedHat/CentOS to provide IP failover for web cluster

    Contents [hide]  1 Introduction 2 Our Sample Setup 3 Install Keepalived 4 Install Kernel Headers 5 C ...

  8. wamp2.5虚拟站点建立

    1. D:\wamp\bin\apache\Apache2.2.21\conf 目录下打开httpd.conf修改以下几个地方.(软件安装在D盘) (1)178行DocumentRoot " ...

  9. MvvmLight框架使用入门(一)

    MvvmLight是比较流行的MVVM框架,相对较为简单易用.可能正因为简单,对应的帮助文档不多,对初学者就不够友好了.这里会用几篇随笔,就个人对MvvmLight的使用经验,来做一个入门的介绍. 第 ...

  10. 2013/11/21工作随笔-PHP开启多进程

    今天被问到一个问题,php如何开启多进程才比较稳定. php开启多进程执行一个操作有哪些方法: 首先想到的是使用pcntl的fork 具体可以参考之前的文章:PHP的pcntl多进程 其次想到的方法是 ...