Halo-Joe3 集成 HexMusic 音乐播放器

介绍

HeoMusic 是一个开源的静态音乐播放器，允许用户通过多种方式播放音乐，包括在线音乐平台的歌单、单曲、专辑等，也支持本地音乐或外链音乐的播放。支持网易云音乐（netease）、腾讯音乐（tencent）、酷狗音乐（kugou）、小米音乐（xiami）、百度音乐（baidu）等多个音乐平台。

最主要是样式足够好看，界面非常有设计感。

演示：HeoMusic - 用音乐感染人心

Job3集成

HeoMusic是一个静态页面，集成一个静态页面到Halo主题中并不困难。

代码分析

代码文件目录

HeoMusic
├── index.html
├── main.css
├── manifest.json
├── img/
├── js/
├── meting-api/
└── css/

代码只有一个html文件，即入口 index.html。

其中 meting-api 文件夹可以删除，它是另一个项目，用于搭建 meting-api 的，HeoMusic用到了这个API，但文件夹里的代码文件与页面运行并无关系。代码中默认使用了作者自己的 API，也可搭建自己的 meting-api。可参考：Meting-Api docker 镜像制作

HeoMusic 的 index.html 页面代码非常简单，主要是通过<div id="heoMusic-page"></div> 标签，JS动态添加html代码。

步骤（大致）

将 HeoMusic 的所有静态资源文件（JS、CSS等）复制到主题assets目录下。

新建一个自定义模板，类型推荐选择独立页面。

弄好自定义模板的 html 页面后，将<div id="heoMusic-page"></div> 添加到页面合适的位置，同时根据 index.html，将所需资源以Halo的静态资源引入方式引入。

如果一切正确，HeoMusic 的 JS 代码文件能够正常执行，此时打开页面就能看到 HeoMusic 运行在你的自定义模板页面中。

后续将 CSS 样式进行调整适配页面即可，毕竟直接复制粘贴的代码，肯定会被前后的代码影响。

标签切换歌单

《图片》

HeoMusic 中，可以以多种方式加载歌单，例如网易云、QQ音乐等软件歌单，加载本地歌曲资源或远程歌曲资源来创建歌单。但只能加载运行一个歌单。

推荐使用网易，网易的 VIP 歌曲能播放30秒，而QQ音乐则是报错后播放下一首，如果 VIP 歌曲多导致频繁出发跳转，有点影响观感，其他软件没测试过。

目前添加了点击标签来切换切换歌单的功能。切换歌单实现也很简单（但目前还有瑕疵，不过可用）

实现方式是：通过点击时间，改变 HeoMusic 中歌单信息的全局变量。

部分代码示例：

$(document).ready(async function () {
    parsePlayListInfo();

    $('.music_list__filter li').on('click', function () {
        const list_name = $(this).attr('data-listname');
        const list_type = $(this).attr('data-listtype');
        console.log(listMap[list_name])
        if(list_type == '1') {
            $(this).addClass('active').siblings().removeClass('active');
            userId = listMap[list_name].id;
            userServer = listMap[list_name].server;
            userType = listMap[list_name].type;
            localMusic = [];
            loadMusicScript();
            heo.getCustomPlayList();
        }
        else if (list_type == '2') {
            if (resListMap[list_name].length > 0) {
                $(this).addClass('active').siblings().removeClass('active');
                localMusic = resListMap[list_name];
                loadMusicScript();
                heo.getCustomPlayList();
            }
        }
    });
});

软件歌单的全局变量是userId、userServer 和userType ，本地资源和远程资源的全局变量是localMusic。

软件歌单的全局变量修改后需要将localMusic 置空，因为 HeoMusic 中资源歌单的加载优先于软件歌单。

执行 HeoMusic 的 Main.js 中的 loadMusicScript()、heo.getCustomPlayList() 两个函数，载入歌单即可。

虽然功能正常实现，但目前控制台有出现报错，真是恼人。错误来源于Aplayer 中的逻辑，HeoMusic 的代码又是简单的复制粘贴，没有深入了解，那只能说一句：不错，完美🤪。

后台配置

《图片》

同时实现了后台配置歌单功能。在后台主题配置里添加了歌单配置板块，借助表单可以方便地添加或删除歌单。从整体来看，这应该算是将 HeoMusic 集成到博客中，比较有用的一个功能。

配合上面标签切换歌单的功能，稍微拓展了 HeoMusic 的可自定义属性。

链接

HeoMusic 仓库地址：zhheo/HeoMusic: 一个基于Aplayer和MetingJS的静态音乐播放器

HeoMusic 作者主页：分享设计与科技生活 - 张洪Heo主页