How to add inline mp3 players on your blog

How to add inline mp3 players on your blog

In this tutorial you will learn how to insert an mp3 file on your blog post using the simplest way possible. It is a great feature for musicians and podcasters that want to show off their work using Blogger.

Step 1 – Preparation

Internet Archive

For this tutorial you will only need a hosted mp3 file (The hosting service is up to you, I recommend Archive.org for podcasters, but make sure you read their terms and conditions before uploading any file.).

Step 2 – Installing the script on your template

Snapshot40 Sep. 29 12.02

Go to your Blogger Dashboard > Layout > Edit HTML

Snapshot40 Sep. 29 12.02

First of all, make sure you have saved a copy of your template, it will keep you away from any kind of head ache related to your blog.

Now look for the line </head> and paste the following code right before it.

<script type="text/javascript" src="http://flash.for.islam.googlepages.com/inlineflashplayercomp.js"></script>
<script style="text/javascript">
    var paramplayerflash=2;
</script>

Explaining the code above: note that this is a javascript call for this file:

http://flash.for.islam.googlepages.com/inlineflashplayercomp.js

It will be the one who will take care of including the mp3 players automatically whenever you paste a link referencing a .mp3 file.

Note one more detail: var paramplayerflash=1;

This line will be used to choose between 8 different players, the one that will fit better your website.

You can set numbers here from 1 to 8 and see what it looks like.

Now save your changes, and this step it done.

Step 3 – Using the script

Now that we have installed the script, it will works automatically whenever you paste a link to the mp3 file on your blog. It should look like below.

<a href="http://dl.getdropbox.com/u/1693834/Files/samplefile.mp3">Sample File</a>

And should work like below:

Sample File

Using Different Players

If you would like to choose a different player for a single file, just ad the id=”player # directly on your link, note that the number can be from 1 to 8, check the examples below:

Player #1
Player #1

<a id="1" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Player #2
Player #2

<a id="2" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Player #3
Player #3

<a id="3" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Player #4
Player #4

<a id="4" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Player #5
Player #5

<a id="5" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Player #6
Player #6

<a id="6" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Player #7
Player #7

<a id="7" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Player #8
Player #8

<a id="8" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Final Words

I think this is a great feature for musicians and podcasters that may need to include their audio files on blogs. I hope this will be useful for many Blogger users.

The script used in this tutorial as made by Abu Farhan and I have proper permission to use it in this tutorial.

If you have any question or suggestions about how this post can be improved, do not hesitate to drop a comment below. For further information please contact us.

blog comments powered by Disqus