Yup, we had to build a Blog!

We heard that all the cool guys have one. So we thought to give you a place to find out more about what we like - not only in webdesign, but in general. Plus, here you get to be the first to see what our next WP themes will look like.

How to Add Audio (Music) to a WordPress Site

15

How to Add Audio (Music) to a WordPress Site

I don’t know why, but music has always been a bit taboo when it comes to websites… In the early 2000s putting some audio on auto-play was the most ridiculed thing you could do in web design (for no rational reason, in my opinion).

But now, since we have thousands of sites that embed videos, all put on auto-play, the topic of audio comes back with a lot less people hating on it.

Also, webmasters and site owners have realized that putting a video or some music on a website just for the sake of it isn’t such a good idea, so right now we can mainly encounter media files that we either came to see in the first place or that help our overall experience.

In my opinion, that was exactly the problem with audio in early 2000s. It wasn’t about the fact that music was playing in the background. It was about the fact that music was playing in the background just for the sake of it, and had nothing to do with the actual content. Nonetheless…

Why would you want to include audio

I see 3 possible reasons here:

  • When audio is the content. If you’re a musician or a podcaster then audio is the main form of content you want to share. No further explanation needed…
  • When audio helps your content. Let’s stick to being a musician as our example here. If you have a site on guitar playing then you can include audio files presenting how a given technique of playing should sound like, or some backtracks for jam sessions, and so on. Essentially, this is where you use audio to make your main (written) content/instructions more understandable and usable.
  • When audio is a bonus. Some bloggers like to provide multiple different forms of the same content. For example, if you record a video interview, put it on YouTube, embed it on your site, and publish it as a new post, you might also want to include an additional audio version, and a traditional transcript. That way your audience can enjoy the interview in any form they wish.

If you have some more ideas on possible reasons for sharing audio, feel free to shoot me a comment.

How to include audio in your blog

Since we’ve got the “why” part of the question covered, let’s move to the “how.”

There are two main ways of including audio:

  1. Publishing a simple download link.
  2. Embedding an interactive media player.

Download links are pretty straightforward so I’m sure you get the idea. By the way, check out the previous post on making a WordPress blog downloadable-media-friendly, should come handy here.

That leaves us with the second way – embedding audio straight into your posts.

This time, there are three main methods of embedding an audio file, and I’m sorry for giving you all these short lists here.

1. Using an HTML5 audio player

This is the simplest method. However, it tends to work differently for various installations of WordPress, various plugin combinations, and various themes.

But you can always give it a try to see how it plays out for you.

First, you need to host your audio file somewhere (more on that in a moment). The easiest thing to do is to upload it through the Media Library in WordPress.

Then you can use this new HTML5 tag (HTML editor in WordPress):

<audio controls=”controls”>
<source src=”song.ogg” type=”audio/ogg” />
<source src=”song.mp3″ type=”audio/mp3″ />
Your browser does not support the audio tag.
</audio>

What’s nice about it is that you can use multiple sources and point them to different audio formats. This way you can make sure that every browser finds a format it can play.

The audio tag has some additional attributes. You can find out more about it here: HTML5 <audio> Tag.

As I said, it may or may not work for you, depending on your theme, installation, or multiple other reasons… So here’s a better idea:

2. Using a plugin

Surprise, surprise. I’m, sure you were not expecting plugins being one of the solutions here…

Anyway. There are quite a lot of them available in the Plugin Directory, so for this list, I’ve chosen only the ones that are updated and compatible with the newest versions of WordPress.

There are always some minor (or major) differences between the plugins, so trying them all out and then settling for one that does its job best is advisable.

Here’s the list (ordered by popularity):

  • Haiku minimalist audio player – like the name says, a very minimalistic player with only a bunch of features.
  • Audio – the plugin actually has no settings at all. You just get to use the [audio] shortcode.
  • Audio Tube – very cool plugin (highly customizable), lets you embed just the audio from any video on YouTube.
  • CodeArt – Google MP3 Player – another shortcode-based plugin, so to speak. Only this one is a little more advanced than the Audio plugin.

Actually, all of the above plugins provide a handy shortcode, so you can embed an audio file without the need of using the HTML editor. The only issue remaining is where to host your audio files…

The problem with hosting audio files

The easiest thing to do is to upload your audio files through the Media Library in WordPress. This, however, can consume your bandwidth very quickly if your audio gets popular.

Even though MP3 is the most popular audio format these days audio files are still between 3MB and 10MB large (and a lot more for podcasts). Just 1,000 people listening to your audio can result in consuming 10GB of your bandwidth.

