Cross browser customizable playlist MP3 Player for your blog

Have you ever wanted to add your own mp3 files to an MP3 player that also has a playlist? Well, now you can. Are you tired of having to join a website just to get an mp3 player's code? That is no longer necessary anymore. It's all free and you just read my instructions; copy and paste; and type a bit of text. That's all there is to it and this tutorial. I stumbled across the code for this multiplayer mp3 player with a playlist by chance but it wouldn't display at first. Now it does because I got it to work properly on one of my blogs. So now you can add it to your blog and can add your own mp3 files to it. The tutorial below is easy to follow and even easier to achieve the final result. The best thing about this player is you can add as many mp3 files to it as you want - but remember to follow the instructions in this tutorial below. Once the height of 100 pixels has been reached the player will automatically create a scrollbar so you can scroll through all the mp3 files you've added, in order to play them.

The thing is, the hardest part of this tutorial is figuring out what you want to use the mp3 player for on your blog. In my case I record bird sounds on my digital camera in video format. I then upload those videos to Youtube and then convert the uploaded Youtube videos to MP3 files. I then add those MP3 files that I've saved to my computer to my Mediafire account. Finally, I'm creating a playlist of all the different sounds that each bird species makes that I've recorded. The first playlist I've made so far is of Eastern Rosella sounds that they've made throughout the course of one year. I'll be making a lot more playlists like the one above but need to convert a lot of my videos into mp3 files before I can do that.

This tutorial is entirely about adding audio mp3 file urls from your Mediafire account to the player above. The same principle should work for other mp3 files as long as they are hosted somewhere, and there is a download link available for those files. Without a download link to click on the mp3 file urls you try to add to this player (from another website other than Mediafire) may not work.

Anyway, in a 3 hour or more attempt at finding an MP3 Player for my Birds of Tenterfield blog, to help lighten the blog loading time, I mucked around with various mp3 player codes trying to add a playlist to them. Finally I got one to work, and after figuring out how to add the playlist, my attempts finally payed off. The MP3 player above is the final result.

Below is the actual code for the above MP3 player and it's playlist. It works on Internet Explorer, Google Chrome, and Firefox. Other browsers I'm uncertain about. Here's the code:

<center><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="500" height="100"> <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" /> <param name="bgcolor" value="#ffffff" /> <param name="FlashVars" value="mp3=http://205.196.120.147/2ngc03f9h2qg/d7j0b0b877dvsa8/Eastern+Rosella+14+September+2012+sounds.mp3|http://199.91.152.95/8xu9saewls3g/6cw7x739870v6wr/Eastern+Rosella+calling+for+it%5C%27s+friends.mp3|http://205.196.123.167/6ie7h4ald9cg/axkfyvgnasqe9pt/Eastern+Rosella+mimics+Bell+Miner+calls.3gp.mp3&amp;title=2012, 14 September - A lone Eastern Rosella singing a variety of calls|2012, 05 August - A lone bird calling for it's friends|2012, 01 April - Bell Miner mimicry&amp;bgcolor1=189ca8&amp;bgcolor2=085c68&amp;width=500" /> </object></center>

Customizing the player

Adding your own MP3 files from Mediafire to the player and playlist:

Let's say you have already added your own mp3 files to Mediafire to speed this tutorial up. The first thing you need to do is to find an mp3 you want to add to the player. Simply click on the title of the mp3 file in your account. A download page will appear with the file above it. Right click on the green "Download" button and select the "Copy shortcut" option. In the above code there are urls for three mp3 files. Each mp3 url is separated by a | symbol, and each url must be separated by a | symbol for it to work. Highlight the first url and paste it straight over the top of mine.

The first mp3 url is:

http://205.196.120.147/2ngc03f9h2qg/d7j0b0b877dvsa8/Eastern+Rosella+14+September+2012+sounds.mp3

After you have pasted in your first mp3 url go down to the part where I have written a description of each mp3 file. Each one starts with the number "2012" - which is in reference for the year we are currently in. Type in your own description for your first mp3 file in place of my text (which is:  2012, 14 September - A lone Eastern Rosella singing a variety of calls). At the end of that text there will be a | symbol. The | symbol is needed to separate each mp3 title in the playlist, so make sure it is always there. Repeat these steps (the last 2 paragraphs) for each new mp3 file you want to add to the mp3 player. Carefully go through the urls and text you added to make sure you did not make any mistakes.

