HeoMusic播放器的搭建
本文最后更新于 2025-07-22，若需联系:请发至[email protected]
此项目还有一些小缺点和bug的地方，不过人家休闲时间开发的就要求别太苛刻了哈哈，如果你可以接受这些小问题，就可以搭建
前情提要
很久很久以前就想找个在线的播放器，我的要求只有俩：美观 & 实用。但是碍于所有在线播放器的通病：在线歌单没有解锁VIP接口，放弃了很多回。
前两天给家里买了俩原道耳机，是的，悔恨之泪确实不是传说。忽然又提起这个兴趣来了。
我完全可以搭一个播放器以供测机实用，要求不高的前提下，不用太多歌曲就已经ojbk了。但唯一要求就是歌曲音源要好，这事下面一趴会展开。
看了很多项目还是最后决定用洪哥这个主体框架，其他的项目我不太喜欢，尤其是Navidrome。
很符合我心中挨炮music的那种简约还不简单的美。体验下来，唯一的不足就是这个项目在完善度上还是早期，有点玻璃大炮的感觉），也可能是我太菜了不会操作哈哈哈，之后会在一趴里说明一些我发现的不完善地方。
搭建
相对来说搭建还是很简单的，去GitHub把整个项目pull下来在框架基础上魔改就可以了
下面所有关于项目文件夹的引用，都以上图为标准
当然，我先选择pull到我本地电脑上预览，但是最终效果跟网页版有所出入，这个之后会展开
如何pull一个github项目到本地，自行gpt，或直接下载
我使用的IDE是webstorm，原来就在用，现在免费了更好了!
修改网站图标
在./img文件夹中，修改上面三个蓝色文件为你的icons，例如↓
如何设计图标和自己的风格emm，咋说呢，canva造图，gpt生成初步想法，找一些喜欢的素材，最后融合到一起就可以，这里不再赘述了（或者直接拿个现成的图用哈哈哈哈哈哈）
修改网站标题
在index.html中修改如下XXXXXXX部分
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XXXXXXXXX(</title>
<link rel="stylesheet" type="text/css" href="./css/APlayer.css">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link rel="icon" type="image/x-icon" href="./img/icon.webp">
<link rel="apple-touch-icon" href="./img/icon-r.webp">
<meta name="apple-mobile-web-app-title" content="音乐">
<link rel="bookmark" href="./img/icon.webp">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="./img/icon-r.webp">
<meta name="description" content="XXXXXXXXX">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#000000">
</head>
<body>
<div id="heoMusic-page">
</div>
<script src="./config.js"></script>
<script src="./js/APlayer.min.js"></script>
<script async data-pjax src="./js/main.js"></script>
</body>
</html>添加歌曲
将config.js.demo 重命名为config.js
var userId = "8668419170";
var userServer = "tencent";
var userType = "playlist";
// var localMusic = [{
// name: '重生之我在异乡为异客',
// artist: '王睿卓',
// url: '/music/重生之我在异乡为异客.mp3',
// cover: '/music/重生之我在异乡为异客.png',
// lrc: '/music/重生之我在异乡为异客.lrc'
// },
// {
// name: '落',
// artist: '唐伯虎',
// url: '/music/落.mp3',
// cover: '/music/落.png',
// lrc: '/music/落.lrc'
// }
// ];
// var remoteMusic = "./musiclist.json"添加在线歌单(不太推荐，除非免费歌曲多)
在config.js 文件中修改一下段落
var userId = "8668419170";
var userServer = "tencent";
var userType = "playlist";添加本地歌曲
有两种方法，不过内容是完全一样的，只是实现方式不同
localMusic变量定义块
var localMusic = [{
name: '重生之我在异乡为异客',
artist: '王睿卓',
url: '/music/重生之我在异乡为异客.mp3',
cover: '/music/重生之我在异乡为异客.png',
lrc: '/music/重生之我在异乡为异客.lrc'
},
{
name: '落',
artist: '唐伯虎',
url: '/music/落.mp3',
cover: '/music/落.png',
lrc: '/music/落.lrc'
}
];将以上示例代码块取消注释（⌘+/）
在对应的位置写上歌曲信息：name, artist, url, cover, lrc。
注意，在我能力之内，歌曲块我只能写成如下格式才能被检测到路径，不然会报错
//路径最前需要加. ，不然实测会报错 { name: '童话镇', artist: '陈一发儿', url: './music/童话镇-陈一发儿/童话镇.wav', cover: './music/童话镇-陈一发儿/童话镇.webp', lrc: './music/童话镇-陈一发儿/陈一发儿-童话镇.lrc' },当然我选择的方式是在根目录下new了一个文件夹
/music,然后每一首歌新建一个文件夹存放如上文件。
歌曲文件下载相关会放在下面H2一趴。
remoteMusic声明引用
或者你嫌上面的代码块越加越多太不好看，可以单独在根目录下创建一个./music.json文件，单独存放歌曲定义块，然后在config.js里declare引用一下此文件就好，文件名随便，但是两者需要相同哈（小白基操）
var remoteMusic = './music.json';./music.json文件格式如下
[
{
"name": "重生之我在异乡为异客",
"artist": "王睿卓",
"url": "./music/重生之我在异乡为异客.mp3",
"cover": "./music/重生之我在异乡为异客.png",
"lrc": "./music/重生之我在异乡为异客.lrc"
},
{
"name": "落",
"artist": "唐伯虎",
"url": "./music/落.mp3",
"cover": "./music/落.png",
"lrc": "./music/落.lrc"
}
]歌曲资源
这一部分算是耗费我时间最长的一趴了，第二长的是调试路径和加载速度的部分，我选择以下方法
主：本地曲库
副：在线歌单（全是能找到的免费歌）
我比较推荐本地音源，一来能自己控制音质，二来便于长期维护管理；相对的会占用一部分空间。
在线歌单是很方便，但我比较抵触，毕竟meting api没法获取VIP音质，而且网抑云/Q音的最高音质也一言难尽。。国内嘛，懂得都懂
所以要自己去找三个东西：音频、专辑图、lrc歌词
音频
我选择的是YouTube+py脚本转码，所以网络环境，是吧
网上有很多歌曲资源，但都不完全符合我的要求：
音质不求顶尖但要能打
网上有很多无损论坛、在线下歌网站。前者太过专业，甚至一曲要n个G的大小，或者是在专辑整个iso里存着很不方便；网站很容易找，但是音质太过垃圾
要方便下载，加密的要便于解密
诸如Apple Music、Spotify(音质相对较低)、QQ音乐、网抑云，有办法下载，但都要借助一些极其小众的软件，下载之后还要解密，还 要借助软件，对于下歌这种重复性劳动来说时间成本过大
所以最后换了个方向，解决不了音频文件，我不如直接去YouTube上把歌对应的官方视频下下来，然后转成音频文件，虽然音质多多少少会有被影响，但是总比2/3mb一首歌音质强吧emm，这是目前我能想到的，最方便和没有💰耗的方法。
所以写了个非常非常简单的脚本转成wav文件，食用方法和源码我放到GitHub上了↓，各位大佬轻喷，真的没学过代码
专辑图
这个基本上遍地都是，找一个自己喜欢的站下就OK。
我用的这个，搜歌会出头图，保存就OK
为了方便加载速度，在前文中也有说过，压缩图片我使用的是：piclist+webp插件，再开启自带的监听剪切板功能，能做到复制图片自动上传图床该图片的webp格式，然后放在./music/歌曲/歌曲.webp里就OK。
歌词
歌词遍地都是，但我要的算动态歌词文件XXX.lrc ，形式如下：时间戳+歌词
[00:00.10]童话镇-陈一发
[00:00.53]作曲 : 暗杠
[00:00.97]作词 : 竹君
[00:22.78]听说白雪公主在逃跑
[00:26.16]小红帽在担心大灰狼
[00:29.66]听说疯帽喜欢爱丽丝
[00:32.97]丑小鸭会变成白天鹅
[00:36.34]听说彼得潘总长不大
[00:39.84]杰克他有竖琴和魔法
[00:43.10]听说森林里有糖果屋 通常，最官方的版本的lrc文件是通用的，理论上，你在什么地方下载的什么音质的「正式发行版本」都是固定的，音源和歌词时间能对上号。
比如歌曲宝这种随便搜就出来的网站，但是不知道能活多久。。
但是有些很经典的版本是在「非正式版」产生的，比如：演唱会版的月半小夜曲(李克勤)、加州旅馆(Eagles)，现场版一生所爱(卢冠廷)，这种的歌词文件就很难找，通常要比音频还要难找。
所以我再三犹豫下选择自己造lrc文件：（前提是我找到了个方便的网站）
这个网站可以让我上传音频自己印时间戳，所以我只需要随便搜一下歌词，然后copy过来，加时间戳就OK，救了我的命，要不没音乐软件基础想自己搞时间戳那可是，，
天大的喜事啊）、
要注意，英文歌曲若加入中文字幕要如下设置时间戳：下一句英文要和上一句中文的时间戳相同
[00:00.0]加州旅馆(Live) - Eagles
[00:32.25]Lyrics by：Don Felde&Glenn Fre&Don Henley
[01:04.51]Composed by：Don Felder
[01:36.770004]Arranged by：Bill Szymczyk
[02:09.03]On a dark desert highway cool wind in my hair
[02:15.42]在漆黑荒凉的公路上凉风吹散了我的头发
[02:15.42]Warm smell of colitas rising up through the air
[02:21.87]科里塔斯温热的气息在空中袅袅上升
[02:21.87]Up ahead in the distance I saw a shimmering light
[02:28.15]抬头极目远方微微灯光闪烁
[02:28.15]My head grew heavy and my sight grew dim
[02:31.52]我的头脑变得沉重我的视线越发模糊
[02:31.52]I had to stop for the night
[02:34.88]必须停下来了寻找过夜的地方中文成品如下图：
[00:18.77]小镇姑娘 - 陶喆 (David Tao)
[00:20.94]词：陶喆
[00:22.86]曲：陶喆
[00:30.64]还记得多年前跟你手牵手
[00:33.90]你都害羞都不敢抬头
[00:37.14]只会傻傻的看着天上的星星
[00:40.39]你就是那么的纯静
[00:43.11]知道你收到上榜的通知单
[00:46.34]我的心里就变得很乱
[00:49.58]不知为你而高兴还为自己忧愁
[00:53.10]只好就放你走
[00:55.51]不明白不明白
[00:58.50]为什么我不能放得开
[01:01.74]舍不得这个爱
[01:04.99]你是一生一世不会了解
[01:07.69]我明白我明白
[01:10.94]在我心中你永远存在
[01:15.26]或许你会有一天怀念
[01:17.96]可是我已不在然后把所有印好的歌词复制到XXX.lrc文件中就OK啦，lrc用文本查看器打开就OK，最方便，别的就不推荐了，当然webstorm可以直接打开的，这不是个问题
录入歌曲信息
将上面三个文件全部放入./music/歌曲 文件夹里，按照添加歌曲部分写入路径即可
小技巧
因为我的音频文件太大，之后整个项目放在vps上会占用不少空间，而且直连访问的速度肯定会很慢，所以我选择放在我的oss上一部分，毕竟我的oss是阿里云的，直连可能会快点，所以我的config是这么写的↓（oss上把歌曲的所有文件都上传了，以防万一）
var localMusic = [{ name: '渡口', artist: '蔡琴', url: 'https://musickvc.oss-cn-shanghai.aliyuncs.com/music/xxxx.wav', cover: './music/渡口/dukou.webp', lrc: './music/渡口/渡口-MusicEnc.lrc' }, { name: '童话镇', artist: '陈一发儿', url: 'https://musickvc.oss-cn-shanghai.aliyuncs.com/music/xxxx.wav', cover: './music/童话镇-陈一发儿/童话镇.webp', lrc: './music/童话镇-陈一发儿/陈一发儿-童话镇.lrc' },加载速度是快了点，能做到90%的进度条随点随播，但总感觉跟洪哥那个demo比起来加载速度还是慢了一点点，不清楚洪哥后台的音频存到了哪里，还是用的在线歌单
但是cover和lrc我还是放在本地吧，一来文件不大，二来我感觉oss图片加载速度有些慢，
之后我还会尝试其他方法提高加载速度的
推送vps上
我一开始用vscode+Live Server插件在网页端预览有bug，比如用oss的url链接就不能显示，但是推到服务器上又可以了，不过这个踩坑点我不明白为什么，不过也不需要去知道原因，按我上面的步骤走就OK了
当然直接index.html放在浏览器上看也行，不过还是要以推到服务器反代后的版本为准
如上，在本地编辑好了之后，把整个项目文件夹放在vps上就OK，然后反代一下域名就OK
创建
选择静态网站
主域名我用的：music.域名
代号自动生成不用管
确认后，打开网站目录，将本地所有根仓库文件上传（ps:可以选择性的wav音频文件删除不上传，节省时间//若你用远程引用链接的话）
然后去域名控制台加一条dns解析就OK了
要保证你的路径跟我的一样才对/1panel/apps/openresty/openresty/www/sites/music.你的域名/index ，然后把文件全放里头。
目前遇到的问题 & bug
bug：仅支持safari & chrome，iOS的via浏览器，访问背景会由专辑图的高斯模糊变为平铺展开，而且我用fusion虚拟机的chrome同样出现了此问题，安卓那边应该也会，不过感觉可以修一下，应该不会太复杂）（算是一个比较影响访问者的bug）
期待功能：移动端没有专辑图展示，不然就是六耳猕猴挨炮music
半bug：总感觉速度不太稳定，删除缓存刷新，会有机会无声音但显示正在播放，或进度条拖动无声音反应，可能是我的存储策略问题w
期待功能：现在是静态站点，不过我更期待洪哥加上一个后台管理界面，能把config.js显式出来编辑，也能管理本地歌曲，并且打包成一个docker项目，这样传播度更广，而且感觉能吊打其他播放器。。毕竟Apple Music风格是抵抗不了一点。也给洪哥提了issue了。（当然后台入口最好跟twikoo一样能隐藏起来不影响美观度，点什么东西才会出现）
期待功能：在线歌单能去验证音频有效性和是否需要VIP，估计需要meting那边支持，这个倒不是使用者的刚需功能，所以不是强求功能
ps：这个输入法真的太好玩了哈哈哈哈哈哈
然后没看见有太多bug，但是这个项目脑测会是一个特别好的项目！还是感谢洪哥的创造er
致谢
这是一个致谢的地方
感谢此播放器的原作者zhheo张洪博主，简洁还好看好看
感谢大锅Fndroid提供的技术支持er，还得是大哥
感谢歌曲资源歌词下载歌曲封面图的网站
感谢歌词格子网站提供LRC速编支持
感谢不懂代码还感兴趣的我doge
一开始只是想做一个自己的音乐播放器
后来觉得太麻烦还要维护歌单就不了了之
今天居然又想重新搞一搞
就选择了本地曲库便于维护，代价就是访问速度可能慢一些些
但是发现找资源找头图歌词版本都要现折腾
又研究了两天
终于2025.5.14有了雏形
可惜源码只适配了Safari和Chrome
其他浏览器和应用内跳转会有显示bug
本人能力有限，只能去提issue帮助继续开发了
虽然也称不上帮助，只能算建议哈哈
目测活的时间应该挺久的
只要以后我还有兴趣开发博客和docker相关内容
趁着有时间把该干的都干了哈吼吼吼
以后好歹能少点遗憾吧
不然回头看看啥也没留下全是遗憾
搞自己的东西真的不会累
update 2025.5.14
忽然发现传到OSS上music内容也可以正常识别，正好省了我VPS的空间了
国内直连用户还访问更快，爽
