Automattic / Automattic/jetpack

(5P) Podcast Player - utilise MediaSession API to provide rich device controls

Open
#15,131 1 comment 3 reactions 1 assignee Claimed by @getdave View on GitHub
[Block] Podcast Player Enhancement
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:

![Screen Capture on 2020-03-26 at 10-46-56](https://user-images.githubusercontent.com/444434/77638751-90c2b380-6f4f-11ea-8dba-21e48dfe3bcb.gif)

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.