Therefore, hosting the files elsewhere is a lot better solution. Amazon S3 sounds like a good idea, or any other content delivery network, for that matter. You can also sign up for cloud-based hosting.

In the end, your budget and scale will be the deciding factors here. These custom hosting solutions are always more expensive than standard hosting packages. However, providing your audio file to thousands of people will be significantly more expensive through a standard hosting plan than through a custom cloud solution, so keep that in mind.

That is unless…

3. Hosting your file at SoundCloud

SoundCloud is a service created specifically for sharing music online. It’s like YouTube for audio, in case you’re not familiar with it.

You can sign up for a free account, which will let you upload up to two hours of audio. For more, you can get one of the premium accounts.

SoundCloud offers many interesting features, and embedding is one of them. Apart from embedding single files, you can also embed full albums (SoundCloud calls them sets).

In the end, SoundCloud is the best way of including an audio file in a WordPress blog (in my opinion). Just like YouTube is the leader for video.

If you don’t want to add embed codes manually you can get a plugin called SoundCloud is Gold. It provides a lot of great features that let you customize the player and choose the tracks you want to play. Really worth checking out.

What do you think about audio and websites? Do you find it useful when your favorite blog publishes audio files?

written by Karol K

Karol K. (@carlosinho) is a 20-something year old web 2.0 entrepreneur from Poland, and a grad student at the Silesian University of Technology. He shares his thoughts at newInternetOrder.com and ThemeFuse. Tune in to get his blogging and online business advice.

Comments

  1. Wpfix, June 24, 2012

    A complete article on adding audio files to wordpress websites and blogs

    :)

    reply
  2. JR, June 25, 2012

    Audio is frowned upon because many people listen to music while they browse the web. When they come across a website with music on auto-play, it becomes a scramble to figure out how to mute the music on the website because it is now overlapping the music they are already listening to.

    reply
    • Karol K, August 2, 2012

      Sure, that is true, but I wouldn’t say that it’s a good enough reason to abandon using audio altogether.

  3. mahi, June 25, 2012

    Great Article mate. Much appreciable :)
    It will surely help me to share my fav musics in my own blog :)

    reply
  4. David Moloney, August 30, 2012

    Hi Karol, thanks for taking the time to post. I actually saved this post to Evernote because I knew I would need it when I implemented music for other clients. Your analysis has already provided me with groundwork. SoundCloud here I come.

    reply
  5. Paul, September 13, 2012

    Yup – great post and I’m another who saved it to Evernote back in June. Wouldn’t you know it but, just as I thought at the time, a client has just come to me with a website job which will need to incorporate audio on a few pages.

    thanks again!

    reply
  6. boxhead, October 4, 2012

    I am looking for a player that I can add to my wordpress that will allow me to put a link to an online radio station. The audio is already embedded to my site. However there are no controls. ie. volume, start and stop. Any suggestions?

    reply
  7. deepak mankotia, December 26, 2012

    Very helpful article …thanks a lot

    reply
  8. Patrick, February 4, 2013

    This is exactly what I was looking for.

    I was looking for alternatives to Soundcloud, as i’m only looking to embed short audio clips as opposed to full tracks, but it looks like SC really is the best option.

    Especially with that Soundcloud is gold plug in.

    Thanks a lot Karol!

    reply
  9. Karen, February 5, 2013

    Thank you for these tips! I’ve heard about SoundCloud for quite some time but never really tried using it. I have an audio that my client wants me to embed on her website, and this is just the solution I was looking for. Thank you!

    reply
  10. Caleb, February 10, 2013

    Nice write up, this saved me a lot of research! Thanks bud!

    reply
  11. Andrew, March 9, 2013

    I would like to mute the audio player (which is playing music) automatically when the link to the video is pressed. I have a video pop up. Do any of the plugins have this capability, or is there code that could do this?

    reply
    • Karol K, May 3, 2013

      Sounds like a custom case. If you have two independent solutions (for audio and video) then you’ll most likely have to program such a functionality by hand.

  12. samuel, March 23, 2013

    i use html5 tag, but cant get links from soundcloud to work. Why is that?

    reply
  13. Michelle, April 18, 2013

    Wow, awesome weblog format! How lengthy have you ever been blogging for?
    you make running a blog look easy. The overall glance of your web site is magnificent, let alone the
    content material!

    reply

Add a comment

Top
(it will not be shared)

Subscribe

A leading provider of web hosting services to over 100,000 websites from small to large.

Articles, Web desgin, Freebies, WordPress. Your favorite creative web resource. Stay tuned!

A blog providing advice on how you can use the almighty internet and start an online business

WPHub is a portal about WordPress themes, hosting, plugins, tutorials, and much more!