How to add a streaming audio player to WordPress

How to add a streaming audio player to WordPress

Stream an MP3 and/or download the file

This will show you how to add a streaming audio player to WordPress that will allow your readers to instantly play the file on any browser or device.

Flash used to be the most common way to make audio files instantly available on a web page.

Apple not being a fan of flash meant that a new, faster system was needed.

Compatible with all browsers and devices

A HTML5 streaming music player means your audio will be compatible with all Android and IOS devices as well as the main browsers.

NOTE: Since WordPress 3.6 audio streaming is built into the core software.

How to add a streaming audio player to WordPress

Before adding the streaming audio player you want to upload an Mp3 file first.

1. Click the Add Media button.

Add Media Button - WordPress

2. Locate the MP3 audio file you want to stream.

You can use the search bar and media items drop-down to find audio files in your media library.

Insert Media Audio Player WordPress

 

3. Click on the item you want to insert.
Under Attachment Display Settings make sure you have selected Embed Media Player.

4. Click the Insert into post button.

WordPress will insert code that when viewed publicly will create a streaming music player that is compatible with all browsers and devices.

Music Player Example:

 

Pre WordPress 3.6 Instructions

If you’re using a free wordpress.com blog or self-hosted WordPress 3.6 or later you can disregard this section.

1. Install mb.miniAudioPlayer plugin.

Navigate to Plugins >> Add New and enter the term “mb.miniAudioPlayer” into the search field.

NOTE: After activating the plugin all direct links to MP3 files will automatically create a streaming music player.

HTML5 streaming music player

2. Adjust the players default settings.

Navigate to Settings >> mb.miniAudioPlayer and adjust the default settings for the streaming music player.

You can set the color, width, volume, make the file downloadable and more.

3. Customize the player.

If you want to make some specific adjustments to a player, or even disable it place your cursor on the link then click the modify a miniAudioPlayer button on the WordPress editor.

Modify a miniAudioPlayer music player

You can choose to exclude the player from the page altogether, change its color or make the audio file downloadable.

Questions? Issues? Let us know in the comments.

photo credit: deVos via photopin cc
No comments yet.

We'd love to know your thoughts...