hlx 发表于 3 天前

<昭>HTML音乐播放器


​动态粒子核:首页中间是用 Canvas 写的呼吸粒子,放音乐时会跟着节奏动。
​切歌全局变色:切换不同歌曲,整个网页背景、进度条、发光环会自动变成对应的色彩!
​双形态播放器:底部悬浮胶囊 + 点击展开沉浸式全屏播放卡片。
​智能跑马灯 & 拖拽进度条:歌名太长会自动平滑滚动,手机电脑拖进度条都很流畅。
​支持搜索&列表抽屉:可以按歌名、下架原因搜歌曲,还有侧滑播放队列。
​暗黑虚空美学 (Void Aesthetic)
​动态 Core 渲染:HTML5 Canvas 实时绘制呼吸粒子核心,支持随音乐播放状态(播放/暂停)智能变速与变频。
​氛围与主题色彩联动:播放不同曲目时,背景 ambient-bg、播放器核心光晕、进度条与音浪环会自动依据曲目 RGB 颜色全局变色。
​CRT 贴图与故障风 (Glitch Effect):内置极轻量的 CRT 纹理遮罩与 CSS Glitch 动画,营造信号断连与微弱接收的档案馆氛围。
​极致的播放体验 (Full Audio Integration)
​全局双态播放器:支持底部悬浮微型胶囊 (Mini Player) 与 沉浸式全屏卡片 (Modal Player) 无缝联动。
​智能自适应跑马灯 (Smart Marquee):可精确检测曲目标题宽度,仅在文本溢出容器时自动开启无缝循环滚动,并支持 Hover 暂停。
​全端流畅拖拽进度条:优化 Mouse & Touch 事件,精确计算缓冲与滑动预览,解决移动端与 Web 端拖拽卡顿问题。
​动态曲目队列抽屉 (Playlist Drawer):内置展开式频段队列,支持一键切换曲目。
​模块化与档案检索 (Archive & Search)
​关键词实时检索:支持按 ID、曲名、下架原因、频段(432Hz等)实时过滤档案卡片,附带匹配计数器。
​网格自适应折叠:档案卡片提供“CORRUPTED_FILE”悬浮角标,并根据数据量(超过 12 条)自动触发平滑折叠/展开动画。
​投稿/寻回弹窗:内置轻量弹窗,支持一键复制微信号,建立社区与用户之间的音频收录通道。
开源地址:https://github.com/AnTuYa/---
拿走吱声长20cm[滑稽]

http://cdn.u1.huluxia.com/g4/M01/98/E6/rBAAdmpiSqKAXe8GAACzrd1I-Bk546.jpg
http://cdn.u1.huluxia.com/g4/M01/98/E6/rBAAdmpiSqOATsZcAADxT2kXLEQ211.jpg
http://cdn.u1.huluxia.com/g4/M01/98/E6/rBAAdmpiSqSAVxC3AACtZql6918700.jpg
http://cdn.u1.huluxia.com/g4/M01/98/E6/rBAAdmpiSqWAeywcAADUOTSCGhg057.jpg
http://cdn.u1.huluxia.com/g4/M01/98/E6/rBAAdmpiSqWAWJJlAACw4o9pNXQ053.jpg
页: [1]
查看完整版本: <昭>HTML音乐播放器