前言
是否有一首音乐，在许多年后再次听到时,会让你思绪拉回到昔日的过往情景。音乐就像老胶卷，每个旋律，每句歌词，都承载着每个人的往事回忆和情愫感受。
有时候情绪到了,有那么一些音乐,我们听众会被音乐带动情绪,或低落或洋溢,在这些复杂的情感交织当中,往昔的画面如潮水般涌来。许多年又过去了,当时陪伴在你身边的人还在吗,当时定下的决心还记得吗,当年的愿望实现了吗?
音乐就像是一把神奇的钥匙,开启了一扇扇通往过去的门。所以我想在我自己的博客网站中,将这开门的瞬间给记录下来。将那些或珍贵或伤痛或美好的记忆碎片一一拾起，拼凑成一幅属于自己的人生画卷，让自己在岁月的长河中得以一次次回溯，去重新审视那些走过的路、遇见过的人、经历过的事，在音乐的怀抱里，与曾经的自己深情相拥，感悟着时光的流转与生命的厚重。
在博客上的音乐播放器大多是那种 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 |
音乐平台: , , , , |
type |
require |
类型： , , , , |
auto |
options |
音乐链接，支持，支持: , , |
实现代码如下
<!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>
效果如下
