WordPress audio player plugin with download option

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

Related image

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

Screenshot for Audio Player Plugin

The bellow images shows how the audio player looks when it is playing or not playing a music file:

The bellow image is a preview of how the audio player looks when using template 1:

audio-player-template1-preview

When you click the play button, it will change to a pause button in order to allow users to pause the music playback.

Installation and Usage for Audio Player Plugin 

  1. In your WordPress admin area try to go to the ‘Add New’ plugins screen
  2. Then click the ‘upload’ tab
  3. Try to browse for the plugin file (sc_audio_player.zip)
  4.  Activate the plugin after Click ‘Install Now’
  5. To embed an audio file anywhere on your site use the following short-code

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

Instance for the short-code:

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

Documentation for Additional Usage

Option for using Auto Play

To play the audio file on page load use the “autoplay” parameter in the short-code. Here is an Instance short-code with autoplay option:

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

To Specify a Volume Level

To specify a volume level for the audio use the option “volume” parameter in the short-code . You can assign a value between 0 – 100 for the volume level. Here is an Instance short-code usage:

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

The above short-code will set the volume level of the audio file to 50.

To Loop the Sound

To loop an audio file playback automatically use the “loops” parameter in the audio player short-code . Here is an Instance short-code usage with auto loop:

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

Related image

To Specify Both MP3 and OGG Files for the Audio

Important Note: You may not really need to use this option. You can just use the mp3 option and the plugin to make sure that the file is playable in all devices.

Specifying both files types in the “fileurl” parameter to separate them with a “|” character. Here is an Instance short-code usage that you can specify both the .mp3 and .ogg version of that audio file:

[sc_embed_player loops="true" fileurl="http://www.example.com/my-audio.mp3|http://www.example.com/my-audio.ogg"]

Based on the user’s device the plugin will play the supported file .

To Wrap the Text Around the Audio Player

To wrap some texts around the audio player you can use the following in the “Text” view of the post/page editor:

<p style="display: inline">My Audio: </p>[sc_embed_player fileurl="http://www.example.com/my-music/mysong.mp3"]

Use the following in the “Text” view of the post/page editor (wrap the audio player short-code in another CSS class with float):

Some example text
<div style="float: left;">
[sc_embed_player fileurl="http://www.example.com/my-music/mysong.mp3"]
</div>

Template 1 for Audio Player 

To add a player template that uses a seek bar and volume control. Template 1 Audio player gives you that option:

To embed the audio player, use the following short-code by using template 1:

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

The above short-code can produce an output like the following preview:

audio-player-template1-preview

Template1 short-code supports “autoplay” and “loops” parameters too. Here is an Instance:

[sc_embed_player_template1 fileurl="http://www.example.com/my-music/mysong.mp3" autoplay="true" loops="true"]

 Tweaks and Misc Tips

Dot on Black Background/Remove the White Pixels

Using a WordPress theme with black background then you can notice a very small white dot below the audio player. Add the bellow block of CSS code to your theme’s CSS file for getting rid of it:

#sm2-container{
bottom: 0px;
}

How to Add the Audio Player In a Theme’s Template File

Also you can embed the audio player in The theme’s template file. Here is an Instance code that you may add to your template file:

<?php echo do_shortcode('[sc_embed_player fileurl="URL OF THE MP3 FILE"]'); ?>

To Play Audio on Your Home Page Only

Here is an Instance code that you may add to your header.php or footer.php template file then it will autoplay the audio file on your home page:

<?php 
if(is_front_page()){
    echo do_shortcode('[sc_embed_player fileurl="URL OF THE MP3 FILE" autoplay="true"]'); 
}
?>

Template 1  for Changing the Player Background Color 

In theme’s CSS file, Add the following CSS code or change the player background color via the custom CSS plugin. The following example will change the color to red.

.mejs-container, .mejs-embed, .mejs-embed body, .mejs-container .mejs-controls {
    background: red !important;
}

Simultaneously Disable Audio File Playback

Check the “Disable Simultaneous Play” option by going to the settings menu of this plugin to turn off simultaneous audio file playback option. When you use this option, it will stop the audio file automatically when the visitor plays a new file.

If Auto-play is not Working on IOS Devices

IOS devices (iPhone iPad) do not allow you to do auto-play. Apple prevents This  function on its devices. unfortunately Nothing we can do for this plugin.

To Host Your Audio Files

The best choice is to upload your audio files to your site using uploader in WordPress’s media. When you upload the audio file via media uploader, it will show you the URL of the file. You can then use the URL in the short-code of this audio player plugin.

Otherwise, you can host your audio files on Amazon

Image result for ‪wordpress audio player plugin with download option آموزش‬‏

To Download The Latest Version

Compatibility Plugin 

Works and run with the latest version of WordPress.

Plugin Requirements

Requires the WordPress 4.0 or higher.

 

In the WordPress audio bar player, add an mp3 download link 

WonderPlugin Audio Player for Version 6.5 or above

Training:

This training will guide you to add an mp3 download link in the audio player bar .

 

Step 1 – In the plugin select a bar skin

In Wonder Plugin Audio Player, step 1, add your mp3 files, then in step 2 Skins dialog, select a bar skin, for instance, Bar, “White Bar”, “Bar with Title” or “White Bar with Title”.

Step 2 – Try to customize the player

1.  step 3 Options in tab, In Advanced Options, enter the bellow text to the Custom CSS input box:

#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-bar-info {
    positionrelative;
    floatright;
    color#eee;
    font-family"Open Sans"sans-serif;
    font-size12px;
    line-height24px;
    margin0 8px;
}
#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-bar-info a {
    color#eee;
    text-decorationnone;
}

2. In step 3 Options tab, In Advanced Options, enter the following text to the Advanced Options input box:

data-showinfoinbar="true"
data-infoinbarformat="<a href='%AUDIOURL%' class='wpaudiodownloadlink' download='%TITLE%.mp3'target='_blank' onclick='event.stopPropagation();'>Download</a>"

3. In step 3 Options tab, Skin Options, add “100” to the option width. This will consequently give some extra space for download link. For Instance, if you select the skin “Bar”, the default width is “300”, you can finally change the value to “400”.

Please Consider, HTML download attribute does not work in Safari at the moment. In Safari browser, if you decide directly click the link, instead of downloading the mp3 file, it will open and play the mp3 file.

To download the current mp3 file, Try right click on the link in Safari browser, and select the “Download Linked File” from the context menu.

Leave a Reply

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