是否可以使用媒体密钥来控制网站?
Is it possible to use media keys to control a website?
我正在构建一个包含音频播放器的网站。我怀疑这是不可能的,因为我没有看到这样做的网站,但是有什么方法可以让用户使用键盘上的媒体键(即暂停、播放、停止、跳过)来控制我的播放器?
自从我构建播放器后,我只需要检测这些键的按键或按键事件,其余的应该很简单。
理想情况下,跨浏览器解决方案会很好,但即使它只适用于某些浏览器,为支持这些键的浏览器添加此功能也会很好。
或者,如果出于任何原因这是一种不好的做法,请告诉我!
Media Session API 可让您在浏览器中监听媒体键事件:
navigator.mediaSession.setActionHandler('play', () => console.log('play'));
navigator.mediaSession.setActionHandler('pause', () => console.log('pause'));
navigator.mediaSession.setActionHandler('seekbackward', () => console.log('seekbackward'));
navigator.mediaSession.setActionHandler('seekforward', () => console.log('seekforward'));
navigator.mediaSession.setActionHandler('previoustrack', () => console.log('previoustrack'));
navigator.mediaSession.setActionHandler('nexttrack', () => console.log('nexttrack'));
不幸的是,目前看来只有 Chrome 实现了它。
我正在构建一个包含音频播放器的网站。我怀疑这是不可能的,因为我没有看到这样做的网站,但是有什么方法可以让用户使用键盘上的媒体键(即暂停、播放、停止、跳过)来控制我的播放器?
自从我构建播放器后,我只需要检测这些键的按键或按键事件,其余的应该很简单。
理想情况下,跨浏览器解决方案会很好,但即使它只适用于某些浏览器,为支持这些键的浏览器添加此功能也会很好。
或者,如果出于任何原因这是一种不好的做法,请告诉我!
Media Session API 可让您在浏览器中监听媒体键事件:
navigator.mediaSession.setActionHandler('play', () => console.log('play'));
navigator.mediaSession.setActionHandler('pause', () => console.log('pause'));
navigator.mediaSession.setActionHandler('seekbackward', () => console.log('seekbackward'));
navigator.mediaSession.setActionHandler('seekforward', () => console.log('seekforward'));
navigator.mediaSession.setActionHandler('previoustrack', () => console.log('previoustrack'));
navigator.mediaSession.setActionHandler('nexttrack', () => console.log('nexttrack'));
不幸的是,目前看来只有 Chrome 实现了它。