HeoMusic静态音乐播放器源码介绍

HeoMusic是一款基于Aplayer和MetingJS构建的HTML静态音乐播放器源码。它界面设计简洁美观，部署方法极其简单，只需将源码上传至服务器根目录即可运行。该播放器功能强大，同时支持本地音乐文件播放与在线音乐平台歌单接入，是个人博客、项目展示等网页嵌入音乐播放器的理想选择。

HeoMusic播放器核心功能与操作

键盘快捷键操作

为提升用户体验，HeoMusic内置了便捷的键盘快捷键：

• 空格键 (Space)：快速暂停或播放当前音乐。
• 上/下方向键：实时增加或减少播放音量。
• 左/右方向键：切换至上一曲或下一曲。

HeoMusic歌单配置与私有化部署教程

以下配置主要适用于接入网易云、QQ音乐等在线平台歌单。

在线音乐配置参数详解

• ID：播放列表的唯一标识。您可以从音乐平台（如网易云）分享歌单的链接中提取此ID。
• Server：指定音乐服务商。可选值包括：netease (网易云音乐)、tencent (腾讯QQ音乐)、kugou (酷狗音乐)、xiami (虾米音乐)、baidu (百度音乐)。
• Type (可选)：定义播放列表类型。常用选项有 song (单曲)、playlist (歌单，默认值)、album (专辑)、search (搜索结果)、artist (歌手)。

本地音乐与远程歌单配置

HeoMusic优先支持本地音乐播放，配置灵活。

• localMusic (可选)：用于配置本地音乐或外链音乐数组。若配置此项，播放器将优先使用本地音乐列表。配置格式示例如下：
  var localMusic = [ { name: '歌曲名1', artist: '歌手1', url: '/music/歌曲1.mp3', cover: '/music/封面1.png', lrc: '/music/歌词1.lrc' }, { name: '歌曲名2', artist: '歌手2', url: '/music/歌曲2.mp3', cover: '/music/封面2.png', lrc: '/music/歌词2.lrc' } ];
• remoteMusic (可选)：通过一个JSON格式的链接来读取歌单，此设置会覆盖上述的localMusic。例如：
  var remoteMusic = './music.json';
  其中music.json文件的内容结构与localMusic数组一致。

HeoMusic使用方法总结

无论是使用在线歌单还是本地音乐，部署步骤都同样简单：

1. 下载HeoMusic播放器源码包。
2. 根据您的需求，编辑index.html文件中的相关配置代码，填入歌单ID、服务商等参数。
3. 将全部文件上传至您的网站服务器根目录。
4. 直接通过浏览器访问index.html页面，即可体验您的专属音乐播放器。

HeoMusic播放器界面效果预览