Add a global player

[johnhooks]

As a knowledgeable block editor user, I want a global player block, so that users can initiate playing audio from multiple sources, though only have one possible audio source playing.

Problem

The current implementation of the audio player block is standalone, each has it's own source and player controller. This means the details of what is playing are lost when the element is scrolled away from, also it would need to be found again in order to mute or pause (there are some browser controls for this, though not super intuitive).

Solution

Add a global player that would remain at a fixed location on the screen and would follow the user, providing information about what is playing and access to player controls.

Thoughts

• This would require adding a more complex player state.

• Allows adding playlists and player queue.

• If the player were to use the Interactivity API, and the website use the interactive navigation, the player state would remain consistent between page navigation, allowing an uninterrupted experience.

• This could allow the player to queue "up next" or push the new audio in front, keeping the location of the previous audio for when it is resumed.

References

• syntax.fm - Has a global player and it was created using media-chrome (it was the inspiration of the idea of adding this to the Vinyl audio player).
• Interactivity API Demo - WP Movies - This project has a global video player very similar in concept to this idea.
• Interactivity API in 6.5 - A blog post about the addition of the Interactivity API to WordPress 6.5
• @wordpress/interactivity Documentation