首先来看下这个例子:

<audio controls autoplay="autoplay">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

属性:

controls如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。

autoplay如果出现该属性,则音频在加载后自动播放。

我们也可以用JavaScript控制音频的播放和暂停:

<script>
var audio=document.getElementById('audio');
function playAudio(){
audio.play();
}
function pauseAudio(){
audio.pause();
}
</script>

audio对象:

play()方法,开始播放音频

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

学习HTML<audio>标签的更多相关文章

  1. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  2. HTML5 audio标签自制音乐播放器

    相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack ...

  3. 用<audio>标签打造一个属于自己的HTML5音乐播放器

    上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...

  4. HTML5的Audio标签打造WEB音频播放器

    目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...

  5. 论HTML5 Audio 标签歌词同步的实现

    HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...

  6. 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况

    对比audio标签 和 Web Audio API 各平台浏览器的支持情况:   audio element Web Audio API desktop browsers Chrome 14 Yes  ...

  7. 使用audio标签播放音频文件

    HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签.使用audio标签可以控制音频的播放与停止,循环播放与播放次数设置,以及播放位置等等. 例如 ...

  8. H5页面实现一个Audio标签加载多个音频文件,并进行播放和展示音频长度

    最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下: 1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件 ...

  9. <video>和<audio>标签

    一.<video>基本格式: <video width=" " heigh="" src=""> </vide ...

随机推荐

  1. python基础--socket套接字、粘包问题

    本地回环地址:127.0.0.1 简易版服务端: import socket ​ server = socket.socket() # 就比如买了一个手机 server.bind(("127 ...

  2. 2019阿里云开年Hi购季域名与商标分会场全攻略!

    2019阿里云云上Hi购季活动已经于2月25日正式开启,从已开放的活动页面来看,活动分为三个阶段: 2月25日-3月04日的活动报名阶段.3月04日-3月16日的新购满返+5折抢购阶段.3月16日-3 ...

  3. Django用户登陆以及跳转后台管理页面3

    Django用户登陆以及跳转后台管理页面1http://www.cnblogs.com/ujq3/p/7891774.html Django用户登陆以及跳转后台管理页面2http://www.cnbl ...

  4. Faster RCNN算法demo代码解析

    一. Faster-RCNN代码解释 先看看代码结构: Data: This directory holds (after you download them): Caffe models pre-t ...

  5. 备考2019年6月份PMP考试-分享一些考试笔记(二)

    最新比较经典的100道试题,有备考的小伙伴可以练练手,文章末尾附答案. 1     一个项目经理在运作一个数据中心安装项目.他发现相关方很恼火,因为他超出了预算,原因是人员费用要高于原先的计划.另外项 ...

  6. Swift 之 函数与闭包的应用实例

    http://www.cocoachina.com/swift/20160106/14862.html 今天的博客算是比较基础的,还是那句话,基础这东西在什么时候都是最重要的.说到函数,只要是写过程序 ...

  7. 基于docker的php调用基于docker的mysql数据库的方法

    1:建立基于docker的mysql,参考 Mac上将brew安装的MySql改用Docker执行 2:建立基于docker�php image 在当前目录,建立Dockerfile,内容如下 FRO ...

  8. xcode自动完成代码 Code Snippet Library

    今天发现Xcode里一个好东西:代码片段库 你可以将自己常用的代码放到里面,给它命名,设置快捷键,以后想用这段代码的时候只要按快捷键,就会出现提示,直接将这段代码显示出来,十分高效. 比如我经常会用到 ...

  9. 【软件安装】我喜欢的notepad插件

    1.文件管理器 explorer 2.16进制查看文件工具 HEX-Editor

  10. Spark day02

    Standalone模式两种提交任务方式 Standalone-client提交任务方式 提交命令 ./spark-submit --master spark://node1:7077 --class ...