[Resolved] Audio CSS

[Bill]

Hello,

This may be asking to much but I would like to utilize the HTML 5 audio function.

I would like to use the speaker character 🔊 and play audio “on click.” much like this example.

I am having linking the audio to the text and it looks like there is come CSS that I do not know how to create.

Do you have any idea how to do this or where I can go find more information?

Thank you,

Bill

[Tom]

Hi Bill,

How far have you gotten? Is the link working, but you need helping adding the speaker icon?

[Bill]

Not very far at all, honestly.

You have to use: “data-src-mp3=”https://www.example.com/test.mp3” to make this function work but that is call I got. Sorry, like I said. Probably a bit outside your purview.

[Tom]

Hmm, in that case, it may be easier to use a plugin which does all the heavy lifting for you?

Check this one out: https://wordpress.org/plugins/wp-miniaudioplayer/

[Graham]

I spent all day yesterday trying to install an audio player plugin that works. I discovered during my Googling that WP has an inbuilt one, which overrides much of what the plugins are trying to do.

Many of the plugins I tried either didn’t work or were a nightmare to use in a post, because the shortcode had to be in DIV tags, with the need to clear floats if you want to add further text after the shortcode.

The one I have installed at the moment is: Simple Audio Player

It has a few bugs, but works in both Firefox and Chrome, and there are no problems adding extra text. On mobile devices, you get a fallback to the default WP version. That happened with every plugin I tried. Their support page gives good examples of what you can put in your shortcode.

It appears that using an audio player is not as easy as it should be, because of the default one that WP introduced in 3.6. Since any changes you make to their CSS or JS would be overwritten when WP updates, you are snookered.

[Tom]

Definitely room for improvement when it comes to HTML5 audio players in WordPress.

Glad you found one that is working for you – thanks for posting it here! I’m sure others will find it very useful 🙂

[Graham]

I finally found an mp3 player that works properly, both on desktops and mobiles.

It is not listed at WP but can be found here.

The free version is not crippled, and you simply create a “player” for each mp3, be it in your media library or at a URL.

As you can see from the examples, there is a wide variety of ways to display your “player”. Once you get the style you want, you simply add a shortcode link to your player in your post or page. You can also put more than one player on a page.

It is the only one I have found that actually shows the progress bar on mobiles (although you can’t drag it). Also, you can simply have a button, which was what Bill was originally looking for.

[Tom]

Awesome, thanks a lot for sharing! 🙂

[Author]

Posts