之前在项目里用audioplayer.js做的一个页面,改了布局样式,还有插件自身有个bug就是audio添加autoplay属性后有两个音频播放,其中一个无法控制,会一直播放,我查看了官网的demo也是这种情况,查了半天终于查出来了

问题出在clone()的上面:

<audio controls autoplay>
<source src="music/333.mp3">
</audio>
将源代码中把audio标签clone后生成dom的那部分改成在原标签上创建父级元素然后插入,再插入到dom中
var thePlayer = $('<div class="' + params.classPrefix + '"></div>');
$('.detail_content').append(thePlayer);
$this.appendTo(thePlayer);
$( '<div class="' + cssClass.playPause + '" title="' + params.strPlay + '"><a href="#">' + params.strPlay + '</a></div>').appendTo(thePlayer);
然后再加一个自动播放命令 if (isAutoPlay){thePlayer.addClass(cssClass.playing);theAudio.play();}

由于我不牵扯到太多的兼容性,所以那些三元运算符的判断是否支持audio标签的代码就没加,
最后又加了一个播放进度前的点 $(".audioplayer-bar-played").append("<span class='append_drop'></span>");
大概就是这样
下边是html5的audio、video标签的js事件和标签属性
事件名称 描述
abort  在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
canplay 在媒体数据已经有足够的数据(至少播放数帧)可供播放时触发。这个事件对应CAN_PLAY的readyState。
canplaythrough 在媒体的readyState变为CAN_PLAY_THROUGH时触发,表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意:手动设置currentTime会使得firefox触发一次canplaythrough事件,其他浏览器或许不会如此。
durationchange 元信息已载入或已改变,表明媒体的长度发生了改变。例如,在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
emptied 媒体被清空(初始化)时触发。
ended 播放结束时触发。
error 在发生错误时触发。
loadeddata 媒体的第一帧已经加载完毕。
loadedmetadata 媒体的元数据已经加载完毕,现在所有的属性包含了它们应有的有效信息。
loadstart 在媒体开始加载时触发。
mozaudioavailable 当音频数据缓存并交给音频层处理时
pause 播放暂停时触发。
play 在媒体回放被暂停后再次开始时触发。即,在一次暂停事件后恢复媒体回放。
playing 在媒体开始播放时触发(不论是初次播放、在暂停后恢复、或是在结束后重新开始)。
progress 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
ratechange 在回放速率变化时触发。
seeked 在跳跃操作完成时触发。
seeking 在跳跃操作开始时触发。
stalled 在尝试获取媒体数据,但数据不可用时触发。
suspend 在媒体资源加载终止时触发,这可能是因为下载已完成或因为其他原因暂停。
timeupdate 元素的currentTime属性表示的时间已经改变。
volumechange 在音频音量改变时触发(既可以是volume属性改变,也可以是muted属性改变).。
waiting 在一个待执行的操作(如回放)因等待另一个操作(如跳跃或下载)被延迟时触发。


属性

autoplay 布尔属性;如果指定(默认值为"false"!);指定后,音频会马上自动开始播放,不会停下来等着数据载入结束。
buffered 你可以通过该属性获取已缓冲的资源的时间段信息。该属性包含一个TimeRenges对象。
controls 如果设置了该属性,浏览器将提供一个包含声音,播放进度,播放暂停的控制面板,让用户可以控制音频的播放。
loop 布尔属性;如果指定,将循环播放音频。
mozCurrentSampleOffset 在音频播放时,表示相对于音频开始处的偏移量的一个数值。
muted 表示是否静音的布尔值。默认值为false,表示有声音。
played 一个
TimeRenges对象,表示所有已播放的音频片段。
preload 枚举属性,让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一:
  • none: 示意用户可能不会播放该音频,或者服务器希望节省带宽;换句话说,该音频不会被缓存;
  • metadata: 示意即使用户可能不会播放该音频,但获取元数据 (例如音频长度) 还是有必要的。
  • auto: 示意用户可能会播放音频;换句话说,如果有必要,整个音频都将被加载,即使用户不期望使用。
  • 空字符串 : 等效于auto属性。

假如不设置,默认值就是浏览器定义的了(不同浏览器会选择自己的默认值), 即使规范建议设置为 metadata.

使用备注:

  • autoplay 属性优先于 preload 假如用户想自动播放视频,那么很明显浏览器需要下载视频。同时设置autoplay 和 preload属性在规范里是允许的。
  • 规范没有强制浏览器去遵循该属性的值;这仅仅只是个提示。
src
嵌入的音频的URL。你可以在audio元素中使用<source>元素来替代该属性指定嵌入的音频。
volume
音频播放的音量。值从0.0 (无声) 到 1.0 (最大声).

时间偏移量目前是指定为float类型的值,表示偏移的秒数。

