前言
是否有一首音乐，在许多年后再次听到时,会让你思绪拉回到昔日的过往情景。音乐就像老胶卷，每个旋律，每句歌词，都承载着每个人的往事回忆和情愫感受。
有时候情绪到了,有那么一些音乐,我们听众会被音乐带动情绪,或低落或洋溢,在这些复杂的情感交织当中,往昔的画面如潮水般涌来。许多年又过去了,当时陪伴在你身边的人还在吗,当时定下的决心还记得吗,当年的愿望实现了吗?
音乐就像是一把神奇的钥匙,开启了一扇扇通往过去的门。所以我想在我自己的博客网站中,将这开门的瞬间给记录下来。将那些或珍贵或伤痛或美好的记忆碎片一一拾起，拼凑成一幅属于自己的人生画卷，让自己在岁月的长河中得以一次次回溯，去重新审视那些走过的路、遇见过的人、经历过的事，在音乐的怀抱里，与曾经的自己深情相拥，感悟着时光的流转与生命的厚重。
在博客上的音乐播放器大多是那种 Mini 音乐播放器,只显示一个MP3的播放按钮，虽然很便捷，但我一直觉得不够正式,音乐列表看起来也不够直观,我希望的文章上能有一个看起来比较正式的播放器,在自己的文章中显示音乐播放器
这里我选择用Aplayer,这里我来介绍一下具体的实现过程
音乐插件
对比了几款音乐插件，我最终选定了 Aplayer.js，因其界面美观，功能强大。音乐播放器的音乐信息，歌词，进度条，音量，顺序模式，循环模式都支持。可以使用三方音乐外链，也可以使用自己的音乐链接。
当然，由于一些限制，打开以上链接为概率性事件…如果RP不足可以留言博主
实现代码
将 Aplayer 插件 APlayer.min.js 和 APlayer.min.css 上传到服务器，如果博客使用 WordPress 可上传到服务器网站能访问到的目录下，通过链接 https://IP/your_file/Aplayer.min.js ，就可以访问到
个人还是觉得东西都放在本地更有安全感但是也可以直接使用 jsdeliver CDN 方式，更快更方便，但不稳定，偶尔抽风…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Music Player</title>
// 如果使用本地的话可以将以下链接改成本地
<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>
</head>
<body>
<div id="aplayer"></div>
<script>
const ap = new APlayer({
element: document.getElementById('aplayer'),
music: [{
title: '半岛铁盒',
author: '周杰伦',
url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
}]
});
</script>
</body>
</html>
效果如下
这个比初始的好点当时还是略显单调,我们还可以再改进一番让他改成类似与我QQ音乐的播放器一样单曲二行显示的感觉
经过更改后最终效果如下
放单曲的代码,这里加了一个空格控制播放的小优化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Music Player</title>
<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>
<style>
/* 当是一首歌的时候 加上这个 */
.aplayer-list {
display: block !important;
}
</style>
</head>
<body>
<div id='aplayer'></div>
<script>
var ap = new APlayer({
element: document.getElementById('aplayer'),
showlrc: false,
fixed: false,
mini: false,
preload: 'none',
// 这个是放歌的 数组
audio: {
// 这个是放歌的,更改url即可自定义歌曲
title: '半岛铁盒',
author: '周杰伦',
url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
},
});
// 添加 按钮 按下的监听事件
document.addEventListener('keydown', function(e) {
// 播放/暂停
if (e.code == 'Space') {
e.preventDefault(); // 防止空格键引起的页面滚动
if (ap.paused) {
ap.play();
} else {
ap.pause();
}
}
});
</script>
</body>
</html>播放列表的代码
有时候我们需要播放一个列表,再数组里添加就行,新加了一个通过方向键<- -> 控制的逻辑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Music Player</title>
<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>
</head>
<body>
<div id='aplayer'></div>
<script>
var ap = new APlayer({
element: document.getElementById('aplayer'),
showlrc: false,
fixed: false,
mini: false,
preload: 'none',
// 这个是放 歌的 数组[] 这个是数组 {} 这个是对象
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/2022/05/周杰伦-半岛铁盒.mp3',
pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
},
],
});
// 添加 按钮 按下的监听事件
document.addEventListener('keydown', function(e) {
// 上一首
if (e.code == 'ArrowLeft') {
ap.skipBack();
}
// 下一首
else if (e.code == 'ArrowRight') {
ap.skipForward();
}
// 播放/暂停
else if (e.code == 'Space') {
e.preventDefault(); // 防止空格键引起的页面滚动
if (ap.paused) {
ap.play();
} else {
ap.pause();
}
}
});
</script>
</body>
</html>效果如下
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 |
实现代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<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>
<!-- 这个id改一下就行了 这个是网易云的 qq音乐的 也是 改一下serve 就行了 还有 type 是用来选择单曲还是列表的 -->
<meting-js server="netease" type="playlist" id="7360465359"></meting-js>
</head>
<body>
</body>
</html>效果如下
