• 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


Warning: mysql_error() expects parameter 1 to be resource, boolean given in /home/wplift/public_html/wp-includes/wp-db.php on line 1218

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.


Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made via the link.

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

Leave Yours +

17 Comments

Comments are closed.

  • Comments are Closed

Search

Our Sponsors