奇趣播放器

奇趣播放器

简洁而强大的前端音乐播放器,支持添加在线歌曲、歌词解析和拖拽本地音乐播放

  • 项目类型:网站
  • 项目所属:个人
  • 担任角色:创建者
  • 技术栈:HTML、CSS、JavaScript
  • 创建日期:2017-09-01
  • 维护情况:正常

Kico Player 是一款外观简洁、功能强大的前端音乐播放器。引用方便,只需要一个 JS 和 CSS 文件即可快速开始。

这是我第一个自己编写的音乐播放器项目,2017 年完成第一个可用版本。采用 ES5 语法,代码方面部分参考过同时期的一个热门开源项目 APlayer,并在此项目中改善了性能。UI 方面均为自己设计,早期版本的程序迭代与界面调整较大,可移步阅读 Kico Player 回忆录 这篇文章。

项目特点

  • 采用 ES5 编写,纯 DOM 操作,运行性能良好

通过项目学到了什么

  • 获得使用 Audio 相关 API 的经历
  • 更加熟练的操作 DOM 及相关事件的监听
  • 通过编写歌词解析算法的需求,初步学习了正则相关知识

有哪些值得介绍的经历

项目的歌词解析算法调整过不少次,至今仍存在一些问题(例如一条歌词存在多时间轴的情况下还无法进行解析),但绝大多数音乐的歌词并不会这样编写,也算是变相避开了这个问题吧...

这个项目至今(2023)快 6 年了,结果我发现这些代码写的还出奇的不算太差,是我的成长空间小了,还是当时写的的确不错呢,你们也可以阅读一下源码,大体还是足够清晰,存在很久的 Bug 我现在居然也能轻松定位出来并修复。

截图截图截图
奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君