Hina Music Player
本文最后更新于6 天前,其中的信息可能已经过时,如有错误请发送邮件到2125094989@qq.com

Hina Music Player 是一款面向个人博客的轻量级 WordPress 全站音乐播放器

插件使用 WordPress 媒体库管理歌曲和封面,提供后台歌单管理、前台选歌、播放顺序控制、位置记忆和音量记忆等功能,同时支持 Argon 主题的 PJAX 页面切换与动态配色

主要功能

  • 从 WordPress 媒体库上传或选择音频;
  • 为每首歌曲设置独立封面;
  • 批量导入多首歌曲;
  • 通过拖拽调整歌曲顺序;
  • 前台展开歌单并自由选歌;
  • 支持列表循环、单曲循环和随机播放;
  • 播放器可自由拖动并记住位置;
  • 记住用户设置的音量;
  • 支持静音以及恢复静音前的音量;
  • 支持控制是否在移动端显示播放器。

媒体库与歌单管理

插件直接调用 WordPress 自带的媒体库,不需要手动修改 JavaScript 歌单代码。

进入 WordPress 后台左侧的“音乐播放器”,即可添加歌曲名称、歌手、音频和封面。添加多首歌曲后,可以通过拖拽调整播放顺序。

音频和封面既可以上传到自己的 WordPress 媒体库,也可以填写已有的资源地址。

可拖动悬浮播放器

前台播放器采用悬浮显示方式,可以拖动到页面中的合适位置,避免遮挡导航栏、侧边栏或看板娘。

拖动后的位置会保存在当前浏览器中。再次打开网站时,播放器会恢复到上一次停留的位置。

播放器还会自动检查屏幕边界,避免因为浏览器窗口尺寸变化而完全移动到可视区域之外。

音量控制

Hina Music Player 提供独立的音量滑块和静音按钮。访问 GitHub 项目主页

播放器会记录上一次使用的音量。点击静音后再次点击,可以恢复静音前的音量,不会出现静音后无法重新开启声音的问题。

外观与主题配色

播放器采用半透明的中性外观,可以适配不同风格的博客背景。

后台“播放器配色”提供两种模式:

  • 跟随网站主题:优先读取 Argon 的主题颜色,其次读取网页中的 theme-color
  • 使用自定义颜色:始终使用插件后台选择的颜色。

在 Argon 主题中切换配色时,播放器可以同步更新颜色,无需刷新页面。

Argon 并不是必须依赖。使用其他 WordPress 主题时,播放器仍然可以正常工作。

Argon PJAX 支持

Hina Music Player 对 Argon 主题的 PJAX 页面切换进行了专门适配。

在文章、分类和其他页面之间切换时,插件会检查播放器状态,避免播放器重复创建或在页面切换后消失。

本地提供 APlayer

插件基于 APlayer 1.10.1 构建,并将所需文件包含在插件安装包中。

前台加载播放器时不依赖公共 CDN,也不需要接入第三方音乐平台 API。歌曲和封面资源可以完全由站长自行管理。

隐私说明

Hina Music Player 不会收集访问数据,也不会把歌单信息发送到外部服务。

插件保存的内容主要包括播放器设置、歌曲信息、显示位置和浏览器音量。音频及封面文件仍由 WordPress 媒体库负责管理。

环境要求

  • WordPress 6.0 或更高版本;
  • PHP 7.4 或更高版本;
  • 支持现代 CSS 和 JavaScript 的浏览器。

安装方法

  1. 打开项目的 GitHub Releases 页面;
  2. 下载 hina-music-player-x.y.z.zip
  3. 进入 WordPress 后台“插件”→“安装插件”;
  4. 点击“上传插件”;
  5. 选择下载的 ZIP 文件并完成安装;
  6. 启用 Hina Music Player;
  7. 打开后台左侧“音乐播放器”添加歌曲。

注意:请下载 Releases 页面中的插件安装包,不要安装 GitHub 自动生成的 Source code 压缩包。

升级方法

下载新版本 ZIP 后,可以直接在 WordPress 后台重新上传,并选择“使用上传的文件替换当前版本”。

不建议在升级前删除旧插件。执行正式卸载时,插件设置会被清理,但媒体库中的音频和图片不会被删除。

开源信息

  • 项目名称:Hina Music Player
  • 当前版本:1.1.0
  • 开源许可证:GPL-2.0-or-later
  • 第三方组件:APlayer 1.10.1(MIT License)

访问 GitHub 项目主页

下载最新版本

如果在使用过程中发现问题,或者希望增加新的功能,可以通过 GitHub Issues 提交反馈。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