备注: HTML 5 规范中,时间偏移量值的定义还没有完成,有可能会变更。
buffered:获得视频的第一段缓冲范围(部分),以秒计:
myVid=document.getElementById("video1");
alert("Start: " + myVid.buffered.start(0)
+ " End: " + myVid.buffered.end(0));


audioplayer.js插件的使用及小bug的更多相关文章

  1. 使用node.js中遇到的一些小bug

    1.BUG Cannot set headers after they are sent to the client 解决:即发出一次请求得到两次或以上的回应时会出现此警告,此时注意查看再在一些条件下 ...

  2. autocomplete.js 插件的使用遇到的bug

    1. Uncaught TypeError: Cannot read property 'toLowerCase' of undefined 股票信息缺少字段(默认为三个字段,缺少P字段) 2. Ca ...

  3. AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件

    AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osva ...

  4. Fundebug前端JavaScript插件更新至1.8.2,修复2个小BUG

    摘要: 修复2个BUG,请大家及时更新. Fundebug前端异常监控服务 Fundebug是专业的程序异常监控平台,我们JavaScript插件可以提供全方位的异常监控,可以帮助开发者第一时间定位各 ...

  5. js动画--一个小bug处理下

    对于上面的课程我们很好的处理了一个小bug,那么我们现在讲程序进行优化一下,前一节的程序中,我们处理处理的属性都是写死了的.为了我们能够很好的对某个属性进行操作的话.我们这样来设置. js文件 win ...

  6. 【jQuery小实例】js 插件 查看图片

    ---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...

  7. 解决JS浮点数(小数)计算加减乘除的BUG

    在JavaScript中输出下面这些数值(注意不能作为字符串输出):0.1000000000000000000000000001(28位小数).0.10000000000000000000000000 ...

  8. 前端开发需要了解的JS插件

    excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...

  9. Fundebug后端Node.js插件更新至0.2.0,支持监控Express慢请求

    摘要: 性能问题也是BUG,也需要监控. Fundebug后端Node.js异常监控服务 Fundebug是专业的应用异常监控平台,我们Node.js插件fundebug-nodejs可以提供全方位的 ...

随机推荐

  1. BBS的登陆——发帖——回帖

    整体分析思路 1.首先手工熟悉一遍业务流程 2.录制脚本,选取协议,设置录制选项 1)Run-Time-Settings——Preferences——Options设置3个超时 2)Recording ...

  2. Python学习之条件判断和循环

    #coding= utf-8 # 条件判断和循环 # 如果if语句判断是True,就把缩进的两行print语句执行了,否则,什么也不做 age1 = 20 if age1 >= 18: prin ...

  3. windows server 2016远程桌面进去,英文系统修改语言

    由于我这边已经是改好了,以下截图来自中文版. 这边选了中文,然后点options. 选择:使该语言成为主要语言,保存. 会提示需要退出登录. 过一会重新登录,ok.

  4. python 正则详解

    正则表达式概述 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达式.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),是计算机科学的 ...

  5. python/匿名函数和内置函数

    1 匿名函数 匿名函数是lambda定义的没有名字的具有一些小功能的函数 具体形式是 lambda 参数列表:返回值表达式 lambda x: X**2 # 求平方操作 lambda x: x> ...

  6. A、B同时打开一个页面进行同一条数据库记录进行修改,A修改完成后提交表单,A修改的数据保存完成后;当B也修改完成后,提交数据进行数据修改。此时B修改的内容会覆盖A修改的内容,请问如何避免?

    A.B同时打开一个页面进行数据中的一条数据进行修改,A修改完成后提交表单,数据修改保存完成后B开始页面也修改完成,开始提交进行修改.此时B修改的内容会覆盖A的内容,请问如何避免? 通过搜索和我个人总结 ...

  7. hdu-1237 简单计算器---中缀表达式转后缀表达式

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1237 题目大意: 读入一个只包含 +, -, *, / 的非负整数计算表达式,计算该表达式的值. 思路 ...

  8. Hadoop 3.x 新特性剖析系列1

    1.概述 目前从Hadoop官网的Wiki来看,稳定版本已经发行到Hadoop2.9.0,最新版本为Hadoop3.1.0,查阅JIRA,社区已经着手迭代Hadoop3.2.0.那么,今天笔者就带着大 ...

  9. [LeetCode] Smallest Good Base 最小的好基数

    For an integer n, we call k>=2 a good base of n, if all digits of n base k are 1. Now given a str ...

  10. 从三个开源项目认识OpenFlow交换机 - OVS

    在SDN/NFV的网络革新技术浪潮的引领下,催生了诸多数据面开源方案的诞生.业界知名度较高的有OVS(Open vSwitch).FD.io (Fast Data I/O).ODP(Open Data ...