一个开源的轻量级 HTML5 前端悬浮音乐播放器组件，基于 JavaScript + HTML5 ,可简单挂载到任意 HTML 页面。配置自定义音源，不依赖任何后端解析API，支持浏览器本地解析音频元数据。
-
演示：music.无名.top
-
使用了 jsmediatags 做音乐标签解析
取决于浏览器，通常支持 mp3，mp4，ogg，aac，flac 等
支持 mp3，flac，m4a，mp4 等
需要音频文件中包含标题/封面/歌词等标签元数据，如何为音频文件一键补齐标签元数据见文档最后
将播放器配置代码添加到 HTML 页面 </body> 标签上方，或其他合适的位置：
<script>
window.MUSIC_PLAYER_CONFIG = {
musicDir: 'https://music.xn--eqrr82b.top/music',
files: [
'ヨルシカ - 老人と海.mp3',
'ヨルシカ - だから僕は音楽を辞めた.mp3'
],
jsmediatagsPath: 'https://cdn.jsdelivr.net/gh/flyingiceyyds/HTML5-Mini-Music-Player@main/jsmediatags.min.js',
};
</script>
<script src="https://cdn.jsdelivr.net/gh/flyingiceyyds/HTML5-Mini-Music-Player@main/MiniMusicPlayer.min.js"></script>这是一段配置好的播放器引入代码，插入即可用，关于播放器配置请看下文
建议使用此方式，加载本地/同域音频文件，避免音频资源跨域问题以及中国大陆地区访问公共 CDN 资源缓慢
将 MiniMusicPlayer.min.js 与 jsmediatags.min.js 下载到自己的服务器上
<script>
window.MUSIC_PLAYER_CONFIG = {
musicDir: '音乐文件所在目录',
files: [
'音乐文件名称a.mp3',
'音乐文件名称b.mp3'
],
jsmediatagsPath: '<jsmediatags.min.js 文件Url/所在路径>',
};
</script>
<script src="<MiniMusicPlayer.min.js 文件Url/所在路径>"></script>同样将播放器配置代码添加到 HTML 页面 </body> 标签上方，或其他合适的位置即可，注意js文件路径
具体完整示例可见 index.html 尾部
<script>
window.MUSIC_PLAYER_CONFIG = {
musicDir: 'https://music.xn--eqrr82b.top/music',
files: [
'ロクデナシ MIMI - ただ声一つ.mp3',
'ナツノセ 沖石 - アノマリー.mp3',
'トゲナシトゲアリ - 蝶に結いた赤い糸.mp3',
'ずっと真夜中でいいのに。 - あいつら全員同窓会.mp3'
],
playlists: [
{ id: '1', name: '歌单：ヨルシカ', files: [
'ヨルシカ - 老人と海.mp3',
'ヨルシカ - だから僕は音楽を辞めた.mp3',
'ヨルシカ - 詩書きとコーヒー.mp3',
'ヨルシカ - 八月、某、月明かり.mp3',
'ヨルシカ - 盗作.mp3'
] },
],
jsmediatagsPath: 'https://cdn.jsdelivr.net/gh/flyingiceyyds/HTML5-Mini-Music-Player@main/jsmediatags.min.js',
playFilesFirst: false, // 是否优先播放files中未分类音乐
loopCurrentList: false, // 列表循环是否只循环当前歌单
autoLoadEqPreset: true, //是否自动加载EQ预设
autoLoadEqPresetId: 'rock', //自动加载的EQ预设id
};
</script>
<script src="https://cdn.jsdelivr.net/gh/flyingiceyyds/HTML5-Mini-Music-Player@main/MiniMusicPlayer.min.js"></script>这是完整可用的播放器引入+配置代码，加在任意 HTML 页面即可使用。通过 CDN 加载js文件，加载网络音频资源文件
-
musicDir：音频文件存放目录，可以是网络URL或本地路径（如
./music），将.mp3.mp3等音频文件全部放进此目录即可，无需分类。[建议使用本地/同域名路径] -
files：没有被分类进歌单的音频文件，这里配置的音频文件会在播放器播放列表根目录显示
-
playlists：歌单配置，可以创建多个歌单，分类音频文件，格式：
playlists: [
{ id: '1', name: '歌单1', files: [
'音乐1.mp3',
'音乐2.mp3',
] },
{ id: '2', name: '歌单2', files: [
'音乐a.flac',
'音乐b.flac',
] },
],注意：files 与 playlists 中配置的为音频文件名，带后缀，音频文件需存在于 musicDir 配置的目录中
-
jsmediatagsPath：
jsmediatags.min.js文件路径，可使用 CDN 或放到服务器本地加载（如./jsmediatags.min.js） -
playFilesFirst：是否优先播放
files中配置的未分类音乐，为false时优先按顺序播放歌单，否则先播放未分类音乐再播放歌单 -
loopCurrentList：列表循环是否只循环当前歌单，为
true时点击播放任意歌单中的音乐，只会循环播放此歌单，不会跳到其他歌单 -
autoLoadEqPreset：是否自动加载 EQ 预设，为
true时播放器加载将自动加载配置的 EQ 预设 -
autoLoadEqPresetId：自动加载的 EQ 预设 id（来自内置 EQ 预设配置），
autoLoadEqPreset配置为true时生效
在 MiniMusicPlayer.js 或 MiniMusicPlayer.min.js 头部配置，示例：
/* 内置 EQ 预设 */
const EQ_PRESETS = [
{ id: 'treble', name: '高音增强', gains: [-3, -2, -1, 0, 0.5, 1.5, 3, 4, 5, 5] },
{ id: 'bass', name: '低音增强', gains: [5, 4, 3, 1.5, 0, -1, -1.5, -2, -2.5, -3] },
{ id: 'rock', name: '摇滚 (Rock)', gains: [3.5, 2.5, -1, -1, -1.5, -0.5, 0, 2, 4, 5] },
{ id: 'pop', name: '流行 (Pop)', gains: [4, 3, 1, 0, 0.5, 1.5, 2.5, 3.5, 4, 4.5] }
];音乐标题/封面/歌词等数据通过解析音频源文件中的标签元数据得到，所以需要音频文件中包含这些数据，播放器才能正常解析显示。
大多数网络下载的音频文件只包含标题/封面，不包含歌词，通常需要使用工具补全
这里使用 Windows PC 端工具 MusicTag 演示，其他同类工具均可
https://wwbdu.lanzouv.com/i7tzh3iqn9je
首先设置歌词格式，用作翻译解析
载入音频文件，选中一键批量匹配即可
歌词需使用 LRC 时间轴格式，示例：
[00:01:00]第一句歌词
[00:01:30]第二句歌词
如果歌词包含翻译，使用此格式：
[00:01:00]第一句歌词
[00:01:00]第一句歌词翻译
[00:01:30]第二句歌词
[00:01:30]第二句歌词翻译
如果 musicDir 配置为非本地/非同域名的网络路径，可能出现音乐无法播放/封面歌词加载不出来等问题，此时需要在音频文件所在站点配置跨域 header ，可参考此储存库 vercel.json 中配置的 headers
1.在 GitHub fork 此储存库
2.在 Vercel 创建新项目，导入 GitHub 储存库，按照默认配置一键部署
3.为项目绑定自定义域名，避免默认分配域名在中国大陆部分地区无法访问
此储存库中 music 目录中的音频文件来自网络音乐论坛分享，仅做展示参考
对此储存库中内容存在疑问，请联系 ceo@xxidc.top