HTML静态音乐播放器源码(HeoMusic)

🎯 【知行客测评】如果你正在找一个颜值在线、开箱即用的音乐播放器，又不想折腾复杂的后端配置，那这套 HeoMusic 源码值得你花 10 分钟下载部署。特别适合个人博客站长、独立开发者，或者单纯想给自己的网站加点“氛围感”的朋友。

简单来说，这是一款纯 HTML 构建的静态音乐播放器，核心亮点就两个：一是界面设计非常干净，带有毛玻璃质感和流畅的动画，视觉上完全不输主流流媒体；二是它完全不需要后端支持，你只需要把文件丢到服务器或 CDN 上，改改歌单数据就能跑起来。对于不想碰数据库、不想买服务器的轻量场景来说，这种“零依赖”的体验很舒服。

提醒一句：因为是纯静态方案，歌单和封面图需要你手动替换资源链接，没有后台管理面板，适合习惯直接改代码的朋友。另外，部分浏览器对自动播放有限制，建议把交互触发（比如点击播放）作为默认逻辑，体验会更丝滑。

源码介绍

HeoMusic是一个Aplayer和MetingJS的HTML静态音乐播放器源码，界面简洁、美观，使用方法简单。只需下载源码上传到服务器根目录即可。支持本地音乐和远程音乐播放。有需要的朋友可以下载试试。

基本操作

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

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

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

修改歌单/私有部署与配置(适用于在线音乐)

播放列表的id，可以从音乐歌单分享的链接中获取，例如

Server

播放列表的服务商，例如netease(网易云音乐),tencent(腾讯),kugou(酷狗),xiami(小米音乐),baidu(百度音乐)

Type(可选)

播放列表的类型，例如song(单曲),playlist(歌单，默认),album(专辑),search(搜索结果),artist(歌手)

localMusic(可选)

本地音乐/外链音乐。如果填写了本地音乐，则优先使用本地音乐。

本地音乐需要添加loaclMusic数组，它的形式类似于：

var localMusic = [{ name: ‘重生之我在异乡为异客’, artist: ‘王睿卓’, url: ‘/music/重生之我在异乡为异客.mp3’, cover: ‘/music/重生之我在异乡为异客.png’, lrc: ‘/music/重生之我在异乡为异客.lrc’ }, { name: ‘落’, artist: ‘唐伯虎’, url: ‘/music/落.mp3’, cover: ‘/music/落.png’, lrc: ‘/music/落.lrc’ } ];

remoteMusic（可选）

使用json格式的链接来进行读取localMusic，会覆盖localMusic的设置。

例如：

var remoteMusic = ‘./music.json’;

musicjson内容例如：

[ { “name”: “重生之我在异乡为异客”, “artist”: “王睿卓”, “url”: “/music/重生之我在异乡为异客.mp3”, “cover”: “/music/重生之我在异乡为异客.png”, “lrc”: “/music/重生之我在异乡为异客.lrc” }, { “name”: “落”, “artist”: “唐伯虎”, “url”: “/music/落.mp3”, “cover”: “/music/落.png”, “lrc”: “/music/落.lrc” } ]