audioplayer.js插件的使用及小bug

Posted 2020-10-27 大灰狼zz

之前在项目里用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));