Volantis的APlayer事件捕获

前往我的博客以获得更好的阅读体验Volantis的APlayer事件捕获 - DearXuan的主页https://blog.dearxuan.com/2021/08/31/Volantis%E7%9A%84APlayer%E4%BA%8B%E4%BB%B6%E6%8D%95%E8%8E%B7/

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

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

目标效果

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

而暂停时她会说:

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

事件捕捉

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

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

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

注意事项

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

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