由 ChatGPT 及 Gemini 生成的纯 HTML 音乐可视化播放器

该「Web版音乐可视化播放器」,基础框架由ChatGPT生成,配合Google Gemini的改进而成。前后修改数十次,终成本版。

Demo

截图

PC版布局:

手机版布局:

功能介绍

音频可视化

根据音频的波动展示相应的动态画面,包括四种效果:

  • 条形图
  • 波浪图
  • 组乐圈
  • 粒子泡泡

歌词

  • 展示完整的歌词
  • 当前播放的行高亮显示

倍速播放

可调节为:

  • 0.8X
  • 1.0X
  • 1.2X
  • 1.5X
  • 2.0X

播放/暂停控制

可通过以下方式控制播放/暂停

  • 点击页面空白处(不含歌词所在的遮罩)
  • 空格键

完整的html代码

目录结构:

HTML目录/
├── index.html ← 文件内含以上html代码
└── file/
    ├── 孙姿吟-好久没有你的信.mp3
    └── 孙姿吟-好久没有你的信.lrc