我的小宝贝播客播放器 Shikwasa,迎来了自己的 2.0 版本。🎊🎊撒花~

Shikwasa 是一款播放器插件,旨在提升在 web 中收听播客的体验。不同于 web 原生播放器或市面上用于播放音乐的播放器插件,使用 Shikwasa 可以进行倍速收听、一键 10 秒进退,更支持展示音频文件内嵌的章节,亦可以使用网站 shownote 来控制播放进度。

目前是 Typlog 和少数派网站在用的播客播放器。

Demo Github

章节

chapter.gif
章节不仅解决“想听哪里”,还解决“我听到了哪里”

传入播客单集的章节数据后,就能展示章节信息。在平台不能把控用户是否提供章节数据时,也有两种方式可以根据章节快速导航至目标时间:

  1. 如果音频文件本身使用 id3tag 嵌入章节信息,可以借助第三方依赖读取数据传给播放器。Shikwasa 内建了对第三方解析库 jsmediatags(可选择性安装) 的支持,不需要额外去处理读取后的元数据就能使用。
  2. 如果不想使用第三方依赖,像 Typlog 这样简单解析 shownote 中的时间戳,并调用 Shikwasa 的方法也可以。

还有一个 bonus:分享带时间数据的链接给朋友时,对方能够直接从分享的时间戳开始收听。拉拢新听众极佳!试着复制下方链接到新标签页试玩=D

https://shikwasa.js.org/#t=03:05

由于 Typlog 并未开启 Shikwasa 的章节功能,可以前往 Demo 把玩。

可用性(accessibility)

视障支持

在入门前端之初就被灌输了可用性之重要。HTML 是一门 markup 语言,既是语言必有语义 (semantics)。全由divspan组成的页面和组件并不少,但私以为这是一种自我中心的狂妄,是对自己以外的世界缺乏同理心的表现——全球22亿视障人士1皆有可能是全凭 screen reader 浏览网页的用户。打开 VoiceOver 或浏览器 screen reader 闭上眼感受一番,就能体会没有图形界面的 web 是多么的混乱而丑陋。

而播客或许是视障人士接收信息的一个很好的渠道,因为它排除了操作障碍。 无论如何,对可用性的关注贯穿了 Shikwasa 的制作过程。或许屈于兼容性无法使用更前沿的标签,但该补全的 ARIA 信息一概不落,以寄在借助 screen reader 使用播放器时没有太多障碍。(注:HTML 中的 ARIA 可以给网页中的元素标记文字信息,使 screen reader 能够成功转化为文字并朗读。)

markup.png
代码片段:因浏览器兼容问题纠结了很久放弃使用语义正确的<slider>和<progress>,但加了 ARIA role 和其他必备的 ARIA 标记

键盘支持

可用性的另一点是键盘操作支持。写 CSS 习惯一上来就给按钮加个 outline: none 的人不在少数,后果也很明显:只使用键盘浏览网页的用户无法知道当前聚焦在哪个页面元素上。

“但点击按钮后有个外边框真的很丑!”有人会说。

——可是,用鼠标点击 Shikwasa 播放器内任意按钮就不会有边框,但使用键盘导航时一定有边框告诉你当前聚焦的位置喔。

另外使用键盘 PageUp PageDown Home End ⏯︎ 都可以进行播放控制。(⏯︎ 控制需要先进行一次播放后才能生效)。

少了键盘支持,整个插件的体积会减小很多,但还是加了。坚持可用性不是什么伟大壮举,只是遵循了 web 标准中的可感知性和可操作性。有多少人会真正去用这个功能?不知道,可是自己问心无愧就好。

可用性延伸阅读:

  1. WCAG2.1
  2. 产品配色 2.0:使用 HCL 色彩空间替代 HSL 生成配色
  3. 前端的基础素养

Roadmap

后续还想做一个专为分享到社交平台的 oEmbed 用皮肤,突出视觉效果——好在时间轴上能抢点眼球。

想用 Typescript 重构一遍。

欢迎任何 feature request,不过播放列表在很多网站用起来以前或许不会做。

  1. World Health Organization, 2019, World Report on Vision, www.who.int/publications/i/item/world-report-on-vision.