文章介绍了在网站gebilaoli.com上使用APlayer+MetingJS实现在线音乐播放功能的过程。通过APlayer和MetingJS，网站能够方便地引入网易云音乐等音乐平台的内容，并通过代码实现音乐播放进度的记录和恢复，确保页面刷新或关闭后音乐播放不会中断。
最近一直在瞎折腾gebilaoli.com这个站点，前几天有突然想给他加个在线播放音乐的功能。
于是想到了APlayer。
APlayer是一个简约且漂亮的HTML5音乐播放器，支持多种模式，包括播放列表模式、吸底模式。
使用也很简单，只需要在页面内加上相关代码即可
详细使用说明见APlayer官方文档
但是如果只使用APlayer，你需要填写图片地址、mp3地址、歌词等，用起来极其麻烦。
于是Meting闪亮登场！
Meting为Aplayer提供了网易云音乐、QQ音乐、酷狗音乐等等的API接口。
大大提高了APlayer的易用性。
拿网易云音乐举例，只要获得网易云音乐歌单的ID，就可以自动加载歌单里所有的歌曲，直接调用，极其方便。
引入APlayer和MetingJS相关文件
<!-- require APlayer --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"> <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script> <!--require MetingJS --> <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
在需要显示播放器的位置插入以下代码
<meting-js server="netease" type="playlist" id="60198"><!--此处更换为你的网易云歌单id--> </meting-js>
然后就可以愉快的在网页中播放网易云歌单中的音乐了
关于MetingJS更多的参数可以查看 https://github.com/metowolf/MetingJS
本来到这里也就差不多了，但是页面切换的时候音乐就会播放停止，并且打开新页面后又从头开始播放，实在是有点不爽。
因为gebilaoli.com这个站点本来就是一个单页面，内容都是通过ZBlog的api调用，使用ajax无刷加载的，不存在页面切换的问题，但是如果手动刷新页面，音乐依旧又是从头开始，还是不太完美。
于是想能不能页面刷新或关闭前记录下音乐播放进度进度，下次加载网页时再自动读取。
于是一通搜索，找到了以下代码
<script>
ap = null
Object.defineProperty(document.querySelector('meting-js'),"aplayer",{
set: function(aplayer) {
ap=aplayer
ready();
}
});
isRecover = false;
function ready(){
ap.on('canplay', function () {
if(!isRecover){
if(localStorage.getItem("musicIndex") != null){
musicIndex = localStorage.getItem("musicIndex");
musicTime = localStorage.getItem("musicTime");
if(ap.list.index != musicIndex){
ap.list.switch(musicIndex);
}else{
ap.seek(musicTime);
ap.play();
localStorage.clear();
isRecover = true;
}
}else{
isRecover = true;
}
}
});
}
window.onbeforeunload = function(event) {
if(!ap.audio.paused){
musicIndex = ap.list.index;
musicTime = ap.audio.currentTime;
localStorage.setItem("musicIndex",musicIndex);
localStorage.setItem("musicTime",musicTime);
}
};
</script>问题完美解决。
具体效果可以访问https://gebilaoli.com/测试
