Volantis的APlayer事件捕获

目标效果

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

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

而暂停时她会说:

浏览了APlayer官方文档的方法后,发现在volantis中根本无效,于是自己查看volantis的源码并实现.现在从中挑选出我认为比较重要的事件,写成js代码来分享,你需要自行定义函数并在函数里实现你要的功能.

事件捕捉

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

1

<script src="https://gcore.jsdelivr.net/gh/dearxuanres/res/js/playerListener.js"></script>

注意事项

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

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