学习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中操作json
1.导入json包 import json 2.打开json文档 fp = open(jsonpath) 3.读取json文件 data=json.load(fp) 4.获取json的值 data[' ...
- Vue--使用watch、computed、filter方法来监控
watch与computed.filter: watch:监控已有属性,一旦属性发生了改变就去自动调用对应的方法 computed:监控已有的属性,一旦属性的依赖发生了改变,就去自动调用对应的方法 f ...
- PHP配置环境中开启GD库
下配置好的PHP环境中,GD库不像windows那样可以直接用,而是默认关闭,需要把它打开,去到php.ini文件中 找到php_gd2.dll把分号去掉即可.(注:GD库跟绘制二维码等有关)
- PHP相关
PHP简介 PHP超文本预处理器.是嵌入HTML文件中的服务器端脚本程序.换句话:PHP只能运行在服务器上. 一个HTML文件中,可以包含的代码:HTML代码.CSS代码.JS代码.PHP代码等. P ...
- Node.js概述1
为什么我们要学习Node.js? 认为: Node.js就学习一周,时间比较短,不重要 将来工作我后端又不用Node.js做,我们又java/python/php/c,为什么要在意它 Node.js接 ...
- redis数据库基本使用
redis数据库 # 1.安装redis与可视化操作工具 # 选择安装路径.圈中默认配置环境变量 # 2.在服务中管理redis服务器的开启关闭 # 3.命令行简单使用redis: -- redis- ...
- SVN经常使用操作
版权声明:本文为博主原创文章.转载请注明出处. https://blog.csdn.net/Jerome_s/article/details/27950055 Subversion(简称svn)安装 ...
- typeof与js数据类型
js有6种数据类型有null.undefied.string.number.boolean.object. 然而我之前的[误区]: typeof的返回值和JS的数据类型是一样的.但是并不是(⊙o⊙)哦 ...
- golang之下载安装配置
1.下载:根据操作系统和计算架构选择合适的安装包,操作系统类型有linux.mac.windows等,计算架构分为32位的386计算架构和64位的amd64计算架构 2.安装:推荐安装到 /usr/l ...
- 【转载】【技巧总结】PyCharm怎么克隆github上开源的项目
PyCharm怎么clone github上开源的项目 一.先要确保PyCharm正确的配置了Git 如果你已经在PyCharm中配置好了Git,可以跳过此步骤,直接看下一步. 那么怎么在Py ...