Life and freedom Ge Lin ——— Draw by Razzh

Twist-Aplayer 音频播放器

May 21 · 9 min

twist aplayer

Twist APlayer

aplayer 这个项目,喜欢折腾博客的朋友应该或多或少听过吧,twist aplayer 是 aplayer 的 shadcn ui 风格的 React 版本。

听你说 - 梁博

听你说 - 梁博

词:梁博

曲:梁博

你的壳 像钻石一样硬

你的心 软弱到无形

你的事 像风雪里的冰 清醒我至今

只是你 有一点点疼

听你说 听你说你有一点点疼

你觉得 我会不会心疼

每个夜 你提着一盏灯

问我几点钟到黎明

我只能与你同行

先要去感受泥泞

才能够步履轻盈

你看你 小小一个人 为何不害羞

敢去唱这世间风情

听你说 听你说这有一点点疼

你觉得 我会不会心疼

每个夜 你提着一盏灯

问我几点钟到黎明

我只能与你同行

有个人

在阳光下播种

万里粮田为美梦

种下爱驱散乌云和痛

千分之一也敢做

梦里登上过山车

雨里游过了小河

已置换时空

--:-- / --:--
  1. 1听你说梁博
  2. 2避世离俗梁博
  3. 3苦与乐梁博
  4. 4心田梁博
  5. 5安然无恙梁博

#为什么

在我初学前端那会,我的博客园博客中引入了 aplayer,当时就觉得这个播放器很好用,留下了印象,在去年年初做博客重构的时候,我也写了一篇文章说过要在自己的博客中引入 aplayer,然后就拖到了今年😆。

但是,调研了一下 aplayer,它并不支持在 Dark 模式下的暗黑主题,我的博客默认的主题风格就是 Dark 风格,我希望播放器能够自适应适配我博客的主题,所以让我萌生出了自己造一个 aplayer 的想法。

#特性

  • 支持 React 19
  • 移动端适配-迷你模式
  • 支持歌词滚动显示
  • 暗黑和明亮主题切换
  • 通过 CSS 变量自定义样式
  • 支持 SSR
  • 友好的可访问性

此外,aplayer 中使用的 icon 图标都来自我自己写的库: twist-icons 😂,就是想多用用自己写的库哈哈哈。

浙ICP备2024129591号-1
春秋(Live) - 张敬轩
--:-- / --:--
  1. 1春秋(Live)张敬轩
  2. 2不吐不快(live)张敬轩
  3. 3男孩最痛(live)张敬轩
  4. 4粤语残片(live)陈奕迅
  5. 5几分之几(live)卢广仲
  6. 6地球很危险古巨基
  7. 7樱花树下(live)张敬轩

春秋 (Live) - 张敬轩 (Hins Cheung)

词:林夕

曲:Edmond Tsang

那夜谁将酒喝掉

因此我讲得多了

然后你摇着我手拒绝我

动人像友情深了

我没权终止见面

只因你友善依然

仍用接近甜蜜那种字眼通电

没人应该 怨地怨天

得到这结局

难道怪罪神没有更伪善的祝福

我没有为你伤春悲秋不配有憾事

你没有共我踏过万里

不够剧情延续故事

头发未染霜 着凉亦错在我幼稚

应快活像个天使

有没有运气再扮弱者 玩失意

有没有道理为你落发

必须得到世人同意

心灰得极可耻 心伤得无新意

那一线眼泪 欠大志

爱若能堪称伟大 再难挨照样开怀

如令你发现为你而活到失败

令人不安 我品性坏

我没有为你伤春悲秋不配有憾事

你没有共我踏过万里

不够剧情延续故事

头发未染霜 着凉亦错在我幼稚

应快活像个天使

有没有运气再扮弱者玩失意

有没有道理为你落发

必须得到世人同意

心灰得极可耻 心伤得无新意

那一线眼泪 欠大志 太没意思

若自觉这叫痛苦未免过份容易

我没有被你改写一生怎配有心事

我没有被你害过恨过

写成情史 变废纸

春秋只转载要事

如果爱你欠意义

这眼泪 无从安置

我没有运气放大自私的失意

更没有道理在这日

你得到真爱制造恨意

想心酸 还可以 想心底 留根刺

至少要见面上万次