• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Tips and Tricks HQ

  • Home
  • Blog
  • Projects
    • All Projects
    • Simple WP Shopping Cart
    • WP Express Checkout Plugin
    • WP Download Monitor
    • WP Security and Firewall Plugin
    • WP eStore Plugin
    • WP Affiliate Platform
    • WP eMember
    • WP Lightbox Ultimate
    • WP Photo Seller
  • Products
    • All Products
    • Checkout
  • Support
    • Support Portal
    • Customer Only Forum
    • WP eStore Documentation
    • WP Affiliate Software Documentation
    • WP eMember Documentation
  • Contact

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

You are here: Home / Wordpress / Wordpress Plugin / Compact WordPress Audio/Music Player Plugin (All Browser Compatible)

Last updated: July 12, 2022





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:



audio-player-template1-preview

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

  1. Go to the ‘Add New’ plugins screen in your WordPress admin area
  2. Click the ‘upload’ tab
  3. Browse for the plugin file (sc_audio_player.zip)
  4. Click ‘Install Now’ and then activate the plugin
  5. 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:

audio-player-template1-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

Download Audio Player 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.

No related posts.


Wordpress Plugin audio player,  audio player plugin,  WordPress audio player,  WordPress audio player plugin,  WordPress music player

Reader Interactions

