前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Volantis的APlayer事件捕获

Volantis的APlayer事件捕获

作者头像
DearXuan
发布2022-01-19 18:40:32
9890
发布2022-01-19 18:40:32
举报

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

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

目标效果

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

DearXuan
DearXuan

而暂停时她会说:

DearXuan
DearXuan

浏览了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等一系列事件。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021年8月31日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 目标效果
  • 事件捕捉
  • 注意事项
相关产品与服务
腾讯云 BI
腾讯云 BI(Business Intelligence,BI)提供从数据源接入、数据建模到数据可视化分析全流程的BI能力,帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计,使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程,并支持报表的分享、推送等企业协作场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档