- This topic has 7 replies, 3 voices, and was last updated 8 years, 2 months ago by Tom.
July 19, 2015 at 7:17 pm #122235Bill
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?
BillJuly 19, 2015 at 11:18 pm #122271TomLead DeveloperLead Developer
How far have you gotten? Is the link working, but you need helping adding the speaker icon?July 20, 2015 at 1:24 am #122296Bill
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.July 20, 2015 at 6:02 pm #122510TomLead DeveloperLead Developer
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/July 24, 2015 at 10:34 pm #123414Graham
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.July 24, 2015 at 11:52 pm #123424TomLead DeveloperLead Developer
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 🙂July 25, 2015 at 6:42 am #123454Graham
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.July 25, 2015 at 10:00 am #123527TomLead DeveloperLead Developer
Awesome, thanks a lot for sharing! 🙂
- You must be logged in to reply to this topic.