【MY美优】精美丝袜 美优出品 淘宝搜索: MY美优
网站首页 >> 相关教程 >> 正文

网站使用APlayer+MetingJS实现音乐播放 刷新页面保持音乐播放进度

作者：一枚小杰克   时间：2024-08-31 15:05:57   浏览：524  

APlayer是一个简约且漂亮的HTML5音乐播放器，支持多种模式，包括播放列表模式、吸底模式。

教程转载自隔壁老李https://yeelz.com/post/564.html，使用也很简单，只需要在页面内加上相关代码即可，详细使用说明见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 

本来到这里也就差不多了，但是页面切换的时候音乐就会播放停止，并且打开新页面后又从头开始播放，实在是有点不爽，于是想能不能页面刷新或关闭前记录下音乐播放进度进度，下次加载网页时再自动读取。

于是一通搜索，找到了以下代码

此处为隐藏内容，请评论后查看隐藏内容，谢谢！
如果您已经评论了，请点击 刷新 后查看资源哦~

问题完美解决，具体效果可以访问https://www.ikunwl.com/  测试加载~

本文标签： 前端  JavaScript  CSS  音乐 
一枚小杰克

一枚小杰克 https://lkba.cn

博主专注于Z-BLOG网站搭建、网站优化以及电脑故障排查、重装、优化、维修系统等，QQ群：1042168487

相关文章

上一篇：

下一篇：

本文已有5位网友发表了点评 - 欢迎您

请填写验证码

评论列表:

Copyright © 2020-2025 Jack作品 Reserved.
Powered By Z-Blog Sitemap | 蜀ICP备2023025269号-1

Processed : 0.037 SQL : 15