Volantis的APlayer事件捕获

2022-01-19 18:40:32 浏览数 (2)

本文方法适用于Volantis 5.0.0.alpha.1,不保证其他版本可用

Volantis中使用APlayer作为音乐播放器,如果希望在播放音乐时网页能够做出响应,例如弹窗,就需要对播放事件进行捕获。

目标效果

我的网页左下角有一个看板娘,我希望播放音乐时她会说:

而暂停时她会说:

浏览了APlayer官方文档的方法后,发现在volantis中根本无效,于是自己查看volantis的源码并实现。现在从中挑选出我认为比较重要的事件,写成js代码来分享,你需要自行定义函数并在函数里实现你要的功能。 如果你看到这篇文章时发现我的看板娘根本就不会说上面的话,那是因为我还没考虑好要实现什么效果,代码已经经过弹窗测试,确保可以使用。

事件捕捉

在volantis/layout/layout.ejs中定义以下函数,你可以直接写进去或者新建一个js文件来引用

代码语言:javascript复制
function player_onPlay(){
  //音乐播放
}
function player_onPause(){
  //音乐暂停,可能是用户手动或者放完了
}
function player_onEnded(){
  //音乐放完了
}
function player_onWaiting(){
  //加载中
}
function player_onError(){
  //出错
}
function player_onSeeked(){
  //进度条跳跃
}
function player_onVolumechange(){
  //更改音量
}
function player_onProgress(){
  //进度条加载
}
function player_onListSwitch(){
  //换歌
}

引用我的js

代码语言:javascript复制
<script src="https://cdn.jsdelivr.net/gh/dearxuanres/res/js/playerListener.js"></script>

注意事项

注释中已经说明了每个函数触发条件,你必须要注意有些函数会同时执行(短时间内执行)

例如,用户点击了一下进度条,而恰好进度条还没加载完,那么就会先触发onSeeked,再触发onProgress。而如果进度条已经全部加载完毕则只会触发onSeeked。当一首歌放完了,那么会快速触发onPause,onSeeked,onEnded,onPlay,onWaiting,onProgress等一系列事件。

0 人点赞