任何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