前几天偶尔看到了洪哥的HeoMusic - 一个开源的基于Aplayer和MetingJS的静态音乐播放器一文，觉得挺好看，就入手了一个，下面简单记录一下部署过程。

效果预览

music

HaiMusic - 用音乐感染人心

特性

  • 多设备兼容性支持
  • 清晰的歌词展示
  • 较好的性能

部署

你可以直接fork或者下载HeoMusic仓库，然后直接上传到你的服务器或者使用vercel、githubpage等在线服务将仓库在线部署。这里不过多赘述，懂得都懂。

基本操作

Space空格键：暂停/播放音乐

上/下方向键：增加/减少音量

左/右方向键：上一曲/下一曲

修改歌单

ID: 歌单的id，可以从音乐歌单分享的链接中获取，例如https://y.qq.com/n/ryqq/playlist/8668419170 中，id为8668419170

Server: 歌单的服务商，例如netease（网易云音乐）,tencent（腾讯）,kugou（酷狗）,xiami（小米音乐）,baidu（百度音乐）

使用URL参数（推荐）

HeoMusic支持URL参数 https://music.zhheo.com/?id= + id +&server= + server

例如：https://music.haiskyblog.top/?id=8668419170&server=tencent

修改HTML的方法（需要自行搭建）

编辑index.html的相关代码，填写歌单id和服务商

1676961059410.webp

浏览器支持

  • 要求chrome或基于Chromium的v100以上浏览器
  • radio checked yellow, 兼容Safari浏览器

贡献者

@张洪Heo
@anzhiyu
@Glowed