Comments (107 responses)

  1. Hanazair says:
    January 7, 2015 at 9:07 pm

    If you are trying to play the music on homepage only that is NOT a blog-post you need to use ‘is_front_page() ‘ rather than ‘is_home()’ . See http://codex.wordpress.org/Function_Reference/is_home

    Note to Developer – could you update the instructions with this addition?

  2. admin says:
    October 20, 2014 at 9:47 pm

    @Pablo, Read the “Adding the Audio Player to a Theme’s Template File” section from this page. Then edit your header.php file (I am guessing that is the file for your theme header) and use the suggested code in there.

  3. Pablo says:
    October 20, 2014 at 6:44 pm

    Hi dear friends. Its a great player. I just want to know how to insert the code in the header of my theme. I’m sorry my knowlegde of web programing are basic… Thanks

  4. Wylde says:
    September 5, 2014 at 10:28 am

    Thanks! This is nice and clean. Just how I like it!

  5. admin says:
    July 9, 2014 at 1:22 am

    @Jeff, There is no way to do the continuous play at this stage.

  6. Jeff says:
    July 8, 2014 at 7:12 pm

    Regarding your answer below to @Jo: “You can make it autoplay but when the user browse to a new page, the song will start again”

    Is there any possible way to have the song that autoplays on the homepage continue to play as the user browses the site?

    Great plugin, thanks!

  7. admin says:
    June 13, 2014 at 7:43 pm

    @KPCTA, No, the plugin won’t be able to remember that you paused it in one page.

  8. Larry says:
    June 13, 2014 at 7:38 pm

    Thank you for your help! Your plugin in working like a charm. I have 51 instances of it on one page and all is working great!

  9. KPCTA says:
    June 13, 2014 at 2:55 am

    Great plugin. I use it on couple of sites, but I have one question: Is it possible, if I put player on widget and set it to autoplay, and click stop button it stay paused on every other page/post.

    Thank you in advance

  10. admin says:
    June 11, 2014 at 8:38 pm

    @Larry, you should be able to customize the height using CSS. The following two resources should be helpful:

    https://www.tipsandtricks-hq.com/how-to-use-firebug-to-modify-your-wordpress-sites-css-video-tutorial-4037

    https://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413

  11. Larry says:
    June 11, 2014 at 2:55 pm

    Thanks for this great plugin! I did change the graphics successfully, but have an issue: I have lots of audio files on one page and need to make the play and pause images smaller than the supplied 32×32. I did that, but there is still a 32×32 area around them that gets gray when hovering over them, and this is limiting how close I can put them together. I wanted to make them about 12 pixels high. Any way to do that?

  12. Web Eminence says:
    May 8, 2014 at 4:10 pm

    Nice plugin. Thanks. I had a problem using it on a local installation. When I put multiple players on the same page, it always plays the first audio file no matter which button I press. It only does this for me on the local installation but when I put it on my hosting server, it works fine. Not sure why this is but thought I would pass this along.

  13. peethambaran says:
    April 26, 2014 at 5:08 am

    Work perfect. great plugin. Thanks

  14. admin says:
    April 5, 2014 at 1:54 am

    @Jo, I don’t have one ready for that. If you can provide an image, I can add it to the plugin as an option.

  15. Jo says:
    April 4, 2014 at 9:01 am

    Hi,
    Is it possible to provide us a round play button with a better resolution ? For retina devices like iPad Air, Chromebook etc… ?

  16. admin says:
    March 23, 2014 at 11:47 pm

    @Nils, yeah you can use a custom play button image. Take a look at my earlier reply.

  17. Nils says:
    March 23, 2014 at 5:13 pm

    Is there a way to change the play button to a custom play button?

    Thanks for a great plug!

  18. admin says:
    February 8, 2014 at 7:41 pm

    Use filezilla to connect to your server then browse to this plugins folder:
    https://www.tipsandtricks-hq.com/using-filezilla-ftp-client-for-your-wordpress-site-6566

    …/wp-content/plugins/compact-wp-audio-player/images

  19. James says:
    February 8, 2014 at 12:55 pm

    Where is the image folder of this plugin? I don’t know where to look. I want to find the play button and enlarge it.

  20. admin says:
    February 6, 2014 at 6:06 pm

    @J, Those buttons are actually images. So look in the images folder of this plugin and replace them with your custom image.

  21. J says:
    February 6, 2014 at 5:32 am

    Thanks for this great plugin, beautifully simple.
    One question though: Is it possible to change the colour of the player and the play/pause sign to match the styling of my website?
    Thanks
    J

  22. Mario Bruneau says:
    January 11, 2014 at 9:46 pm

    Hey guys, long time since I’ve been here.
    This little audio plugin of yours is simply great like ALL your other products.
    thanks
    Mario Bruneau

  23. admin says:
    December 18, 2013 at 7:14 pm

    @LotusZen, Check the documentation above to learn how to loop the sound track. You can make it autoplay but when the user browse to a new page, the song will start again (so I don’t think this one will do what you are after).

  24. LotusZen says:
    December 18, 2013 at 9:13 am

    How can I get this plugin to loop the song I am playing? And which file should I add the shortcode to if I want the song to play continuously across the site background? Footer.php? Thank you for your advise – great plugin!

  25. Sean says:
    November 18, 2013 at 12:54 pm

    Works LIKE a CHARM!!

  26. admin says:
    November 1, 2013 at 6:58 pm

    @Arnab, What code are you using to add the player to your footer.php file?

  27. Arnab Majumdar says:
    November 1, 2013 at 11:44 am

    Hi,

    Great audio player, runs perfectly when it’s embedded in a page, post or widget. However, it’s not working in either of the header and footer files.

    Not to sound like a complete noob, but when you say “You can also embed the audio player in your theme’s template file”, what is the name of the file that I’m supposed to be embedding it into? Like I mentioned above, header.php and footer.php don’t seem to be working for me…

  28. admin says:
    October 16, 2013 at 1:51 am

    @Steve, I am pretty sure this theme has some javascript errors which is causing this issue. Switch to the default WordPress theme as a test and then check if the audio player can play the file correctly or not.

  29. Steve says:
    October 15, 2013 at 7:10 pm

    Hi, thanks for the quick reply – copied and pasted that link into address bar – plays fine – I am wondering if it maybe has something to do with the theme I am using – do you know if anyone has used it on a Parallax theme (the reason I ask is that this is on a ‘Page Section’ rather than on the ‘Page’ which is the usual place on a wordpress theme ?

  30. admin says:
    October 15, 2013 at 6:44 pm

    @Steve, Yeah it works on a local host testing environment too. I would double check the URL… if you enter the URL of the audio file in the browser’s address bar, does it play the song or download the file?

  31. Steve says:
    October 15, 2013 at 6:28 pm

    Nice and compact thanks 🙂 – just wondering if the mp3 should be playing on a local testing environment ? I have installed the plugin and put the shortcode in as per instructions – clicking on play is looking normal – but no audio – I have tried presetting volume to 100% – still nothing – checked the url – looks right – any ideas ?

  32. admin says:
    October 7, 2013 at 6:48 pm

    @Jagrav, No it takes one file per player.

  33. Jagrav says:
    October 7, 2013 at 1:54 pm

    Can we add multiple mp3s files to one player?

  34. admin says:
    October 1, 2013 at 9:22 pm

    @James, It uses two images for the play and pause buttons. You can replace those images with the ones you want to use. So try overwriting the current play and pause button images with your your ones in the “images” directory of this plugin.

  35. James says:
    October 1, 2013 at 7:01 am

    Thanks for your great plug in! I have a request please. Can you add a parameter for the shortcode that enables one to change the colour of the player (and play/pause button) to blend in better with a given website colour scheme? Thanks again.

  36. Pepito says:
    September 25, 2013 at 9:19 am

    WOW I love it!!!! 😀 😀

  37. admin says:
    September 20, 2013 at 7:46 pm

    @Sylvia, If you can share the URL of the page where this issue is happening then I will take a look at it.

  38. Sylvia says:
    September 20, 2013 at 4:56 am

    Hi and congrats for your great work. I am using the plugin to add sound samples to the songs in the repertoire of my Gospel Choir’s webpage (which is currently under construction). Not all the songs I list have their own sound sample, and I noticed that the player adds an extra space below and makes the following line shift down, resulting in uneven spaces between the items in my unordered list. I tried to find the way to change this in the css but couldn’t figure it out. I hope I described the problem clearly enough.. Any help? Thank you!

  39. admin says:
    September 3, 2013 at 7:55 pm

    @ashlyn, Have you uploaded an mp3 file to your site using the WordPress’s media uploader?

  40. ashlyn says:
    September 3, 2013 at 5:29 am

    Hello,

    I am having a hard time adding music to my blog site. Starting with getting an accurate mp3 file url link, do you have any suggestions as to where?

    And trying to find a place on my blogsite to add the auto player. Under which section?

    Thanks

  41. admin says:
    August 28, 2013 at 11:36 pm

    @Krystal, You can use all the shortcode parameters together in one shortcode. Here is an example:

    [sc_embed_player autoplay="true" volume="50" fileurl="url-of-your-audio-file.mp3"]

  42. Krystal says:
    August 28, 2013 at 10:14 pm

    Hi,
    What would the code look like if i wanted it to autostart AND lower the volume?

  43. admin says:
    August 13, 2013 at 7:30 pm

    @Joe, It will use flash in Firefox browser. HTML5 is for browsers that don’t support flash (on those browsers it falls back to HTML5).

  44. Joe says:
    August 13, 2013 at 11:42 am

    Hi guys, in firefox if you have flash blocked it throws the missing swf error, but i thought it was html5 too right? so it shouldn’t need flash?

  45. admin says:
    July 29, 2013 at 10:15 pm

    @Rob, If the widget (where you embedded the audio player) is being displayed on every page then the player will keep playing on every page. If you only want it on your homepage then add the audio player in your homepage only (some themes have widgets for home page only). Or check the example in the “Playing Audio on Your Home Page Only” section above.

  46. Rob says:
    July 29, 2013 at 3:07 am

    I have this player installed with autoplay on a text file widget. Problem is it autoplays on every page I click on. Any way to just play on the Home page only?

  47. admin says:
    July 27, 2013 at 10:40 pm

    @angelicotter, Yeah you should be able to save the audio file URL as a custom field in a post, then retrieve that value and call the audio player function to embed the player. You will obviously need to do a little custom coding to suit your need. Where were you going to show/embed the audio player?

  48. angelicotter says:
    July 27, 2013 at 8:47 pm

    Hi,

    Love the minimal look of this plug in. Is there any way to use it as a custom field so that the user can just choose it as a custom field and put in the url of the sound file location as the name value.
    please advise.
    ao

  49. Simon says:
    July 23, 2013 at 2:28 pm

    OK, i just found a possibility to add multiple files to the player by changing something in the plugin-core. Soundmanager2 now supports an array as url:

    soundManager.createSound({
    id: ‘foo’,
    url: [‘bar.ogg’,’bar.mp3′]
    });

    I added these lines to the function play_mp3():

    function play_mp3(flg,ids,mp3url,volume,loops)
    {    	
        if(mp3url.search(/mp3$/) != -1)
        {
            console.log('mp3');
            mp3file = mp3url;
            oggfile = mp3url.replace('.mp3','.ogg');
        }
        else if(mp3url.search(/ogg$/) != -1)
        {
            console.log('ogg');
            mp3file = mp3url.replace('.ogg','.mp3');
            oggfile = mp3url;
        }
    
        soundManager.createSound({
            id:'btnplay_'+ids,
            volume: volume,
    		url: [mp3file, oggfile]
        });
    }
    

    this looks out for a similar-named file with the other extension (mp3 -> ogg and reverse)

    perhaps it’ll be easy possible to add multiple files to the shortcode like:
    [sc_embed_player fileurl=”path/to/file.mp3|path/to/file.ogg”]

  50. Simon says:
    July 23, 2013 at 6:51 am

    Hi
    Thanks for this great little player 🙂
    It would be nice to have the possibility to define a mp3 AND a ogg file, and the script choses the one that works… my ogg-files don’t work in any browser… 🙁

« Older Comments
Newer Comments »

Leave a Reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Featured & Popular Articles

Video Answers to Top WordPress QuestionsWordPress Optimization Tips and Tricks for Better Performance and SpeedEssential WordPress Security Tips - Is Your Blog Protected?WordPress Simple PayPal Shopping Cart PluginTop 15 Search Engine Optimization (SEO) Techniques I Forget to DoList of the Best and Must Use WordPress PluginsHow do I Start a Blog and Make Money Online?Good Domain Name Picking Tips for Your Blog SetupFind Out Which WordPress Web Hosting Company Offers the Cheapest and Reliable Web Hosting Solution

Featured WordPress Plugins

wordpress estore plugin
wordpress membership plugin
WP Express Checkout Plugin
WordPress Lightbox Ultimate Plugin
WordPress photo seller plugin
wordpress affiliate plugin

Recent Posts

  • Accept Donations via PayPal from Your WordPress Site Easil [...]
  • Buy Now Button Graphics for eCommerce Websites [...]
  • Subscription Button Graphics for eCommerce Websites [...]
  • Adding PayPal Payment Buttons to Your WordPress Sidebar Ea [...]
  • PayPal QR Codes [...]

Comment & Socialize

  • @Rodrigo Souza, Thank you f ...
    - admin
  • The example for 'slm_add_ed ...
    - Rodrigo Souza
  • @Ron, All the valid transac ...
    - admin
  • Hello, when people have sel ...
    - Ron
  • We have hte following featu ...
    - admin

Check out our solutions

View our WordPress plugin collection and start using them on your site.

Our WordPress Solutions

Footer

Company

  • About
  • Privacy Policy
  • Terms and Conditions
  • Affiliate Login

Top WordPress Plugins

  • Simple Shopping Cart
  • PayPal Donations
  • WP Express Checkout
  • WP eStore
  • WP eMember

Blogging Tips

  • How to Start a Blog
  • Selecting a Good Domain
  • Cheap WP Hosting
  • WP Video Tutorials
  • Simple SEO Tips

Search


Keep In Touch

Copyright © 2023 | Tips and Tricks HQ