• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

When we say that WordPress is a content management system we don’t just mean that it is a text publishing system. In fact, WordPress is a very versatile platform with built in capabilities to publish just about any type of content. A lot of bands, music producers, artists, podcasters, and bloggers use WordPress to share their audio content. There are wonderful plugins and themes available to publish audio content, music files, podcasts, etc. In this post we will talk about how you can easily publish your music or audio content with WordPress.

Upload and Embed an MP3 Audio file with HTML5 Player in WordPress

With HTML5, it is now very simple and easier for you to publish audio files. The problem which remains unsolved is that different browsers support different file formats and this support also changes from one platform to another. For example, if you were thinking about embeding your MP3 audio file using HTML5 there is a problem that you need to address first. Unfortunately, Firefox does not support MP3 files in HTML5. This means that you either need to provide two source files (one in MP3 and other in free ogg vorbis format) or just use ogg vorbis.

For those who don’t know, ogg vorbis is a free open format for audio encoding and streaming. It is just as good as MP3 and almost all browsers support it.

Uploading your Audio Files

First upload your audio files using the built in WordPress media uploader (The same button which you use to upload your photos). Upload your audio file, once uploaded copy the url of the file. If you are going to upload your audio file in two formats then upload the other file and copy the URL. When you are done uploading, exit media uploader and return back to the post.

Now click on the HTML editor button on your post editor and paste this code in your post:

</pre>
<audio width="300" height="32" controls="controls"><source src="YourUploadedFileUrl.mp3" type="audio/mp3" /><source src="YourUploadedFileUrl.ogg" type="audio/ogg" />

<!--fallback-->
Your browser does not support the audio tag.
</audio>
<pre>

This code is quite self-explanatory but let me explain it to you a little bit. The tag tells the browser that it needs to handle an audio file with controls.These controls are the buttons that show up in the browser to control volume and playback of audio file. line has two parameters src which tells the location of the file and the type. Notice that we have used two source files, the first one is MP3, but when a user is accessing the page with Firefox or Opera, they will fallback to the second source file. In case a user is on a platform that does not support HTML5 audio then they will see the text “your browser does not support audio tag”.

Now the problem is that writing this code each time you share an audio file is not the perfect solution for many. For those users you can create a shortcode and use it every time you upload an audio file. Using the code below, we are going to create an shortcode.

function wplift_audio_embed($atts, $content = null) {
    extract(shortcode_atts(array(
        "url" => ''
    ), $atts));
return '</pre>
<audio width="300" height="32" controls="controls" src="'.$url.'">
 </audio>
<pre>';
}

add_shortcode("audio", "wplift_audio_embed");

Now you can add the audio files in a post using the shortcode like this:


If you want to make this shortcode available for your widgets too then add this line of code in your theme’s functions.php file:

add_filter('widget_text', 'do_shortcode');

Embeding Audio Files From SoundCloud into WordPress

SoundCloud is a popular audio sharing and hosting website. Many podcasters and artists are using SoundCloud to share their audio content. It supports oEmbed format which allows easy sharing by just pasting URL of the content. WordPress also supports oEmbed but currently it has a built in safelist with a few popular oEmbed content providers in it (like youtube, twitter, flickr, etc.). However, it is very easy to add an oEmbed provider into WordPress.

Add SoundCloud as oEmbed provider in your WordPress by adding just this one line of code in your theme’s functions.php file:

wp_oembed_add_provider( 'http://soundcloud.com/*', 'http://soundcloud.com/oembed' );

Now to share content from SoundCloud all you need to do is to just paste the URL in a post and it will get embedded automatically.

Oembed HTML5 Audio Plugin for WordPress

As I mentioned earlier, WordPress community has developed several plugins to make it even easier for users to publish their music and audio content to the web. Oembed HTML5 Audio Plugin tops my list of such plugin because of its simplicity and ease of use.

With this plugin you can simply upload your file using the media uploader copy the URL and just paste the URL in the post editor. It automatically converts the URL into HTML5 audio tag and displays it with the nifty HTML5 player. However, if the site visitor’s browser does not support HTML5 or MP3 then it fallsback to flash player.

Download oEmbed HTML5 Audio Plugin »

Conclusion

Adding audio to WordPress is just as easy as adding a YouTube video and if you are band or artist, a podcaster or just want to sing for the world, there are some great WordPress themes designed just for you. In case you were wondering about the song that appears in the screenshots above, it can be listened here.


Post Tags

Noumaan is a blogger and social media expert. He loves Quora, Facebook, Wordpress, OpenSource Software and The Sims.

Leave Yours +

20 Comments

  1. Ria

    Thanks for this! Perfect timing. :)

  2. Louis

    Hi Noumaan, were do you paste the above code exactly to create the [audio] shortcode? Do I also need a third party plugin to make it work?
    Thanks,
    Louis

    • NoumaanYaqoob

      @d7e48d719674f335cf2ab6c51e205912:disqus your theme’s functions.php file. No you do not need a third party plugin to make it work.

  3. Riavon

    How to set it to autoplay? I’m using the shortcode. Also, is there any way to hide the URL of the media files from the source code view?

  4. Alexander Dimitrov

    haha i needed this a few days ago and i find it just now. Great that you wrote this tip. I made with metaboxes (cause adding song was the main feature) and using html5 player. Your method is better for smaller need of music in the posts ^^ Still great way to do it.

  5. Very useful and supportive article. I wish I can do all of that in a short period of time.

  6. alone1102

    very good

  7. guy

    Your original code(long form) sources two file types(mp3, oog) for browser compatibility but your short code seems to only source one(oog in your exampe). is there a way to create a short code that sources both as in the long form code?

  8. Anders

    Thanks for the HTML5 code! Can´t make the player wider by changing the width – do you know why that might be? Trying it on my site elektrojazz.com

  9. Munirah

    The codes sees to be cut off in the initial post……….

    <?php the_content('Read More..’); ?>

  10. Thank you for sharing useful information, I think I need it. thanks!

  11. Great advice, I just used in my blog!

  12. Aw, this was an exceptionally good post. Taking a few minutes and actual effort to make a superb article… but what can I say… I procrastinate a whole lot and
    never seem to get anything done.

  13. Is there a way to use this if you are pointing your domain to a free WP site? We don’t have any of the WP files nor can we modify them. I don’t have the ability to add plugins and I’ve been trying to find a way to embed a streaming player.

  14. Figured it out. Code below:

    [gigya src="http://www.shoutcast.com/media/popupPlayer_V19.swf?stationid=http://yp.shoutcast.com/sbin/tunein-station.pls?id=199572&play_status=1" quality="high" bgcolor="black" width="300" height="104" name="popupPlayer_V19" align="middle" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"]

    Put your own station ID or you’ll be playing our music. :)

  15. Mr. Nouman Yaqoob,

    Good Morning,

    Today I tried to download MP3 files on my WordPress private blog & I received a an ERROR reply that WordPress does not support MP3 Audio files.

    What shall I do ?

    Please let me know.

    Thanks.

    Tipu Sultan
    HAS1.TSS1@gmail.com

  16. thanks for the post.This is a really a good post. How To Add An Image Tag On MP3 Music File Using MP3Tag software(100%work)this post also good for help http://tipsyards.blogspot.com/2014/03/how-to-add-image-tag-on-mp3-music-file.html

Leave a Reply

* Required Fields.
Your email will not be published.

Search

Our Sponsors