Compact WordPress Audio/Music Player Plugin (All Browser Compatible)

Categories: Wordpress Plugin

The WordPress Audio Player plugin is a compact HTML5 + flash hybrid based WordPress plugin which can be used to play an audio file (.mp3 or .ogg). The audio player is compatible with all major browsers and devices (Android, iPhone).

If you are selling audio files from your site then you can use this plugin to offer a preview
If you do podcasting then this audio player can be used to embed the audio files on WordPress posts or pages
The audio player is compact so it doesn’t take a lot of real estate on your webpage
HTML5 compatible so the audio files embedded with this plugin will play on iOS devices

Audio Player Plugin Screenshot

The following two images show how the audio player looks when it is playing and not playing a music file.

When the play button is clicked, the button will change to a pause button allowing users to pause the music playback.

Audio Player Plugin Installation and Usage

Go to the ‘Add New’ plugins screen in your WordPress admin area
Click the ‘upload’ tab
Browse for the plugin file (sc_audio_player.zip)
Click ‘Install Now’ and then activate the plugin
Use the following shortcode to embed an audio file anywhere on your site

[sc_embed_player fileurl="URL OF THE MP3 FILE"]

Example shortcode:

[sc_embed_player fileurl="http://www.example.com/wp-content/uploads/my-music/mysong.mp3"]

Using Auto Play Option

Use the “autoplay” parameter in the shortcode to play the audio file on page load. Here is an example shortcode with autoplay option:

[sc_embed_player autoplay=true fileurl="http://www.example.com/wp-content/uploads/my-music/mysong.mp3"]

Specifying a Volume Level

Use the optional “volume” parameter in the shortcode to specify a volume level for the audio. You can use a value between 0 – 100 for the volume level. Here is an example shortcode usage:
[sc_embed_player volume="50" fileurl="http://www.example.com/wp-content/uploads/my-music/mysong.mp3"]
The above will set the volume level of the audio file to 50.

Download The Latest Version

Download Version 1.4

Plugin Compatibility

Works with the latest version of WordPress.

Plugin Requires

Requires WordPress 3.0 or higher.

Check out our projects page for more cool WordPress plugins.

#1 by admin on May 4, 2013 - 3:20 am

@D, Check the “Specifying a Volume Level” above to see an example of how the shortcode should look like with volume control parameter.

#2 by D on May 4, 2013 - 3:07 am

Hi thanks, so what would the whole code look like w/the volume parameter added? And the page isn’t live yet (since I need the clips to work for it to make sense) so I don’t have a link…

#3 by admin on May 3, 2013 - 7:48 pm

@D, Have you tried using the volume=”100″ parameter in the shortcode? Can you share a link to the page where you have embedded the audio player?

#4 by D on May 3, 2013 - 5:31 am

Hi, I’m having the same issue as Jerry before me. I download the plugin, record my audio clip and then I have no sound when I preview my post. The URL is OK and plays when I put it in my browser in another window. The player icon is fine and appears in the post as well. Just that nothing plays. Please help!

#5 by admin on April 27, 2013 - 10:28 pm

@JerryC, I would double check the URL of the mp3 file that you are trying to use. If you copy and paste the mp3 file URL in the browser’s address bar, does it work? or does it give you a not found (404) error?

#6 by JerryC on April 27, 2013 - 9:45 pm

