本文方法适用于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等一系列事件。