学习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基础--数据类型的常用方法2
列表及内置方法: count():查询元素的个数 clear():清空当前对象 reverse():对当前对象进行反转 sort():对当前对象中的元素进行排序 总结: 能存多个值 有序的 可变的 队 ...
- linux学习 网络系统&文件查找
被用来配置和操作网络系统的命令数目非常巨大,这里仅仅介绍一些经常会使用的 这一章会介绍ssh远程登录程序哦 ping 命令(掠过) traceroute 会显示主机到指定的主机要经过的跳数的网络流量列 ...
- Shell中字符串、数值的比较
原文:http://apps.hi.baidu.com/share/detail/31263915 在shell中字符串与数值的比较方法是不同的,要注意区分 整数比较: -eq 等于 ...
- Laravel 批量替换某个字段
Likeword::offset(16854)->chunk(100, function ($word_list) { foreach ($word_list as $word) { $new ...
- Codeforces Round #197 (Div. 2) A. Helpful Maths【字符串/给一个连加计算式,只包含数字 1、2、3,要求重新排序,使得连加的数字从小到大】
A. Helpful Maths time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- DirectX11笔记(十二)--Direct3D渲染8--EFFECTS
原文:DirectX11笔记(十二)--Direct3D渲染8--EFFECTS 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010333737 ...
- Vue.之.安装
Vue.之.安装 第一步npm安装 首先:先从nodejs.org中下载nodejs 直到Finish完成安装. 打开控制命令行程序(CMD),检查是否正常 使用淘宝NPM 镜像 国内直接使用np ...
- python ndarray相关操作:重构
- 外贸电子商务网站之Prestashop修改顶部导航
如修改以上所示顶部导航. 如何在prestashop顶部导航栏添加链接,Module>Top horizontal menu点击进入Configure页面 1,在Settings 中看到 链接 ...
- PyCharm 头文件设置及作用
PyCharm 头文件 设置 进入File --->settings---->Editor---->File and Code Templates----->Python Sc ...