Thursday, February 08, 2007

Adding a MP3 Player to your Blog

With Google Gadget, you can easily add a MP3 Player to your blog. I have added one at the bottom of the right sidebar in this blog Recreation and Sport. All I have to do is to go to Google Gadget, choose "MP3 Player", click "Add to your webpage" and will be taken to the page Add this gadget to your webpage. You can set, title, the height and width of the MP3 Player. A default URL of a song is already added for you. If you have your own song hosted somewhere, all you have to do is to replace the URL of the default song with the URL of your own song.

In the case of the above blog, a check of the template revealed this:

.sidebar {
float:left;
border-top: solid 1px #fff;
padding: 4px 0 0 7px;
background: #fff;
width: 260px;

That is, the width of the sidebar is 260 pixels. I thus set the width of the MP3 Player to 255 (see screenshot below):

Google Gadget MP3 Player

I then click "Get the Code", copy the code generated, go to the template Layout, click "Add a Page Element" in the right sidebar section, choose HTML/Javascrip in the pop-up, pasted the code into the window and saved, then drag the new Page Element to the bottom of the right sidebar section.

To play the music, all one has to do is to click on the pink button.

An MP3 Player you can carry around

Not satisfied with just having an MP3 Player in your blog? Want a MP3 Player you can carry around? Find all kinds of the Mp3 Players you can carry, and order them right to your home. Online Stores have made the process of Comparison Shopping much easier. At one site you can and Compare Prices and get a great deal on a new player.

Related posts:
Adding Music to your blog
Adding Music to your blog: Another easy way

54 comments:

  1. Hi Peter,

    First off thank you for all of your wisdom, I've been learning quite a bit from you over the past few days.

    I'm having a problem using a flash mp3 jukebox on my blogger. I purchased a license from www.wimpyplayer.com and it works beautifully on websites, and even MySpace. I really want to use blogger for my personal site, but I can't seem to get this to work and it is of the utmost importance so I'm hoping you can tell me if this will work.


    Here is the HTML the online tool from Wimpy spit out for me...

    http://www.thefunkykind.com/myWimpy.html

    I tried taking the embed tag and putting that in an "HTML / JAVASCRIPT" widget, but then I always get this

    http://thefunkykind.blogspot.com/

    Any idea why it refuses to center itself?

    I would love to hear what you think!!!

    Thank you,
    Brooke

    ReplyDelete
  2. Hi Brooke,

    What you have given me a a URL with which I can only make a HTML hyperlink to include in a post or in a Page Element in the sidebar. See Testing a Wimpy player for a reader. I am not familiar with Wimpy player and its capability. Maybe it has the ability to generate a script to embed the player into a post or a Page Element. What are the other choices that the program gives you?

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  3. Hi Brooke,

    Checked out your blog. Looks like you have already embedded your MP3 Player into a post, but it is not centered. What is the script that is used to embed the player into your post?

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  4. Hi Peter...

    If you go to that link I gave you then view the page source you will see an embed tag. That is what I put in the HTML/JAVASCRIPT widget.

    That is the problem it will not "center". Just curious if this is not un-useable...

    Thank you for the response, I'll be quicker this time. I try to ignore the computer on the weekends ;)

    ReplyDelete
  5. thank you, very usefull!!!

    ReplyDelete
  6. after 2 days of madness i found your how to.....sorry if my english is not good for a right thanks...now my blog had music..thank a lot, a lot, a lot, a lot,........GREAT..... I LOVE YOU!!!!

    ReplyDelete
  7. Hi

    Thanks for the info. I've used esnips, that was the only one I could get to grips with!

    But you have to click on the mp3 player icon for it to play but I want it to play just automatically. Am I making any sense?

    my blog is: http://litarture.blogspot.com/

    and no, its not that I cant spell 'literature'. Its art and lit so...
    anyway, I'd really appreciate if someone out there got back to me.

    ReplyDelete
  8. Hi

    Thanks for the info. I've used esnips, that was the only one I could get to grips with!

    But you have to click on the mp3 player icon for it to play but I want it to play just automatically. Am I making any sense?

    my blog is: http://litarture.blogspot.com/

    and no, its not that I cant spell 'literature'. Its art and lit so...
    anyway, I'd really appreciate if someone out there got back to me.

    ReplyDelete
  9. Hi Beth,

    I think I have answered your question in this post: Adding Music to your blog: Another easy way. Somewhere near the bottom.

    Peter
    Dummies Guide to Google Blogger

    ReplyDelete
  10. Hi, I upgraded to the new template and since then I am totally unable to put music code in my template. I always get an error that says there is a matching end tag even with those codes that worked well before. All song2play.com codes no longer work nor does esnips. Always when I edit like I always did, I get errors I never got before. It's a mystery to me and probably a mystery to you to. Should i just revert back to my old template and call it a day?

    Thanks!

    ReplyDelete
  11. Are you trying to add it direct into the template editor? You should add the script in a HTML/Javascript page element via the Layout.

    Peter
    Dummies Guide to Google Blogger

    ReplyDelete
  12. what do you mean by "if your song is hosted"? how do we do that? we have music on our computer, how could we use it? thanks

    ReplyDelete
  13. Songs stored on your computer is not accessibel to the surfers in the Internet. It must be uploaded to a music file host before surfers can have access to it.

    Peter
    Blogger Tips and Tricks

    ReplyDelete
  14. Hi brooklyn,

    Been checking throught the comments and it looks like there is no conclusions to our exchange yet. You mentioned the mp3 jukebox not being centered in your blog
    http://thefunkykind.blogspot.com/
    but I checked the site, and now there is only 1 post there and no mp3 player. Have you changed your site?

    In any case, to center something all you need to do is to surround the script with the <center> tag, eg
    <center>script</center>

    It is not the best method but I have tried other method and it doesn't work in all browsers.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  15. Hi Peter,

    INteresting blog u have. I downloaded the google widget which is the same as the one pictured above. How do i permanently remove the default URL of mp3 songs. I dont seem to be able to locate where i should paste over with my new URL of the songs i wanted. I only managed to load onto the player directly but it disappears after i re-log in to the blog site. Thanks for the help.

    Paulos

    ReplyDelete
  16. Dear Peter,

    V interesting blog i stumbled upon. I added in the MP3 widget as the one pictured in your blog. I tried to insert my URL link to my songs inside but it always resets itself whenever i log out & in again. Do u mean inserting it somewhere into the code that was provided? I have also read your other blogs on other MP3's but it didn't seem applicable . Thanks for the help.

    Paulos

    ReplyDelete
  17. Hi Paulos,

    I recently got a dual core processor computer (said to be better for multi-tasking) and found all the MP3 player which I tested to work before no longer works. Turned out I had to install Apple Quicktime and once I did that, everything is OK again. Could that be your problem?

    Peter (Blog*Star)
    The easiest way to earn something for your blogging efforts

    ReplyDelete
  18. Hi, Peter -

    What's the easiest way that I can just embed an MP3 player that will play music off my computer? Or is that not possible, and I have to upload my music first to an online server?

    ReplyDelete
  19. Hi Andrew,

    You can't use the music direct from your computer. It must be uploaded to the web first.


    Peter (Blog*Star)
    The easiest way to earn something for your blogging efforts

    ReplyDelete
  20. Hi Peter,

    Its me again, Paulos. I am not running on a dual core. Its just a regular Pentium 4 Centrino on either Mozila Firefox 2.0.0.8 version or an IE7. I see lots of people asking the same question. Could u if i may request answer with some graphical example or in a new blog. Really appreciate this. Btw i have already uploaded my songs into esnips. Thanks!

    ReplyDelete
  21. "I see lots of people asking the same question."

    I am afraid I don't know what the question is.

    Peter Blog*Star
    Generating Revenue from your Website

    ReplyDelete
  22. Hi,

    Sorry to add to the chorus, but I was wondering how I might just get a simple player (akin to what wordpress has) that lets me include hosted mp3s within the body of a post so I can write about the track before and after

    I'm not looking to add it as a player in the template - all I'm looking for is a way to put a song between a couple paragraphs kind of like I've done here on a friend's blog, but on my blogspot blog instead

    I've tried trawling the google help groups and blogger help pages but none of the advice seems to fit for my situation

    To clarify, I already have songs sited on an ftp server online, so my only issue is around how to be able to get them to stream within a post in much the same way as I am able to do within wordpress.

    Would appreciate any help or guidance you can provide.

    Jake

    ReplyDelete
  23. Hi Jake,

    I normally test before I publish, and everything went well the first time. This time, I got a different result.

    I tried but the test didn't go as I hope it would. See Simple music within blog post. No time to test some more. Will have to wait for another day.

    Anyway I am not a big music in blog fan, so am no expert in this area.

    Peter Blog*Star
    Tips and Tricks for Blogger or "Son of Blogger Tips and Tricks" slotted for conversion to custom domain

    ReplyDelete
  24. Thats ok - I appreciate your efforts all the same Peter

    Thanks

    ReplyDelete
  25. See the neat and beautiful default wordpress mp3 player playing on a blogger site :

    http://indianraga.blogspot.com

    ReplyDelete
  26. Cant i hava an mp3 player that starts automaticly when the reader goes to my blog?

    ReplyDelete
  27. Hi Pjodde,

    Try adding

    var autostart = "true";

    or

    autostart = "true";

    to the script and see what happens. But I don't like autostart as some visitors at night don't want to be suddenly disturbed and perhaps wake up a sleeping baby. Not recommended.

    Peter Blog*Star
    Blogger FAQ (Frequently Asked Questions_
    (Blogger FAQ in progress. More will be added as I have the time)

    ReplyDelete
  28. i've tried following your directions - used esnips to host my song and tried the google widget for mp3 player. It looks okay on my blog, but never plays, it just says something like "loading esnips . . "
    ?what now?
    thanks,
    rachel

    ReplyDelete
  29. You can't use google widget for playing mp3 files hosted on eSnips. Only the eSnips widget will work for these files.

    If anyone knows a way please inform me.

    ReplyDelete
  30. hi

    thanks for how to upload the mp3 player.

    i have one query, please reply me on lalparama_ralte@yahoo.co.in , it might be a big thing to ask, but i really need this answer.

    If we upload the song which we wanted, suppose from rapidshare. If im not having premium account with rapidshare then the file is going to be deleted after 90 days if it is not downloaded, so if it gor deleted from rapidshare, will the file i upload in my mp3 player will also be vanished at the same time?

    Thanks and best regards,
    Isaac

    ReplyDelete
  31. i was wondering....and what about boomp3.com uploaded ones, does it also have validity?

    ReplyDelete
  32. Hi Peter, thank you so much for your blog, it saved my life several times jajaja.
    I really don't like the colors of the mp3 player. Is there any chance to customize it? Is there any way to remove the google gadgets text? And the igoogle button?
    Please let me know.
    And thanx again...

    ReplyDelete
  33. Regarding color etc. you cannot do it direct in Blogger, only from the third party source. You will have to check the code they generate for you or you will have to examine if when generating the code the third party site has options to change color etc.

    ReplyDelete
  34. Peter, I have followed your instructions and I am able to paste the html code from the mp3 player into my posting. I am inserting the url for the song which is stored on in my box account. But nothing plays when I hit the pink button.

    When I copy and paste the code in without changing the url the song plays fine.

    Any suggestions? I've tried a number of different things but still can't get the song to play.

    Thank you.

    ReplyDelete
  35. Since you are able to play songs, it is unlikely that your computer is without Quicktime. Now the file host where you uploaded the song, does it allow hot linking?

    ReplyDelete
  36. Peter, I repaired Quicktime (which I already had). I can play a song. If I use the song that is the mp3 widget it plays fine. It's the songs that are located at the box.com that won't play. I can't find on the box.com website anything about hotlinking. I signed up for hotlink.com but have failed to receive a confirmation email. Any other suggestions? thanks

    ReplyDelete
  37. I suspect you did not follow a link I gave earlier which should take you to www.hotlinkfiles.com. I don't know anything about hotlink.com

    If still not clear, try reading hotlink file host and embedding music player.

    Do keep us updated with your progress

    Peter @ Enviroman (Blog*Star)
    Follow me at Twitter @enviroman

    ReplyDelete
  38. Peter, I did go to the website you recommended I created an account. But I have still not received an email confirmation so I can't log on.

    Thanks for your assistance.

    ReplyDelete
  39. hi,
    i want to insert a song from my hard disk to that mp3 player.
    can you tell me what to do?

    ReplyDelete
  40. Can you see a box for Song URL in this post Adding a MP3 Player to your blog? First you have to upload your song to a file host that allows hot linking, get the song URL and paste that into that box.

    ReplyDelete
  41. Im going to try it out.Its nice to have a mp3 player on website related to music.Check this out:
    http://rsfile.net

    ReplyDelete
  42. Thanks for your opinion,it is very useful.
    http://www.dhgate.com/wholesale+electronics.html

    ReplyDelete
  43. Hi Peter..

    I uploaded a mp3 player into my blog. But when ever I click the title of the song in my blog, I get this site automatically > >>>>> "http://www.madelinesongs.com/"
    How can I stop opening this site..

    Can I do that or not ? If I can do it, would you please explain me how to?

    This is a very helpful site Peter. Thank you so very much !

    Greetings
    Mel

    ReplyDelete
  44. My problem is quite similar. The player works is someone is using Firefox, will not play with IE. Friends had advised it works with Safari, but not Chrome. Ahh, diversity ...

    ReplyDelete
  45. Super cool! I wanted to have just one song play on my blog and needed a good but minimalistic player with auto play, loop, and play/pause toggle. Thanks to this article, i now have all of it, just as i wanted. I give 100 points for this article. Thanks!

    Julienne
    Call Center Outsource

    ReplyDelete
  46. As always, Peter's advice is excellent. This is how I tweaked mine.

    -1- Initially, I hosted the music at sites.google.com, but the music would not play through IE or Chrome.
    Opened account at www.dropbox.com. FREE storage up to 2G. Upload audio files to "Public" folder.
    Copy "public link."

    -2- Opened account with www.mixpod.com. FREE. Select skin, variety of styles and colors. Link to "Dropbox" URL for music. Click SAVE.

    -3- Copy the EMBED code and paste into your blog HTML or MySpace.

    My site is: http://soundwarehousediary.blogspot.com/
    Mp3 player is at right, if you want to look/hear/judge before deciding. Good luck.

    ReplyDelete
  47. error7zero, went you your site, tested OK so going to copy-paste your comment into the post itself. You should be proud of yourself.

    ReplyDelete
  48. Thanks, Peter. So many readers had issues with the Odeo player. If mixpod becomes wildly popular, there may be connectivity issues. The drawbacks of popularity.

    ReplyDelete
  49. This really a nice trick of adding MP3 Player to blog, It was easy to add this gadget by following your given steps.

    ReplyDelete
  50. I have just on my laptop and was surfing for something interesting for this morning and got this post. It took considerable amount of time of mine to read it but it was worthy. It made my day.
    Slateism

    ReplyDelete
  51. hello, thanks for the information you provide, your article is very useful for my learning process

    ReplyDelete
  52. Great work came at a perfect time for me, html5 music playerwould be really cool if we could at least get an option to enable the HTML5 mode player in the next Subsonic release. Not only would it bypass the need for flash, but it also has some extra features (wav playback, etc).It seems the biggest issue would be with flv video, but by transcoding to mp4 instead of flv, that could be solved. Even without the video fix, making it optional would allow those of us the mainly use Subsonic for music to benefit from the new player.

    ReplyDelete
  53. I don’t think Flash is the one that requires a lot of computing power, it’s the fact of decompressing and decoding a very complex data in real time called “Digital Video”, or you think HTML5 wont use the processor exhaustively to achieve a realtime HD video decoding ?, smoothly and leaving some computing for the another tasks ?, like Flash actually does it ?, yes its a lot of computing power, but for seeing a Full HD video (1920×180) at a 60fps, in full screen and my computer still alive for another tasks…Flash makes transparent the hardware calls implementation for the developers, with swf to html5 converter you will need to deal with conversion of flash to html5 players by rendering a lot of hardware engines, then multi-platform apps will be a true headache for the developers, the same problem than always: HTML hacks for each browser but with a more complex technology: HTML5

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics