Featured Audio Gutenberg Block

[rawdolphe]

What problem does this address?

We've always had the Featured Image, but still no Featured Audio and it's 2024 already... Music / Audio features have always been neglected in WordPress core. There are musicians out there, loads, and podcasters, as well as photographers and short film makers - not just bloggers who use texts only. Some of use want to have an audio snippet in the Query Loop / Archives / Excerpt (I can achieve this already in case you ask, but it's less than ideal and not straight forward to setup).

There is a Featured Audio plugin in the Repository, but it's very very limited, it has no Gutenberg Block, you need extra code to position it exactly where you want, and it lack features.

So I propose the following. Please see below:

What is your proposed solution?

My proposed solution:

1. A new Featured Audio Gutenberg Block that can be inserted in the Query Loop / Archives and/or excerpts, just like the Featured Image...
2. IMPORTANT: The Audio Player should look the same in all browsers, to keep visual consistency especially when used in the Query Loop.
3. This would be a simple Audio Player and NOT a playlist, as you wouldn't want to display playlists in a Query Loop.
4. We should be able to strip down the player to the bare minimum for the intended purpose, i.e; Play/Pause button and scroll bar only. That's it, no download, no timing or extra bloats as you need to keep it simple in a grid / archives.
5. As '4' it should it should be easy to style, as there would only 3 x elements: Play/Pause, Scroll bar and Background colours.
6. Ideally the player would have a 'Lazy Load' option with the Pre-load on / off...

All the simple Audio Players are gone from the repository, most are bloated with tons of features, and playlist...

What I propose is very simple; a very light weight Gutenberg Block Audio Player, that can be used as a Featured Audio player in the Query Loop / Archives, and in Excerpts would be a nice option.

There isn't one out there. And in case you ask; I am not a coder otherwise I would have built one already.

[justintadlock]

@rawdolphe - Can you provide more feedback on what you'd like to see?

[rawdolphe]

@justintadlock - Yeah, but something went wrong here! I spent an hour explaining it yesterday and then after hitting submit it was all gone—ended up with a blank post! So I'll try again.

The audio side of WordPress has always been neglected in the core build, and I was explaining that there are loads of musicians out there as well as podcasters, and not just photographers, or bloggers who mainly use words or images.

The problems today (the year is 2024...):

1. Currently the audio player has a different appearance in different browsers / not consistent.
2. When adding several Audio Blocks on the same page (or in Archives / Query Loop), if you start a player, then start another one (hit play), the previous player doesn't stop. So this is very annoying if you have over 20 players on the same page.
3. All the good simple audio players are gone from the WordPress repository, nowadays the developers focus on having Playlists, tons of options in the back end, added images etc... I'll explain further what is needed.
4. I have purchased several premium audio players over the years, some of these have a lifetime license, guess what? I won't be using any of them, they are all bloated full of bling, heavy code in the back end etc...
5. There is a Featured Audio Player plugin in the WordPress depository, but you need to know/ learn code to position it where you want (no Gutenberg Block) - 'out of the box' it is very limited, but a wonderful idea that could be implemented in WordPress. In fact, as we speak, I am building my site exclusively with 2024 (been on it since Christmas), and I am very impressed with theme and for now will be using the Featured Audio Player as a temporary fix.
6. I asked chatGPT 3.5 to help me style the native Audio Block, it was impossible. Unfortunately the AI was last implement in December 2022, I actually asked the question.
7. With the help of chatGPT I was able to solve the problem mentioned in section '2' above, but decided to not use the player because it was not possible to style it. I even got some script to add Lazy load to the native player.

My proposed solution:

1. A simple Featured Audio Player Block, that will only play one file at a time, NOT for playlists, just like the Featured image is NOT a Gallery.... with a very light code and simple interface.
2. The Player would have the option for bare minimum in the layout, i.e; Play / Pause and scroll bar—because, we would want to display the Featured Audio Player Block in an Archive / Grid / Query Loop, so if you ended with 5 or 6 columns (or more...) the player would become very narrow and you wouldn't want download / timing options.
3. The Audio Player should be easy to style, and look the same in ALL browsers.
4. When several Players are on the same page, playing / starting one will stop/pause the previous player.
5. A Lazy Load option, so when you have several players in an archive they would only load or pre-load as needed, and of course, still with the current option to load or not load the data.

So, we have a Featured Audio Player Gutenberg Block, we can add it to the Query Loops, same as we do for Featured Image, Post Title, Content etc...

To summarize and for the record, I have already achieved the above with the 2024 theme and Nick's Featured Audio Player plugin from the WordPress repository, but it's very far from ideal.

I would be happy to beta test and to advise, if something like that could happen.

[talldan]

@rawdolphe You accidentally added your comments within the HTML comments that appear by default in the description (e.g. <!-- An HTML comment -->), which makes them not appear. Don't worry, it's not just you, it happens a few times.

I've edited your description to remove the HTML comments.

[rawdolphe]

Thank you @talldan - sorry about that!

[creativecoder]

I also really want the ability to use featured audio (and video) for posts!

Before building a new block, I think there is some preliminary work needed to expand the existing featured image functionality so it works with other media like audio an video. That way a new block (or a update to the Featured Image block) integrates with the existing feature rather than overriding or working around it.

See https://github.com/WordPress/gutenberg/issues/27617

[talldan]

That way a new block (or a update to the Featured Image block)

Using block bindings with the existing video/audio block is also an option here. 'Featured video' / 'Featured audio' blocks could be added as variations of the core video/audio blocks with bindings to the featured media already configured.