Remember, do not add a | symbol at the end of the very last mp3 url nor at the end of the text description for it.

Adjusting the width and height of the mp3 player: To adjust the width of the player change "500" to whatever width you want. There are two instances of "width" in the code, at the top and at the bottom. Change both of them to your player's new width. At the top of the code change the height from "100" to whatever height you want. The width and height are measured in pixels!

PLEASE NOTE: On changing the width - if you add a really long title for the description of the mp3 file you added, all the text may not show up in the playlist. You will need to rewrite the description and make it shorter in length.

That's it. Once you've done all of that save your post/page and you are done. Start creating your own mp3 player's playlist today and add it to your blog. Enjoy the fun!

Some suggestions for using this mp3 player:

• Birds sounds
• Your favourite music
• Music by your favourite artist
• Podcasts in mp3 format
• Audio ebooks in mp3 format
• Make your own recordings/tutorials and turn them into mp3 files

Emoticon problem is now fixed plus other changes

I'm so glad that this problem was easy enough to fix. I just removed the script for the emoticon to show up which was in the <head> of the template and it fixed the problem. There were no instances of the actual emoticon codes in the "Expand widgets template" page at all. They had previously already been removed. So no more little emoticon surprises will show up when I add a new post that has script in it.

Whilst editing my template I also added the slide panel and comments instructions in two places so it now shows up above the comment form no matter which post you are on if you want to leave a comment on this site.

This template needs replacing ASAP

I deeply regret that I need to change the template design for this site. I will not be deleting the blog itself, just changing the way the blog looks with fresh new code. As a result I will be deleting all instances of emoticons to add to the comments, as it is interfering with the scripts I add to posts. The emoticons keep showing up in amongst code for things in posts, and it should not be happening at all.

I'll start by deleting all the emoticon code in my template but if that does not work I will replace the entire template. If that still does not get rid of the emoticons I will unfortunately have to delete this blog and start a new blog. If that should happen I will leave this blog active and have a direct link to my new blog. Sorry for the inconveniences that everyone has come across on this site.

Alternative Recent Comments widget for Bloggers

Has your Recent Comments widget malfunctioned lately or you can't add a standard Blogger Recent Comments widget to your blog as the gadget is broken?

Fortunately, some time ago I came across an alternative Recent Comments widget which has been working all this time, even when other things malfunction. So, if your Recent Comments widget has malfunctioned or you cannot replace it with a standard Blogger widget, simply copy the code below and paste it into a new HTML/Javascript gadget/widget.

<div style='background:#ffffff;margin-top:0;margin-left:0px;margin-right:0px;margin-bottom:0px;padding:5px;'><script style=text/javascript src=https://sites.google.com/site/projectdigitaltomato/blogger/js/rc1blogger.js ></script>
<script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script>
<script src=http://bloggertutorialsforeveryone.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rcdr"><a href=http://www.madtomatoe.com/recent-comments-widget-for-blogger/>Recent Comments</a> <a href=http://www.madtomatoe.com/ target=_blank title=blogger widgets>Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript>
<style type=text/css>
.rcw-comments a {color:blue;text-transform: capitalize;}
.rcw-comments {border-bottom: 1px #444444 dotted; padding-top: 7px!important; padding-bottom: 7px!important;}
#rcdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN011d8lv8wDeZJ3l1I8Up8RFwxDxtTSIS6Q61rdYpmCZgcKYEFOTz49aarGWhuzO8tOTR6p6D9STxvVY5WTJ4TcRdmtbIhxhWE_3Ixde0cIUvg_rgPYVsMnHAnSbTeycv9rFcLo7Yyibj/s400/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rcdr, #rcdr a {color:#808080;}
</style>
</div>

Replace my blog's url (in red) with your own and then "Save" the widget. Then click on "Save" again once you have moved the widget to where you want it to show up on your blog.

At the very top of the code is an opening div lot of code. I've added it in case you want to customise the look of the widget a bit more. You can change the background colour of the widget by changing the #ffffff to any colour you like. You can adjust the width of the widget by changing the div's margin. Save the changes to the widget once you are done.

That's it. You can now view your blog again and see all the recent comments in the widget.