I am not a programmer. I am trying to embed sermons in posts on our church Word press site. . I have the MP3 file in the media upload of our site and when I put the url in the code the post looks like it should but the MP3 does not play. I am using the [sc_embed_player as you have it above. any help would be greatly appreciated

#7 by admin on April 25, 2013 - 3:31 am

@Jon, I was actually working on adding a volume option in this plugin. I have just updated it. Download the new version from this page and then check the “Specifying a Volume Level” section to learn how to use it.

#8 by Jon on April 24, 2013 - 2:34 pm

Is there a way to set the audio levels to low. The auto play feature has it playing at whatever the viewers audio level is set at. Can that be set to low as a starting level?

#9 by admin on April 7, 2013 - 6:54 pm

@Dan, open the plugin file then search for the following line of code. Uncomment it and you should be good (you don’t need to add any code yourself):
//soundManager.stopAll();

#10 by Dan on April 7, 2013 - 3:55 pm

Oups i realise my previous comment wasn’t so clear…

it’s for stopping one instance to play when you click on an other one…

this code i found here :

jQuery(‘.myButton_stop’).css(‘display’, ‘none’);
jQuery(‘.myButton_play’).css(‘display’, ‘inline’);
soundManager.pauseAll();

is javascript, so it won’t work in the sc_audio_player.php ! where can i put it ?

#11 by admin on April 5, 2013 - 2:17 am

@Jerrod, do you have a URL of a webpage where I can go and see this error? It is likely that the webpage has other JavaScript errors that is preventing this plugin’s JS code from working correctly.

#12 by Jerrod Long on April 4, 2013 - 11:35 pm

I am trying to utilize your plugin but it isn’t showing either button and I am getting a “Uncaught ReferenceError: soundManager is not defined”

I tried deactivating then reactivating the plugin but that didn’t help.

I am on WP 3.5.1

Thanks.

#13 by Rod on March 30, 2013 - 12:44 am

I solved it by adding the following in my theme’s template file:
if(is_front_page()){ echo do_shortcode('[sc_embed_player autoplay=true fileurl="pathTo.mp3"]'); }

#14 by Rod on March 30, 2013 - 12:03 am

how can i put this plug in on the left Menu in WordPress just in the Fronta Page, i been trying using the “is_front_page()” call, but then how can i show the play and pause button?
Thanks

#15 by Daryl on March 24, 2013 - 9:04 pm

Yes Autoplay is here. Many thanks to you.

#16 by hkey on March 24, 2013 - 7:09 am

Hello again,

with the version 1.3 de autplay function is working fine. Thanks!!

Regards Henk

#17 by admin on March 23, 2013 - 5:46 pm

@Nile, You can add it to the widget by adding a standard text widget to your sidebar then using the mp3 embed shortcode. You can use this plugin to place a player for as many songs as you want. Use the shortcode for each mp3 file you have.

#18 by Nile on March 22, 2013 - 10:57 pm

Also, if someone wanted to have more than 1 song, could they put more than 1 mp3 file?

#19 by Nile on March 22, 2013 - 10:49 pm

Is there a way to implement this in a widget?

#20 by admin on December 17, 2012 - 1:08 am

@Marilyn, Did you try the following?
[sc_embed_player fileurl="URL OF THE OGG FILE"]

#21 by Marilyn on December 16, 2012 - 11:12 pm

So, if I want song samples to play on iPads, etc., as well as Mac & PC, what do I use for the short code? I see how I do the mp3 part:

but what about the OGG?
Thanks!

#22 by Robbieee on November 28, 2012 - 12:49 pm

Nice job Shaun Your play one at a time code works perfectly on my site. For non-programmers like me, the file to insert the the code below is sc_audio_player.php, not the .js files.

#23 by Shaun on November 20, 2012 - 5:04 am

I’ve figured out how to pause the other tracks on the page when you click play on a track. I added these lines after line 30:
jQuery('.myButton_stop').css('display', 'none'); jQuery('.myButton_play').css('display', 'inline'); soundManager.pauseAll();

#24 by Shaun on November 16, 2012 - 6:43 am

@admin @Robbieee

Did you sort out the problem of multiple buttons on one page? I’d also like it if one button stopped all the other buttons on the page.

#25 by admin on November 6, 2012 - 12:28 am

@Robbieee, yeah that should be doable. I will look into it.

#26 by Robbieee on November 5, 2012 - 1:40 pm

The audio plugin is good; does exactly what it’s supposed to do. I have one request though… Where you have many play button instances on a page, is there any way to limit playing only one audio file at a time? Eg, a play button is playing already, you hit a second play button and the first one stops/pauses.

#27 by Nico on October 21, 2012 - 11:13 am

I just installed both the light box and this and have just wished I’d not wasted hours faffing with other methods. Both are perfect for what I want so thank you. Nice one!

#28 by admin on October 4, 2012 - 12:46 am

@macalle, it will be easier if you read the URL from your JavaScript code (If you are using JQuery then this should be really easy).

#29 by macalle on October 3, 2012 - 11:49 am

I’d like to pass the “URL OF THE MP3 FILE” into a javascript variable.
Is it possible?

#30 by admin on September 4, 2012 - 7:44 pm

That’s exactly what it does now. The screenshot in this post is showing how the player looks when it is paused and and when it is playing. It doesn’t mean that the audio player will make two buttons.

#31 by Oshi on September 4, 2012 - 11:18 am

Hi sorry if this has been ask before. I was wondering if is possible just to make only one button, when is click the player button it switch to a pause button and when is click back again it will switch back to play.

#32 by admin on August 15, 2012 - 9:03 pm

The player button is pretty small already (it is 32px only). You should be able to make it smaller by modifying the CSS file. Look in the “css/player.css” file of this plugin.

#33 by Mikael on August 15, 2012 - 4:19 pm

Hi,

This is exactly the minimalist mp3 player I was looking for, but I was wondering if there is a way to downsize the player? It would be great to be able to adjust the size.

#34 by admin on July 19, 2012 - 7:07 pm

Your preview file will not be the one that you will be selling. A preview file will be a 10 or 20 seconds of the main music file. Once someone purchase the item, you deliver them the full length file.

#35 by Keely on July 19, 2012 - 4:56 pm

It works nicely .. but … you say .. “If you are selling audio files from your site then you can use this plugin to offer a preview”.

If you do a view source you can see the actual url to the mp3

#36 by admin on July 13, 2012 - 2:07 am

@Crystal, Maybe our video lightbox plugin will help?
http://www.tipsandtricks-hq.com/wordpress-video-lightbox-plugin-display-videos-in-a-fancy-lightbox-overlay-2700

#37 by Crystal on July 13, 2012 - 1:19 am

Do you have any plans to make a similar plugin to handle video? I know how to embed html5 video manually, but I’m interested in having the GUI components of the audio and video match each other aesthetically.

#38 by admin on July 9, 2012 - 7:40 pm

Yes, it is our plugin. It is not in the repository yet. We will add it to the WordPress repository at a later time.

#39 by Amy on July 9, 2012 - 3:12 pm