How to Embed an Audio Clip in a Blog Post like a BOSS?

A blog post with images and videos are much more interesting to read than old school text walls. Apart from that, several psychological researches says that if you include images and videos in web content, they are having better convincing power that pure textual content.

Considering above facts as a blogger you must be using images and videos in your blog posts already. You could have use self hosted images and embed YouTube videos. But is that all you can? In order to make your blog posts even more interesting you may like to embed audio clips wherever appropriate.

There are several services which are providing audio file hosting as well as embeddable players. Most of them require Adobe Flash player to work with. But today I’m going to tell you how to embed audio files in your blog post like a BOSS! Here we will be using self hosted audio files with latest and greatest HTML 5.

How-to-Embed-an-Audio-Clip-in-a-Blog-Post-like-a-BOSS

Prepare Audio Files

The first step is to convert the audio file into browser compatible format. MP3 is the widely supported format and having lesser file size as well. If you want extended browser compatibility have another copy in OGG format as well.

I tried few tools to convert audio files. Out of all them my recommendation is Free Mp3/Wma/Ogg Converter. It support few audio formats, yet good fit for this purpose. If you are looking for online audio converter try Online-Convert.com.

Finally you have to upload converted audio files to web storage. If you are having self hosted WordPress blog, you can use your own hosting space. All you have to do is upload audio files to WordPress media library.

If you are using WordPress.com or Blogspot, the best solution for you to host audio files is DropBox. Put them in public folder and get the link.

Embed Audio File with HTML 5

Now you have publicly available audio files in web storage. Next step is to embed them in your blog post. For that you can use below HTML 5 tags.

<audio controls="controls">
<source src="URL to MP3 file" type="audio/mp3" />
<source src="URL to OGG file" type="audio/ogg" />
</audio>

Here I have included 2 files formats to ensure maximum browser compatibility. If you like to include WMA format you may use type “audio/wma”.

Once you include this code you will be able to see audio player as below.

If you like to enable auto playing, alter audio tag as below.

<audio autoplay="autoplay" controls="controls">

Tested Environment:

  • Hardware: Intel Core i5 2nd Gen // 4GB DDR2
  • OS: Windows 7 Home Premium // 64 Bit
  • Browser: Google Chrome Version 23.0.1271.91 m

That’s how you embed an audio file in your blog post like a BOSS. This audio player doesn’t require any 3rd party plug-in. All you need is an updated web browser.

Tags: # # #

Get Updates

Spread the Word

What’s Next?

5 Responses to "How to Embed an Audio Clip in a Blog Post like a BOSS?"

  1. The wav/ogg convert software you link to had Spyware according to Norton.

  2. Ivan says:

    Perfect! It works great!

  3. anis says:

    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

Copyright © 2014 Silicon Station. All rights reserved.