Audio Player Styling
-
I realize that the look of the audio player has changed recently again, and that the clips I’ve created in classic use a player that’s dark, no rounded corners (the older style) Project would rather use the older, dark square player, which I can do by adding the audio in a classic block for now, but if I convert the audio in the classic area to a block, the look changes to the lighter version, which is a big change visually. I’m worried it’ll change arbitrarily at some point as classic becomes less supported. I’m aware that some of this is browser dependent, but I’m curious about how we can have control over this fairly easily without using a plugin. I’m comfortable with css, but don’t want to reinvent the wheel as these styles are already well crafted and easy to implement. Will we have player interface visual choices within this audio block? I’d rather not use a plugin. Screenshot of the two players in chrome, one on top of another, same post: https://pasteboard.co/KcosfXt.png
-
Hi @zignorp. In the classic editor, inserting an audio file results in a player that uses custom controls defined by WordPress. The Audio block, conversely, uses a plain
<audio>element with the browser’s default controls. Different browsers will render<audio>in a different way.Browsers have limited support for styling an
<audio>element. It might be enough for your needs though. This article explains some of what you can do.https://pointclearmedia.com/2020/08/27/css-styling-the-audio-element/
Option B is that you could use the
render_blockhook to intercept the frontend markup generated by the Audio block and use your own markup that does not use the native browser controls. (That is, use<audio>without<audio controls>.)https://developer.wordpress.org/reference/hooks/render_block/
Option C is that you can continue to use the classic block. It’s not going away anytime soon 🙂
- You must be logged in to reply to this topic.