任何html页面添加Apalyer音乐播放器
Aplayer.js
官网：https://aplayer.js.org/
Github：https://github.com/MoePlayer/APlayer/
两种脚本
第一种
<div id="aplayer"></div>
<link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script>
<script type="text/javascript">
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: true, //自动播放
audio: [{
name: "愿爱无忧",
artist: "恩几",
url: "http://ws.stream.qqmusic.qq.com/C400002XALjh4VMGdC.m4a?guid=877697360&vkey=14BB55BBF2631E5ECF25047DB9ED0BD0B05872634F2203AA509BE64952FF893DE096CCC04C8EFA1CEAEA292799BFBCD5DD2522EF90D3155D&uin=&fromtag=120032",
cover: "",
lrc:
"[[ti:愿爱无忧 (Live)][ar:恩几][al:][by:][offset:0][00:00.00]愿爱无忧 (Live) - 恩几[00:00.23]词：高虎[00:00.33]曲：高虎[00:00.63]像是写给爱人的歌[00:03.73][00:05.97]四目相对 从那一刻[00:09.14][00:11.79]在有爱的早上[00:14.47]带上神的孩子[00:16.59]直到我们明天一起醒来[00:21.15][00:22.30]不要怀疑懵懂的双眼[00:26.92][00:27.77]不要怀疑心醉的誓言[00:32.39][00:33.22]从习惯的见面[00:36.00]摆一摆手又说再见[00:38.22]再见分别 又像昨天[00:43.04][00:44.02]愿爱无忧[00:48.78][00:49.30]愿爱无忧]"
},
{
name: '停在昨天',
artist: '乔洋',
url:
'http://music.163.com/song/media/outer/url?id=26600249.mp3',
cover:
'https://p2.music.126.net/cRTH7MeN3ySpQJKcbqoczg==/2313372464905466.jpg?param=130y130',
lrc:
'[[00:00.02]被伤的感情要怎么样平静[00:07.78]我独自呆在回忆里的风景[00:13.77]听说爱情就像易碎的水晶[00:20.52]我用心呵护这段感情[00:26.58]把一切感人的话说干说净[00:33.27]得到的只是冷漠一声回应[00:39.40]也许你在装着嘴硬压抑心情[00:45.91]可是我早以无法倾听[00:51.97]我们要走得很远[00:54.97]要幸福直到终点[00:58.21]你怎么没看清我泪湿的脸[01:04.58]那一些伤害都是我们多余的画面[01:11.65]才不愿看你离开身边[01:17.37]多想要停在昨天[01:20.50]停在单纯的从前[01:23.68]那个我触手可见清晰的脸[01:29.99]让时间停在你我还关心彼此瞬间[01:37.25]我不愿从此看你不见[01:42.19]停在 昨天[01:45.83][01:54.32][02:01.32][02:07.00][02:09.32]把一切感人的话说干说净[02:15.46]得到的只是冷漠一声回应[02:21.59]也许你在装着嘴硬压抑心情[02:28.27]可是我早以无法倾听[02:34.09]我们要走得很远[02:37.15]要幸福直到终点[02:40.46]你怎么没看清我泪湿的脸[02:46.78]那一些伤害都是我们多余的画面[02:53.90]才不愿看你离开身边[02:59.78]多想要停在昨天[03:02.71]停在单纯的从前[03:06.02]那个我触手可见清晰的脸[03:12.40]让时间停在你我还关心彼此瞬间[03:19.53]我不愿从此看你不见[03:24.47]停在 昨天[03:28.50]要幸福直到终点[03:31.56]你怎么没看清我泪湿的脸[03:38.26]那一些伤害都是我们多余的画面[03:44.88]才不愿看你离开身边[03:50.73]多想要停在昨天[03:53.79]停在单纯的从前[03:57.10]那个我触手可见清晰的脸[04:03.97]让时间停在你我还关心彼此瞬间[04:10.47]我不愿从此看你不见[04:15.41]停在 昨天]'
},
]
});
ap.init();
</script>
第二种
<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>
<div id='aplayer'></div>
<script>
var ap = new APlayer
({
element: document.getElementById('aplayer'),
showlrc: false,
fixed: true,
mini: true,
audio: [
{
title: '半岛铁盒',
author: '周杰伦',
url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
},
{
title: '给我一首歌的时间',
author: '周杰伦',
url: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间.mp3',
pic: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'
}
]
});
ap.init();
</script>
支持的设置参数
mini: false, //迷你模式
autoplay: false, //自动播放
theme: '#FADFA3', //主题色
loop: 'all', //音频循环播放, 可选值: 'all'全部循环, 'one'单曲循环, 'none'不循环
order: 'random', //音频循环顺序, 可选值: 'list'列表循环, 'random'随机循环
preload: 'auto', //预加载，可选值: 'none', 'metadata', 'auto'
volume: 0.7, //默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
mutex: true, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
listFolded: false, //列表默认折叠
listMaxHeight: 90, //列表最大高度
lrcType: 3, //歌词传递方式 //歌词类型·1 -> 字符串 3 -> url
showlrc: true, <!--是否开启歌词功能 ，默认false（为true时musics集合中需要传入lrc字段。）-->
fixed:1,<!-- 是否固定在左下角不动， 1即为true -->
Meting三方音乐
当然我们也可以使用第三方音乐，需要引入另外一款js插件Meting.js，它是基于Aplayer封装好的插件，开箱即用。
CDN链接：
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
Meting主要参数说明：
| 参数 | 默认值 | 描述 |
|---|---|---|
| id | require | 歌曲ID/播放列表ID/专辑ID/搜索关键字 |
| server | require | 音乐平台: netease, tencent, kugou, xiami, baidu |
| type | require | 类型：song, playlist, album, search, artist |
| auto | options | 音乐链接，支持，支持: netease, tencent, xiami |
| fixed | false | 开启吸底模式 |
| mini | false | 开启迷你模式 |
| autoplay | false | 自动播放，一般浏览器默认会阻止音频自动播放 |
| theme | #2980b9 | 主题色 |
| loop | all | 音频循环播放，值：'all'、'one'、'none' |
| order | list | 音频循环顺序，值：'list'，'random' |
| preload | auto | 音频预加载，值: 'none', 'metadata', 'auto' |
| volume | 0.7 | 默认音量，播放器会记住用户设置，用户自己设置音量后默认音量将失效 |
| mutex | true | 防止同时播放多个播放器，当该播放器开始播放时暂停其他播放器 |
| lrc-type | 0 | 歌词类型 |
| list-folded | false | 列表是否先折叠 |
| list-max-height | 340px | 音频列表最大高度 |
歌单引入
我们使用网易云音乐里我创建的一个歌单，链接：https://music.163.com/#/playlist?id=7360465359
代码如下：
<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>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<meting-js server="netease" type="playlist" id="7360465359"></meting-js>
更新2023/11/24
修复主页播放器夜间模式显示问题，新增css样式，自动停靠，关闭折叠,只适用与本站点皮肤的夜间模式，别的需要查看夜间模式变量参数值
在css页面添加
/* Width的值可根据喜好调整（屏幕的宽度） */
@media (max-width: 800px) {
/* Aplayer音乐标签伸缩 */
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
left: -66px !important;
/* 默认情况下缩进左侧66px，只留一点箭头部分 */
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
left: 0 !important;
/* 鼠标悬停是左侧缩进归零，完全显示按钮 */
}
}
/* Aplayer日间模式调整 */
/* 背景色 */
.aplayer {
background: rgba(255, 255, 255, 0.6) !important;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
position: relative;
}
.aplayer.aplayer-fixed .aplayer-lrc:after,
.aplayer.aplayer-fixed .aplayer-lrc:before {
display: none;
}
.aplayer.aplayer.aplayer-fixed .aplayer-body {
background: rgba(255, 255, 255, 0.6) !important;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
position: fixed;
}
/* 滚动条 */
.aplayer .aplayer-list ol::-webkit-scrollbar {
width: 5px;
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: var(--theme-color) !important;
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
background-color: var(--theme-color) !important;
}
/* 圆角 */
.aplayer.aplayer-fixed .aplayer-list {
border-radius: 6px 6px 0 0 !important;
}
.aplayer.aplayer-fixed .aplayer-miniswitcher {
border-radius: 0 6px 6px 0 !important;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
transition: 0.28s !important;
border-radius: 6px !important;
}
/* 选中与播放中歌曲激活颜色 */
.aplayer .aplayer-list ol li:hover {
background: var(--theme-color) !important;
}
.aplayer .aplayer-list ol li.aplayer-list-light {
background: var(--theme-color) !important;
}
/* 歌词 */
.aplayer-lrc p {
color: #ffffff !important;
text-shadow: #000000 1px 0 0, #000000 0 1px 0, #000000 -1px 0 0, #000000
0 -1px 0 !important;
}
/* Aplayer黑暗模式 */
[theme="dark"]
.aplayer {
background: rgba(22, 22, 22, 0.6) !important;
color: rgb(255, 255, 255);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}
[theme="dark"]
.aplayer.aplayer-fixed .aplayer-body {
background: rgba(22, 22, 22, 0.6) !important;
color: rgb(255, 255, 255);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}
[theme="dark"]
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-time
.aplayer-icon
path {
fill: #d4d4d4;
}
[theme="dark"]
.aplayer .aplayer-list ol li:hover {
background: var(--theme-color) !important;
}
[theme="dark"]
.aplayer .aplayer-list ol li.aplayer-list-light {
background: var(--theme-color) !important;
}
[theme="dark"]
.aplayer .aplayer-info .aplayer-controller .aplayer-time {
color: #d4d4d4;
}
[theme="dark"]
.aplayer .aplayer-list ol li .aplayer-list-index {
color: #d4d4d4;
}
[theme="dark"]
.aplayer .aplayer-list ol li .aplayer-list-author {
color: #d4d4d4;
}
此外为了不让主题的css在独立的播放器上生效需要修改id
