Quantcast
Channel: Beginners Guide & Tips for Wordpress » Plugins
Viewing all articles
Browse latest Browse all 10

HTML5 jQuery Audio Player WordPress Plugin

$
0
0

This trendy looking music player lets you add a single audio track or a full playlist to your WordPress site using shortcode. You can customise the colours of the player, and also display ratings, album cover art, and buy/download link if needed. This audio player is different from others on offer because it works on all major browsers, both PC and Mac, and on mobile devices including iPhone/iPad. Plus it looks really cool!

Key Features

  • Supports mp3 and ogg file formats
  • Attractive and customisable design
  • HTML5 based player with Flash backup
  • Works in all major browsers – IE7, IE8, IE9, Safari, Firefox, Chrome
  • Works on mobile devices including iPhone/iPad
  • Can enable Buy or Download tracks button – tutorial here
  • Autoplay on/off option
  • User ratings on/off option
  • Add the player to any post/page using shortcode [hmp_player]

INSTALLATION

  1. Upload the html5-jquery-audio folder to the /wp-content/plugins/ directory
  2. Activate the HTML5 jQuery Audio Player plugin through the ‘Plugins’ menu in WordPress
  3. Configure the plugin by going to the HTML5 Audio Player menu that appears in your admin menu
  4. Add the player to any post/page using shortcode [hmp_player]

FAQ

I’m having problems adding mp3 files – they won’t play.

The plugin supports mp3 and ogg files. You need to upload both an mp3 and ogg version of each track in the playlist. Please also check your files are encoded correctly, and confirm that your file paths are correct. jPlayer sometimes has problems with relative urls so make sure you’re using the absolute paths.

How can I convert my files to mp3 and ogg?

There are heaps of free conversion tools available – run a search. Personally, I use Goldwave.

The songs won’t play

If the play button flashes then goes back to pause then this is likely a Mime type issue. Particularly affects Firefox. It can be solved by adding the following lines to your htaccess file:

AddType audio/ogg ogg
AddType audio/ogg oga
AddType video/ogg ogv
AddType video/mp4 m4v

It’s not working in browser xyz – can you help?

The plugin is designed to work on all major browsers, both PC & Mac, and on mobile devices including iPhone/iPad. If it’s not working for you, try adding the Mime types above to your htaccess file.

Something wacky is happening for me (eg it breaks site, breaks another plugin, looks crazy and/or doesn’t work!) – what’s wrong with it?

The most common problem is a jQuery conflict. In short, if your theme loads jQuery library, then other plugin/s (like this one) also load jQuery then it can cause serious grief on the site and things start breaking. The solution is for all plugin developers and WordPress theme creators to use the copy of jQuery which is included in the WordPress core or load it from Google AJAX libraries, and to consider also using the noConflict jQuery mode (this plugin does all that). If you’re having jQuery conflict problems on your site then the most likely culprit it your theme. Read this article by Chris Coyier which explains the issue in more detail and outlines how you can fix it. You might also like to check out suggestions from Eric Martin on the topic.

How do I use it in a widget?

Pro Version has a nice widget function – go to Appearance > Widgets and if the plugin is activated you will see a custom widget which you can drag into your sidebar. Be aware that you can’t run two instances of the player on the same page, so if you’re using it in the sidebar make sure you don’t also add a different player to a page where the sidebar shows.

Is there a way to easliy replace the ‘Buy’ button with ‘Download’ button?

Yes! Set the buy text option to Download, leave currency field & song price field blank, and set the buy link option on each song to the url of the mp3 or the script that initiates the download.

How can I sell my music using this plugin?

Check the tutorial here

Can I use this on a non-WordPress site?

Yep, sure can. This plugin is just a WordPress version of HTML5 Music Player by Saleem over at Codebase Hero

Are there any known bugs?

  • Conflict with Jetpack plugin
  • Conflict with WordPress SEO plugin
  • PRO Version – Problem with adding more than one player to the same page/post for some users

What features are being added soon?

  • Other language support
  • Import/export csv playlist function
  • On/off button for Artist field
  • Upload media button for mp3/ogg url fields

Where can I get support for this plugin?

If you’ve tried all the obvious stuff and it’s still not working please request support via the forum. Remember to include a link to your site where the player is embedded, and a full description of the issue plus the steps you’ve already taken to try to solve it.

 

SCREENSHOT

  1. html5-jquery-audio-player screenshot 1An example of the inserted player
  2. html5-jquery-audio-player screenshot 2The display settings screen in WP-Admin

Viewing all articles
Browse latest Browse all 10

Trending Articles