博客添加Aplayer音乐播放器

明弟有理想

已于 2024-12-08 15:43:12 修改

阅读量1.2k

点赞数 11

文章标签： arcgis

于 2024-12-08 15:40:13 首次发布

本文链接：https://blog.csdn.net/weixin_46461268/article/details/144326665

版权

音乐就像是一把神奇的钥匙,开启了一扇扇通往过去的门。所以我想在我自己的博客网站中,将这开门的瞬间给记录下来。将那些或珍贵或伤痛或美好的记忆碎片一一拾起，拼凑成一幅属于自己的人生画卷，让自己在岁月的长河中得以一次次回溯，去重新审视那些走过的路、遇见过的人、经历过的事，在音乐的怀抱里，与曾经的自己深情相拥，感悟着时光的流转与生命的厚重。

在博客上的音乐播放器大多是那种 Mini 音乐播放器,只显示一个MP3的播放按钮，虽然很便捷，但我一直觉得不够正式,音乐列表看起来也不够直观,我希望的文章上能有一个看起来比较正式的播放器,在自己的文章中显示音乐播放器

这里我选择用Aplayer,这里我来介绍一下具体的实现过程

音乐插件

对比了几款音乐插件，我最终选定了 Aplayer.js，因其界面美观，功能强大。音乐播放器的音乐信息，歌词，进度条，音量，顺序模式，循环模式都支持。可以使用三方音乐外链，也可以使用自己的音乐链接。

官网：APlayer
Github：https://github.com/MoePlayer/APlayer/

当然，由于一些限制，打开以上链接为概率性事件...如果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>

效果如下