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 images show how the audio player looks when it is playing and not playing a music file:
The following is a preview of how the audio player looks when using template 1:
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="https://www.example.com/wp-content/uploads/my-music/mysong.mp3"]
Additional Usage Documentation
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="https://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="https://www.example.com/wp-content/uploads/my-music/mysong.mp3"]
The above will set the volume level of the audio file to 50.
Looping the Sound
Use the “loops” parameter in the audio player shortcode to loop an audio file playback automatically. Here is an example shortcode usage with auto loop:
[sc_embed_player loops="true" fileurl="https://www.example.com/wp-content/uploads/my-music/mysong.mp3"]
Specifying Both MP3 and OGG Files for the Audio
Note: You don’t really need to use this option. You can just use the mp3 option and the plugin will make sure that the file is playable in all devices.
You can specify both the files types in the “fileurl” parameter separating them with a “|” character. Here is an example shortcode usage that is specifying both the .mp3 and .ogg version of the audio file:
[sc_embed_player loops="true" fileurl="https://www.example.com/my-audio.mp3|https://www.example.com/my-audio.ogg"]
The plugin will play the supported file based on the user’s device.
Wrapping Text Around the Audio Player
If you want to wrap some text around the audio player then use the following in the “Text/HTML” view of the post/page editor:
<p style="display: inline">My Audio: </p>[sc_embed_player fileurl="https://www.example.com/my-music/mysong.mp3"]
Alternatively, use the following in the “Text” view of the post/page editor (wrap the audio player shortcode in another CSS class with float):
Some example text <div style="float: left;"> [sc_embed_player fileurl="https://www.example.com/my-music/mysong.mp3"] </div>
Audio Player Template 1
A few users have asked us to add a player template that has a seek bar and volume control. Audio player template1 gives you that option:
Use the following shortcode to embed the audio player using template 1:
[sc_embed_player_template1 fileurl="https://www.example.com/wp-content/uploads/my-music/mysong.mp3"]
The above shortcode will produce an output like the following preview:
This template1 shortcode supports “autoplay” and “loops” parameters too. Here is an example:
[sc_embed_player_template1 fileurl="https://www.example.com/my-music/mysong.mp3" autoplay="true" loops="true"]
Misc Tips and Tweaks
Remove the White Pixel/Dot on Black Background
If you are using a WordPress theme with black background then you may notice a very small white dot below the audio player. Add the following block of CSS code to your theme’s CSS file to get rid of it:
#sm2-container{
bottom: 0px;
}
Adding the Audio Player to a Theme’s Template File
You can also embed the audio player in your theme’s template file. Here is an example code that you can add to your template file:
<?php echo do_shortcode('[sc_embed_player fileurl="URL OF THE MP3 FILE"]'); ?>
Playing Audio on Your Home Page Only
Here is an example code that you can add to your header.php or footer.php template file and it will autoplay the audio file on your home page only:
<?php
if(is_front_page()){
echo do_shortcode('[sc_embed_player fileurl="URL OF THE MP3 FILE" autoplay="true"]');
}
?>
Change the Player Background Color for Template 1
Add the following CSS code to your theme’s CSS file or via the custom CSS plugin to change the player background color. The following example will change the color to red.
.mejs-container, .mejs-embed, .mejs-embed body, .mejs-container .mejs-controls {
background: red !important;
}
Disable Simultaneous Audio File Playback
Go to the settings menu of this plugin and check the “Disable Simultaneous Play” option to turn off simultaneous audio file playback option. When this option is used, it will automatically stop the audio file that is currently playing when the visitor plays a new file.
Autoplay is not Working on IOS Devices
IOS devices (iPhone iPad) do not allow you to do autoplay. This is a functionality that Apple prevents on their devices. Nothing we can do in the plugin for this unfortunately.
Hosting Your Audio Files
The most obvious choice is to upload your audio files to your site using WordPress’s media uploader. After you upload the audio file via media uploader, it will give you the URL of the file. You can then use the URL in the shortcode of this audio player plugin.
Alternatively, you can host your audio files on Amazon s3.
Download The Latest Version
Plugin Compatibility
Works with the latest version of WordPress.
Plugin Requires
Requires WordPress 4.0 or higher.
Check out our projects page for more cool WordPress plugins.
@YCID, The audio player doesn’t need to open a new window. It will play the audio on the same page where you have embedded it. Are you using our audio player shortcode to embed the audio file?
Great audio player, thank you!
Just one question – is it possible to play the audio without opening another window? I want to keep people on the same page so they can see the images I am describing too.
Thanks.
@Mike, Glad to hear that you liked the plugin. You can go to this link and rate it (you will probably need to create a free WordPress.org account though)
http://wordpress.org/support/view/plugin-reviews/compact-wp-audio-player
I really like your SC Audio plug-in alot! I’ve played with a bunch of different plug-ins from others and I find yours to be the most compatible between different browsers, being able to use a mp3 file in some and ogg files in others really was a pain. Now I have the choice to either or!
I would love to rate your plug-in on the wp plug-in site but I don’t know how too….what do I need to do or go to be able to rate your plug-In?
@Vorddss, Can you please make sure you are using audio player plugin version 1.5? You can download this version from this page. I haven’t uploaded this version (1.5) to the WordPress repository yet (this version has the audio loop functionality).
Hi, Please help me in audio loop function.. I added below php code but its not working with loop:
<php echo do_shortcode(‘[sc_embed_player autoplay=true volume=”70″ loops=”true” fileurl=”http://dateakademie.de/wp-content/uploads/2013/05/Successful-Business-Venture.mp3″]’); ?>
Hi, Please help me in audio loop function..
I added below php code but its not working with loop..!!
Please suggest me..!!
I love the player but every time I add the short code next to some text it pushes the player button to another line rather than inserting it next to the text. Is there anyway to fix this?
@D, Check the “Specifying a Volume Level” above to see an example of how the shortcode should look like with volume control parameter.
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…
@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?
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!
@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?
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
@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.
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?
@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();
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 ?
@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.
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.
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"]');
}
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
Yes Autoplay is here. Many thanks to you.
Hello again,
with the version 1.3 de autplay function is working fine. Thanks!!
Regards Henk
@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.
Also, if someone wanted to have more than 1 song, could they put more than 1 mp3 file?
Is there a way to implement this in a widget?
@Marilyn, Did you try the following?
[sc_embed_player fileurl="URL OF THE OGG FILE"]
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:
[sc_embed_player fileurl=”URL OF THE MP3 FILE”]
but what about the OGG?
Thanks!
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.
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();
@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.
@Robbieee, yeah that should be doable. I will look into it.
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.
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!
@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).
I’d like to pass the “URL OF THE MP3 FILE” into a javascript variable.
Is it possible?
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.
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.
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.
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.
mc
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.
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
@Crystal, Maybe our video lightbox plugin will help?
https://www.tipsandtricks-hq.com/wordpress-video-lightbox-plugin-display-videos-in-a-fancy-lightbox-overlay-2700
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.
Yes, it is our plugin. It is not in the repository yet. We will add it to the WordPress repository at a later time.
This is great! Is this your own plugin or is this in the repository and you are letting us know?
Thanks guys!!
I will integrate this audio player as soon as possible on my site. Greetings from sunny Hamburg!
LS
Wow! Thank you for this awesome wp audio player plugin. This plugin rocks.
Thanks admin for this nice sharing. I actually was looking for a HTML5 compatible WordPress Audio Player plugin.