音乐空间

更新网页音乐播放

博客音乐播放器地址：https://music.hcyhub.com

这是我的在线音乐播放器界面，同时还有一个导航页：

这简洁优雅的界面，看着太舒服了，加加减减，还是现在这简约的风格好看，里面有星露谷物语、戴森球计划、三伏的原声音轨，还有改编于星露谷物语音乐的催眠曲，完美。

已经开源https://github.com/2010HCY/web-music-player

2026.2.28更新

今天把前几天更新一起推送了，本次大更新同样是把音乐空间做成了SSG网站方便更新维护，并给音乐空间加上了导航栏、页脚，关于页和友链页 没错我是CV Flash收藏站的模板的，并加入了搜索功能，可以搜索指定曲目或专辑、章节，然后一键跳转播放。没错搜索JS也是我直接拿Flash收藏站的改的。

音乐空间也建立了一年多了，陆续上线了20个游戏的原声音轨，一开始它叫原声音轨播放网站，现在改名叫音乐空间了，因为未来我将不再局限于游戏的原声音轨，会加入更多好听的音乐分类，同时播放页也会改改，使其能够往下滚动查看更多介绍。

原先开源的项目就一个HTML页面，未来可能会考虑把SSG生成器模板文件整理放上去。

2026.3.17更新

这是以前的移动端样式，因为是直接沿用了 PC 端的横向布局思维，完美踩着了移动端横向宽度受限的缺点，空余大量的纵向空间，所以我改了，改成了下面的样子：

新版移动端样式采用上下布局充分利用每一寸空间，同时，还给播放页丰富了页面内容：

加入了全站统一的页首页脚，方便返回首页（怎么说呢，虽然浏览器自带后退按钮，但是网站在方便的位置加一个返回按钮仍会大大提升使用体验。），试着往下滑还能解锁评论区，今天暂时只想到这些，有空继续添加页面元素。

2026.4.21更新

新增了显示曲目时长，更完善，同时新增了预加载功能，曲目播放到最后15秒时灰预加载下一首音乐，尽可能使得音乐不停气氛不断。

2026.4.22更新

先来看两张更新前后的界面对比：

更新前（浏览器默认 audio 播放器）：

更新后（纯 DOM 重构的自定义播放器）：

如果我不说，在视觉上是不是几乎看不出任何差别？—— 而这正是本次重构的精髓所在。

在过去，我使用的是浏览器原生媒体控件，实现起来极其简单，仅需一行代码：
<audio id="audioPlayer" class="progress-bar" controls="" src="/api/music/Alto/Alto's Adventure/01 Alto's Theme.mp3"></audio>

但原生的便捷也带来了致命的缺点：扩展性为零。原生播放器的 UI 是由浏览器底层封闭的 User Agent Shadow DOM 渲染的，这导致它的下限极低（一行代码就能用），但上限也完全被锁死——它有且只有这一种固定形态，我根本无法往里面塞入任何自定义的功能按钮。

为了让播放器支持单曲循环、随机播放等功能，我不得不使用DOM从零复刻一个播放器。我禁用了原生控件，完全使用纯 div、SVG 图标，从零复刻了一个长得和原生 Chrome 播放器一模一样的 UI 外壳。

这套纯 DOM 方案在视觉和交互（如音量条悬浮展开）上做到了完美还原，让我以后可以添加更多的功能。效果非常完美，这是重构后的更多菜单：

播放模式设置（现在终于可以单曲循环了！）：

并且，因为样式现在完全是由我定义，所以我可以确保我的播放器在各大浏览器（IE死开）、系统上完全一致了！终于不用在Firefox上看见那丑不拉几的播放器控件了。

更新前：

更新后：

Flash收藏站成立

Flash纪念站地址：https://flash.hcyhub.com

这里面收藏了我小时候最爱的游戏，并且每一个英文游戏都有人工汉化（我亲自汉化）

而且我会同时收录原版，我汉化的版本，能够一键丝滑切换。