wp-blocks / vinyl

Audio player block for WordPress.

Vinyl Audio

What is this?

A simple audio player block for WordPress Gutenberg.

When should I use this?

This is currently a work in progress. You shouldn't use it yet on a production site. Though if you are interested in this, please try it out and submit feedback and/or a pull request.

The goal of this block is to create a customizable audio player that builds on the functionality of the core/audio block.

Goals

• Replicate the functionality of core/audio.
• Provide transforms to and from core/audio.
• Fully translatable
• Accessible UI
• Customizable UI
• Playlists

Inspiration

• Gutenberg core/audio block from @wordpress/block-library

License

Vinyl Audio is free software, and is released under the terms of the GNU General Public License version 2. See LICENSE.md for complete license.

vinyl's Issues

Fix layout in mobile

The player is layout in a single row, when the container gets too small it should separate the playhead track from other controls and layout in two rows.

On small screens the layout compresses so much the buttons shrink to be too small to see.

Add a global player

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

Fix plugin review issues

• Use exact wording for license in readme.txt and plugin header.
• Include the composer.json file.
• Add links to source code in the readme.txt.
• Include links to media-chrome in readme.txt.

Add translatable labels to the audio player

Problem

The aria-label and aria-valuetext of the media-chrome web components are not accessible from outside the web components, making them unable to use gettext functions.

Solution

Use custom versions of the media-chrome web components, to provide access to the labels.

Create a default audio player theme template

The library media-chrome has a few examples of player theme templates. Of most interest is the Tailwind theme. They are created using a HTML template and referencing it in the media controller.

Screenshots

References

• Introduction to themes
• media-chrome examples
• Tailwind theme preview

Support custom colors

Problem

The default look of the audio player is very basic.

Solution

Add block editor controls to customize the colors of the audio player.

The default should be the theme colors, with the ability to override with a custom selection. They should be global attributes for the player blocks, and used site wide.

Possible issues

The media-chrome library uses custom properties for most customizations. This makes it tricky to use the default blocks supports for color, because they are assigned as background and color styles on the block itself, and we need to assign them to custom properties.

Todo

• Research if there is a filter for block supports color, and if how it applies the colors can be overridden.

Relates to #10

chore: update `media-chrome` to version 3

• Update other dependencies too.
• Bump the minimum supported WordPress version to 6.3 (2 behind the current version).
• @wordpress/* packages should target 6.3.