学习HTML<audio>标签
首先来看下这个例子:
<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>标签的更多相关文章
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- HTML5 audio标签自制音乐播放器
相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack ...
- 用<audio>标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...
- HTML5的Audio标签打造WEB音频播放器
目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...
- 论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...
- 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况
对比audio标签 和 Web Audio API 各平台浏览器的支持情况: audio element Web Audio API desktop browsers Chrome 14 Yes ...
- 使用audio标签播放音频文件
HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签.使用audio标签可以控制音频的播放与停止,循环播放与播放次数设置,以及播放位置等等. 例如 ...
- H5页面实现一个Audio标签加载多个音频文件,并进行播放和展示音频长度
最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下: 1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件 ...
- <video>和<audio>标签
一.<video>基本格式: <video width=" " heigh="" src=""> </vide ...
随机推荐
- python实例 文件处理
对比Java,python的文本处理再次让人感动 #! /usr/bin/python spath="D:/download/baa.txt" f=open(spath," ...
- tomcat标准化安装
操作系统说明: 操作系统 版本 linux red hat release 6.4 关键软件包说明: 软件包 版本 目录 运行用户 jdk-7u79-linux-x64.gz 1.7 /usr/loc ...
- Laravel 精选资源大全
原文链接 必备品 文档:Documentation API:API Reference 视频:Laracasts 新闻:Laravel News 中文文档 Laravel学院– Laravel 5. ...
- 数据挖掘案例:基于 ReliefF和K-means算法的应用
数据挖掘案例:基于 ReliefF和K-means算法的应用 数据挖掘方法的提出,让人们有能力最终认识数据的真正价值,即蕴藏在数据中的信息和知识.数据挖掘(DataMiriing),指的是从大型数据库 ...
- docker.[7] 数据卷容器
docker.[7] 数据卷容器 挂在数据卷容器的方法: # docker run --volumes-from [Container Name]
- C++的替代运算标记符
标记符and, and_eq, bitand, bitor, compl, not, not_eq, or, or_eq, xor, xor_eq, <%, %>, <: 和 :&g ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十八章:立方体贴图
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十八章:立方体贴图 代码工程地址: https://github.c ...
- Leetcode819.Most Common Word最常见的单词
给定一个段落 (paragraph) 和一个禁用单词列表 (banned).返回出现次数最多,同时不在禁用列表中的单词.题目保证至少有一个词不在禁用列表中,而且答案唯一. 禁用列表中的单词用小写字母表 ...
- android GUI 流程记录
ViewRootImpl 与 wms ViewRootImple里的 WindowSeesion是WindowManagerService的proxy, 通过这个句柄来调用WMS的功能而W是 wms用 ...
- Otracle数据库定时任务--dbms_job
一.dbms_job涉及到的知识点 1.创建job: variable jobno number; dbms_job.submit(:jobno, --job号 'your_procedure;'-- ...