XPlayer使用指南

Posted by TH911 on November 9, 2024

项目地址 演示地址

此文档已弃用,请参考 README.md

简介

一个静态音乐播放器。

作为一个从来没学过html/css/js的人,我想能写成这样已经很好了。

使用方法

访问项目地址即可,在 /XPlayer 后可以加上 /#1,表示播放第一首歌曲,同样有 /#2/#3/#4 等,但注意如果超出了歌曲总数,或是小于 $1$,那么会随机跳歌。

如:/#0

随机跳歌

链接

建议使用 /#0,因为曲库会不定期更新。

自动

image-20241124163206574

键盘操作

  • 空格:暂停/继续播放。
  • $\uparrow$:上一首。
  • $\downarrow$:下一首。​​

  • $\leftarrow$:快退 $10s$。
  • $\rightarrow$:快进 $10s$。

MediaSession API

XPlayer 引入了 MediaSession API,支持锁屏歌词。

Chrome 示例:

IOS 示例:

bd98a618bad6574ed6beede44389537

滚动歌词

基于独立的 .lrc 文件,而不是解析 .mp3 文件。

字体

提供六种字体:默认方正舒体楷体宋体华文楷体幼圆

提供 woff2woffttf 格式的字体,使用旧版浏览器可能导致加载速度缓慢(ttf 格式字体文件较大)。

搜索歌曲

搜索歌名、歌手和编号,不包括专辑,不区分字母大小写。

效果图:

移动端适配

响应式设计。

效果图