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

Tips and Tricks HQ

  • Home
  • Projects
    • All Projects
    • Simple WP Shopping Cart
    • WP Express Checkout Plugin
    • Accept Stripe Payments
    • WP Download Monitor
    • Easy HTTPS Redirection
    • WP Security and Firewall Plugin
    • WP eStore Plugin
    • WP Affiliate Platform
    • WP eMember
  • 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)

Home » Blog » 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. admin says:
    May 21, 2016 at 1:36 am

    @Mark, You can hide it by using a small CSS tweak but I am not sure if the player will play the audio file if you hide it totally.

    The following CSS code will hide the player:

    .sc_player_container1 {
    display: none !important;
    }

  2. Mark says:
    May 20, 2016 at 3:51 pm

    Is there a short code to hide the player so I can just have it play on auto once the page opens…its just a 2 second intro jingle.

  3. admin says:
    January 21, 2016 at 10:13 pm

    @Michael, There should be no issue with that file.

  4. Michael says:
    January 21, 2016 at 9:14 pm

    Good day,
    I’ve been using m4a files with your plugin and they seem to be working fine. Is there any disadvantage to doing this?

  5. admin says:
    April 3, 2015 at 6:36 pm

    @Lee, Look under the main Settings menu of your WordPress admin dashboard. There will be one for the audio player there.

  6. Lee Crawford says:
    April 3, 2015 at 12:38 pm

    Great plugin! Just discovered it. I can’t seem to find the Settings menu though. You refer to it to disable simultaneous playback, but I can’t find Settings anywhere. Help?

  7. admin says:
    January 7, 2015 at 9:30 pm

    @Hanazair, Thank you. I have updated the documentation.

« Older 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

WP Express Checkout Plugin
wordpress estore plugin
wordpress membership plugin
wordpress affiliate plugin

Recent Posts

  • How to Use Browser Developer Tools to Inspect Elements and [...]
  • 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 [...]

Comment & Socialize

  • @Rob, We have just released ...
    - admin
  • I installed the plugin a co ...
    - Rob
  • @Sebastian, We've released ...
    - admin
  • I've used this plugin on a ...
    - Sebastian Djupsjöbacka
  • @John, this plugin doesn't ...
    - 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 © 2025 | Tips and Tricks HQ