学习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 ...
随机推荐
- day36 03-Hibernate检索方式:排序、参数绑定、投影查询
排序之后是分页查询. 检索单个对象 还可以进行参数的绑定. HQL的参数绑定,按参数名称绑定或者是按参数位置绑定. 还可以用投影的操作,投影的操作是只查询这里面的某几个属性.只查询某一个属性,查询多个 ...
- 微信小程序--底部tab样式修改
tab图标个数是最少2个,最多5个 主题默认是默认的浅灰色线条 修改后(只有black和white两种样式修改) 在app.json中
- loadrunner11录制为空的解决办法(win7+chrome最新版本)
参考:https://www.cnblogs.com/zhang-zhi/archive/2018/09/10/9622605.html loadrunner11在win7中,使用chrome浏览器的 ...
- 手把手教你如何玩转消息中间件(ActiveMQ) https://blog.csdn.net/cs_hnu_scw/article/details/81040834
#情景引入小白:起床起床起床起床....快起床~我:怎么了又,大惊小怪,吓到我了.小白:我有事有事想找你,十万火急呢~~我:你能有什么事?反正我不信..那你说说看~~小白:就是我有两个小表弟,叫大白和 ...
- Java加密AES算法及spring中应用
开门见山直接贴上代码 .AESUtil加密解密工具类 import java.security.Key; import java.security.SecureRandom; import java. ...
- 常用css3属性
总结一下在工作用常用到的属性设置 1.设置文本的可选择性 -webkit-user-select:none/text 2.设置背景的绘制区域 background-clip:border-box/pa ...
- HTTP请求封装Java工具类
装载自:http://www.open-open.com/lib/view/open1384844838743.html package com.wiker; import java.io.Buffe ...
- spring boot 异常处理(转)
spring boot在异常的处理中,默认实现了一个EmbeddedServletContainerCustomizer并定义了一个错误页面到"/error"中,在ErrorMvc ...
- java获取外网ip地址
转自:http://blog.163.com/houjunchang_daxue/blog/static/13037938320134543310451/ /** * 获取外网IP.归属地.操作系统 ...
- 【风马一族_php】数组函数
原文来自:http://www.cnblogs.com/sows/p/6045699.html (博客园的)风马一族 侵犯版本,后果自负 2016-11-09 15:56:26 数组 函数 php- ...