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控制其事件,布布扣,bubuko.com

时间: 2024-12-10 03:56:19

HTML5 audio元素如何使用js与jquery控制其事件的相关文章

JS和JQuery中的事件委托 学习笔记

事件委托其实并不是一个很高级的技巧,比如在一个页面里面,当只存在两个按钮的时候,可能你给按钮添加监听是这样的:(本文不考虑浏览器兼容性,关于事件的兼容性可参考前面的学习笔记) <div id="container"> <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> </div> var btn1 =

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

学而时习之,小白现在天天写页面,基础知识还是要恶补的. 进入正题,什么是事件(此处单独对jQuery.JS)?就是JS和Html之间的交互时呢,用户和浏览器操作页面时的动作(其实是为引发的效果的执行操作),此处注明,这是楼主自己的理解哈. 1.页面加载事件 JS提供了一个 window.onload 它的执行时机呢,是页面完全加载完毕后,包括页面上的文件.图片等完全加载到浏览器后才开始执行: 另外,此方法仅能保存对一个函数的引用,会自动的用后面的覆盖前面的.看个例子: function A(){

js和jquery中的事件委托

[转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 举个列子:有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签

js和jquery的DOM事件大全

jQuery 控制勾选和去勾选与杏彩程序出售

input ratio勾选控制,杏彩程序出售(企 娥:217 1793 408) $("#id").prop("checked",true); //勾选 $("#id").prop("checked",false); //去勾选 注意:一定用prop而不是用attr来控制.目前项目使用的jq版本是3.1.1,在这个版本中,类似于: $("#id").attr("checked",&quo

HTML5音频audio元素

一.音频文件格式.ogg/.mp3/.wav/.aac/.mp4/.opus,最后一种新的音频文件格式,在本书写作之时只有 Firefox 支持.对于音频,最好的两种格式是 Ogg 和 MP3. 二.在网页中添加带控件的单个音频文件<audio src="my-audio.ext" autoplay controls muted loop preload></audio>注意,包含 autoplay 属性会覆盖 preload 属性的设置,因为只有加载音频文件才

The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open source (MIT) media library written in JavaScript. A jQueryplugin, (and now a Zepto plugin,) jPlayer allows you to rapidly weave cross platform audio an

[jPlayer] HTML5 Audio &amp; Video for jQuery

----------------------------------------------------------------------------------------------------- The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open source (MIT) media library written in JavaScript. A jQueryplugin, (an

js和jquery获取父级元素、子级元素、兄弟元素的方法(转)

先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素.可以用: 比如: <div id="dom"> <div></div> <div></div> <div></div> </div> var a = docu