原理比较简单:浏览器有一个 API 叫做 MediaSession,它允许对标准媒体行为进行自定义,例如点击 pause 键时执行什么动作可通过 JavaScript 进行重新定义,利用这个特性,根据不同的按键操作,就可以发送不同的消息指令了,手机和电脑锁屏状态都可以控制。
结合 Picture-in-Picture API 还可以做出更多有趣的事情,画中画允许浏览器打开一个系统级置顶的 Video,很多视频网站也支持了这个特性,为了增加灵活性,又新出了一个 Document Picture-in-Picture API,它支持将任意 HTML 内容放置到这个画中画窗口中,并使用 MediaSession API 来控制窗体内容的交互和呈现方式。
参考摩斯密码发送器项目的实现,能够做的有趣事情就比较多了,例如,可以将耳机改造成幻灯片控制器、游戏控制器,也可以用来控制一个全局置顶的番茄时钟、音乐播放器、视频会议等窗口的交互行为,这里有几个有趣的示例:https://googlechrome.github.io/samples/media-session/index.html