Automattic / Automattic/jetpack
(5P) Podcast Player - utilise MediaSession API to provide rich device controls
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
The Podcast Player Block is playing media in your browser. There is a new browser API called the [Media Session API](https://developer.mozilla.org/en-US/docs/Web/API/MediaSession) which lets users know what's currently playing in their browser and allows them to control it via in-device controls without actually returning to the page.
This is particularly effective on mobile devices where you can play/pause from the lock screen just as you could if you were using an "app" such as Audible.
This would allow users to embed a Podcast into a page and their visitors could play the podcast from that page and "lock" their device and still have the Podcast play and be able to control via the in device controls on the lock screen.
#### Describe the solution you'd like
Here's a screen capture of using the new API to provide rich controls on Chrome Desktop for the Podcast Block:

I'd like to see this block take advantage the full Media Session API spec to cover the following handlers exposed by the API:
```
[
['play', () => { /* ... */ }],
['pause', () => { /* ... */ }],
['previoustrack', () => { /* ... */ }],
['nexttrack', () => { /* ... */ }],
['stop', () => { /* ... */ }],
['seekbackward', (details) => { /* ... */ }],
['seekforward', (details) => { /* ... */ }],
['seekto', (details) => { /* ... */ }],
];
```
#### Describe alternatives you've considered
An alternative might be not doing this at all because it's currently [only supported in a few browsers](https://caniuse.com/#search=Media%20Session):
* Chrome - desktop.
* Chrome - android mobile.
* Edge.
However, it is a progressive enhancement so we can apply it cleanly without having to worry about backwards compatibility.
#### Additional context
I recommend reading [this article for a good overview of the API](https://web.dev/media-session/).
Contributor guide
Assessment
This issue has not been assessed yet.