前言:

  每一次遇见问题想到的就是怎么解决?最好的方法还是查询网络媒体,更好的办法是让自己记忆,只有自己理解到了才真正是属于自己。要做一个订单提醒功能,没有使用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控制其事件的更多相关文章

  1. 基于HTML5 audio元素播放声音jQuery小插件

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...

  2. JS和JQuery中的事件托付 学习笔记

    事件托付事实上并非一个非常高级的技巧,比方在一个页面里面.当仅仅存在两个button的时候.可能你给button加入监听是这种:(本文不考虑浏览器兼容性.关于事件的兼容性可參考前面的学习笔记) < ...

  3. html5 audio vedio and video.js

    查看audio play事件http://jplayer.org/HTML5.Media.Event.Inspector/ media.seekable, buffered,played这些数据 we ...

  4. JS和jQuery中的事件总结(一)

    学而时习之,小白现在天天写页面,基础知识还是要恶补的. 进入正题,什么是事件(此处单独对jQuery.JS)?就是JS和Html之间的交互时呢,用户和浏览器操作页面时的动作(其实是为引发的效果的执行操 ...

  5. js和jquery中的事件委托

    [转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却 ...

  6. js和jQuery中的事件绑定与普通事件

    普通事件,是指直接对元素进行事件注册,然后触发 而事件绑定是将事件注册到元素上 两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以 ...

  7. bootstrap table 生成的表格里动态添加HTML元素按钮,JS中添加点击事件,点击没反应---解决办法

    bootstraptable中onExpandRow属性---js  方法添加的 html代码,然后给这代码里面的 元素 添加 事件,却获取不该元素.(称之为未来元素),由于是未来的 所以现在没有这个 ...

  8. js和jquery的DOM事件大全

  9. [jPlayer] HTML5 Audio & Video for jQuery

    ---------------------------------------------------------------------------------------------------- ...

随机推荐

  1. linux debian 9 / centos 7配置postgresSQL数据库

    #读者注意:本文可以选择不看解释,直接执行每段的0中的代码 (〇):一些概念(可以跳过直接使用(一)0的代码) 1. 客户端:psql.postgreSQL的命令行客户端程序,在终端输入psql进入p ...

  2. wince sqlite c#

    无法找到 PInvoke DLL“SQLite.Interop.084.dll 按下面步骤操作

  3. Office365 Manager Plus之报表

    Office365 Manager Plus之报表 也许您刚刚开始使用Office 365,对它的各个组件还有很多疑问,如何快速掌握Office 365各种服务的用法?如何管理邮箱?如何监控邮件流量? ...

  4. 《mysql必知必会》学习_第14章_20180806_欢

    第14章:使用子查询. 子查询是镶嵌在其他查询里面,相当其他的select查询的条件来. P91 select order_num from where prod_id='tnt2';   #检索条件 ...

  5. Adobe reader multiple languages pack

    用户打开客户发过来的PDF文档,显示不正常,这是电脑的Adobe Reader缺少相关的字体. 可以从下面地址下载相对版本的字体包安装:http://supportdownloads.adobe.co ...

  6. Android开发工程师文集-1 小时学会Widget小组件开发

    前言 大家好,给大家带来Android开发工程师文集-1 小时学会Widget小组件开发的概述,希望你们喜欢 学会用Widget (小组件) Widget小组件很方便,很快捷,可以个性化,自己定制,相 ...

  7. 多核CPU配合负载均衡可以这样用,为老板省点钱

    负载均衡作为一个处理高并发,大流量的访问的业务场景,已经几乎是常识性的知识了. 而本文的意义在于需求:由于大流量请求,导致服务无法正常响应,在不增加购买机器成本的场景下,如何提高服务器的业务处理能力? ...

  8. [译]ElasticSearch vs. Solr

    在Gen2产品的早期阶段, 我们事实上是失败的, 这促使我们重新审视我们现有的技术栈. 我们仔细分析系统中的每个独立的组件,并记录下来, 当然其中也包括构成我们核心功能的搜索引擎技术. 在我们的通用日 ...

  9. ubuntu环境下编译linux内核问题解决备忘

    在使用比较新的gcc编译内核时,经常遇到这个问题: 问题一: 提示: mkimage" command not found - U-Boot images will not be built ...

  10. .NET 动态向Word文档添加数据

    本文章主要用于在网页上填写数据动态填入Word模板中使用 首先要准备一个Word模板,然后在需要插入数据的位置插入书签,这样可以确定在网页上填入的数据可以插入到Word文档相应的位置. 在项目中要声明 ...