Shikwasa 2.0

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

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

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

Demo Github

章节

章节不仅解决“想听哪里”，还解决“我听到了哪里”

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

如果音频文件本身使用 id3tag 嵌入章节信息，可以借助第三方依赖读取数据传给播放器。Shikwasa 内建了对第三方解析库 jsmediatags(可选择性安装) 的支持，不需要额外去处理读取后的元数据就能使用。

如果不想使用第三方依赖，像 Typlog 这样简单解析 shownote 中的时间戳，并调用 Shikwasa 的方法也可以。

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

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

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

可用性(accessibility)

视障支持

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

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

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

键盘支持

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

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

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

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

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

可用性延伸阅读：

WCAG2.1

产品配色 2.0：使用 HCL 色彩空间替代 HSL 生成配色

前端的基础素养

Roadmap

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

想用 Typescript 重构一遍。

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

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