HTML5 audio元素如何使用js与jquery控制其事件
前言:
每一次遇见问题想到的就是怎么解决?最好的方法还是查询网络媒体,更好的办法是让自己记忆,只有自己理解到了才真正是属于自己。要做一个订单提醒功能,没有使用audio相关的插件,虽然插件无数,还是喜欢自己瞎折腾。(来一些隐形的链接,据说有推广效果,本文原创官网地址:www.pushself.com)
听一个写博客的朋友说周末的博客阅读量明显下降,周末大好时光不出去泡妹子的肯定是有难言之隐的。先来重温一下audio标签的基本属性
定义和用法
<audio> 标签定义声音,比如音乐或其他音频流。
示例代码:
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
提示和注释
提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
| loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
| preload | preload |
如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
| src | url | 要播放的音频的 URL。 |
事件方法(暂时不扩充)
play() 播放
pause() 暂停
实战一下,代码仅供下次模仿
js示例代码
<audio id="audio" src="no.mp3">跟你说了多少次,你就是不听,那么低版本的浏览器还不换掉,你是想搞啥子?</audio>
<script type="text/javascript">
var audioEle = document.getElementById("audio");
audioEle.play(); //播放
audioEle.pause(); //暂停
</script>
jquery示例代码
<audio id="audio" src="no.mp3">跟你说了多少次,你就是不听,那么低版本的浏览器还不换掉,你是想搞啥子?</audio>
<script type="text/javascript">
var audioEle = $("#audio")[0];
audioEle.play(); //播放
audioEle.pause(); //暂停
</script>
jquery为什么需要一个0呢?js操作获得的是audio对象,jquery选择器获得的是jquery对象,0对象的才是对应的节点对象。所以不能直接使用jquery对象去操作,这一点需要详细补充一下基础知识。(来一些隐形的链接,据说有推广效果,本文原创官网地址:www.pushself.com)
HTML5 audio元素如何使用js与jquery控制其事件的更多相关文章
- 基于HTML5 audio元素播放声音jQuery小插件
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...
- JS和JQuery中的事件托付 学习笔记
事件托付事实上并非一个非常高级的技巧,比方在一个页面里面.当仅仅存在两个button的时候.可能你给button加入监听是这种:(本文不考虑浏览器兼容性.关于事件的兼容性可參考前面的学习笔记) < ...
- html5 audio vedio and video.js
查看audio play事件http://jplayer.org/HTML5.Media.Event.Inspector/ media.seekable, buffered,played这些数据 we ...
- JS和jQuery中的事件总结(一)
学而时习之,小白现在天天写页面,基础知识还是要恶补的. 进入正题,什么是事件(此处单独对jQuery.JS)?就是JS和Html之间的交互时呢,用户和浏览器操作页面时的动作(其实是为引发的效果的执行操 ...
- js和jquery中的事件委托
[转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却 ...
- js和jQuery中的事件绑定与普通事件
普通事件,是指直接对元素进行事件注册,然后触发 而事件绑定是将事件注册到元素上 两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以 ...
- bootstrap table 生成的表格里动态添加HTML元素按钮,JS中添加点击事件,点击没反应---解决办法
bootstraptable中onExpandRow属性---js 方法添加的 html代码,然后给这代码里面的 元素 添加 事件,却获取不该元素.(称之为未来元素),由于是未来的 所以现在没有这个 ...
- js和jquery的DOM事件大全
- [jPlayer] HTML5 Audio & Video for jQuery
---------------------------------------------------------------------------------------------------- ...
随机推荐
- sql server导出大批量数据
使用sqlserver导出数据的时候,如果数据量大于65536那么就要使用xlsx,最大行数为104万 如果导出的时候报错,则需要在本机安装以下程序: https://www.cnblogs.com/ ...
- Python(四) 列表元组
- 【Mybatis】MyBatis对表执行CRUD操作(三)
本例在[Mybatis]MyBatis配置文件的使用(二)基础上继续学习对表执行CRUD操作 使用MyBatis对表执行CRUD操作 1.定义sql映射xml文件(EmployeeMapper.xml ...
- SQL笔试基础
SQLSERVER服务器中,给定表table1 中有两个字段 ID.LastUpdateDate,ID表示更新的事务号,LastUpdateDate表示更新时的服务器时间,请使用一句SQL语句获得最后 ...
- 你会跟谁结婚zz
正文 咱们日课去年有篇文章叫<你会跟谁结婚?>,提到经济学家的数据显示,现在美国的婚姻中“强强联合”的现象越来越严重,高收入者和高收入者结婚,高学历者和高学历者结婚. 经济学家很无奈,我们 ...
- CentOS7 启动中文输入法
CentOS 系统中是带有中文输入法的(智能拼音),启动方式如下: Applications --> System Tools --> Setting --> Region &am ...
- 支持复制粘贴word图片的文本编辑器
下载并打开基于PHP环境的工程: 运行: 尝试使用文档复制后粘贴进来: 通过粘贴后,文档以及图片被粘贴进来了,看看html代码: 由此可看出图片全部使用img标签统一. 看看文档图片被放置在哪了: ...
- DL_1_week2_神经网络基础
二分类问题 在二分分类问题中,目标是训练出一个分类器,这里以图片特征向量x作为输入,预测输出的结果标签y是1还是0,也就是预测图片中是否有猫. 计算机保存一张图片(彩色),要保存三个 ...
- 《mysql必知必会》学习_第20章_20180809_欢
第20章:更新和删除数据 P140 update customers set_emails='elmer@fudd.com' where cust_id=10005; 更新多个列,用逗号隔开.注意被指 ...
- nginx 502 bad gateway 问题处理集锦
一般看来, 这种情况可能是由于nginx默认的fastcgi进程响应的缓冲区太小造成的, 这将导致fastcgi进程被挂起, 如果你的fastcgi服务对这个挂起处理的不好, 那么最后就极有可能导致5 ...