给网站添加一个HTML音乐播放器

2024-05-19 21:29:31

这段代码是一个音乐播放器的代码片段，它使用了APlayer和Meting.js库。这个音乐播放器可以在网页上嵌入音乐或音乐播放列表，支持自动播放，可以通过设置数据属性来控制不同的功能，比如是否自动播放、音乐源服务器、音乐类型、固定位置等。可以通过设置data-theme属性来自定义播放器的外观主题颜色。这个播放器具有随机播放功能，可以按照随机顺序播放音乐。这段代码中的链接引用了所需的CSS样式文件和JavaScript库文件，以确保播放器正常工作。

实现代码

<div id="aplayer" class="aplayer" data-autoplay="true"  data-id="20173709" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
<link rel="stylesheet" href="https://syycdn.netlify.app/css/APlayer.min.css">
<script src="https://syycdn.netlify.app/js/APlayer.min.js"></script>
<script src="https://syycdn.netlify.app/js/APlayer.min.js"></script>
<script src="https://syycdn.netlify.app/js/Meting.min.js"></script>
<script src="https://syycdn.netlify.app/js/v3.js";></script>

使用教程

直接将代码放源码首页文件结尾的</body>上面即可。

上面代码中使用的是网易云音乐，具体参数介绍如下：data-id: 歌曲 / 专辑 / 歌单 ID

扩展

data-server: 音乐平台，支持如下参数：
netease （网易云音乐）
tencent （qq 音乐）
xiami （虾米音乐）
kugou （酷狗音乐）（失效）
baidu （百度音乐）

data-type: 请求类型，支持如下参数：
song （单曲）
album （专辑）
playlist （歌单）
search （搜索）

data-mode: 播放模式，支持如下参数：
random （随机）
single （单曲）
circulation （列表循环）
order （列表）

data-autoplay: 自动播放，支持如下参数：
true
false

给网站添加一个HTML音乐播放器相关推荐

如何在自己的网站上添加HTML悬浮音乐播放器？
为了美化网站,我在网站上面添加了一个HTML悬浮音乐播放器,先来看看一下效果图. 如何在自己的网站上添加HTML悬浮音乐播放器呢?今天和你们分享首先申明三点: 1.本播放器实际上是调用网易音乐云的音 ...
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署本源码技 ...
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署本源 ...
计算机毕业设计Javavue开发一个简单音乐播放器(源码+系统+mysql数据库+lw文档）
计算机毕业设计Javavue开发一个简单音乐播放器(源码+系统+mysql数据库+lw文档) 计算机毕业设计Javavue开发一个简单音乐播放器(源码+系统+mysql数据库+lw文档) 本源码技术栈 ...
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目 ...
基于JAVAvue开发一个简单音乐播放器计算机毕业设计源码+数据库+lw文档+系统+部署
基于JAVAvue开发一个简单音乐播放器计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVAvue开发一个简单音乐播放器计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈: 项目 ...
java计算机毕业设计vue开发一个简单音乐播放器（附源码、数据库）
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
html中加入音乐播放器,4个小时实现一个HTML5音乐播放器
技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 => 界面: skPlay ...
Chord 弦 - 一个现代音乐播放器
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 靳闯博客来源 | https://me.ji ...
pyqt5实现一个简易音乐播放器（升级到v2版本）
前言假期最后一天,看到一篇文章使用pyqt实现了一个音乐播放器,刚好前段时间学完pyqt,来撸一个玩一玩,最终的效果如下: 后来又萌生想法,升级了一下UI: 本代码开源仓库:https://gith ...

最新文章

热门文章