Friday, February 23, 2007

Adding music to your blog

There are many ways to add music to your blog. The most common way is to embed it into your post, or in New Blogger (formerly Blogger beta), add it as a HTML/Javascript widget via the "Add a Page Element" in the Layout.

You will first have to find a music file that is already hosted on the web, or if you have your own music file stored in your computer, upload it into a file host and then get the URL of the file. If you don't have any music file saved in your computer to upload, you can find files already hosted at freemp3mail.com, select the artist, click "Free Download" and you will be taken to the file hosted on the web. You can copy the URL from the address bar of that page. For example, this is a file already hosted on the web: Josh Aran (Blossom).

In the HTML/Javascript widget window or the post editor window, paste this code:

<embed src="URL of music file"
width="150" height="40" autostart="false" loop="false">

UPDATE 15 November 2007: A blogger commented he/she got error message "The tag isn't closed". No time to test this, but with XHTML (and HTML), opening tags without closing tags are supposed to end with a backslash /. Further, I believe with XHTML, there have to be a space as well. If you have problem, try

<embed src="URL of music file"
width="150" height="40" autostart="false" loop="false" />

and see if it helps. Please give feedback as I have no time to test.



You will have to substitute "URL of music file" with the actual URL of the music file in the script. In the script, there four attributes - width="X", height="Y", autostart="false/true" and loop="false/true". You will have to make sure that the value of width attribute X is consistent with the width of the container in which you intend to add the player into. For example, the width of the sidebar is 160 for this template, so I have to add a value less than 160 if I want to put it in the sidebar. For the autostart attribute, if you put it as true, the music will start automatically the moment your blog is loaded. Many have the opinion that this is a bad choice as the visitor may be visiting your site in the middle of the night when others are sleeping, and may be forced to quickly exit your page to stop the music. If you put the autostart attribute as false, the visitor will have to click the start button to start the music. For example, I have used the "Add a Page Element" to embed an MP3 player at the bottom of this blog Good Hobby Ideas. Try clicking on the start button to listen to the music. For this player, I have put the attribute loop="false" so that the music will stop when it is finished. If you want the music to loop continuously, you will have to put loop="true".

There are other ways of adding music to your blog. For example, you can use this site
Sonific to generate a script for putting into your post (the player will only appear in that post) or the Page Element (the player will then appear in all pages of your blog). You register for an account, verify your email address, sign in, select a songspot, and you will be taken to this page to fill in the field for the blog platform you are using and the URL of the blog you want to put the songspot in (see screenshot below, click to enlarge):

Sonific Songspot configuration page

As you can see from the screenshot, you have various option like orientating the player horizontally or vertically, select the size, whether to start the music automatically or manually, etc. You will also have to select your blog platform (which in our case will be Blogger) and type in the URL of the blog you intend to embed the player into. When you are finished the configuration, click "Activate" and the next page will display the script for you to paste into your post or the Layout. If you paste it into your post, when you try to publish it, you will get an error message "Your HTML cannot be accepted.......". Ignore it, tick "Stop showing errors for this post" and publish.

You can see an example of the player embedded into a post at Testing Sonific. The player will only appear in this particular post. You can also see the player embedded in the footer of this blog. In this case, the player will be displayed in all the pages of the blog.

You can also use Google Gadget to add an MP3 Music Player on your blog. See post Adding a MP3 Player to your blog (click "BACK" button to return to this page).

RELATED POSTS:

Music for websites: Summary (click BACK button to get back to this page)

Easy way to add music to blog using eSnip (click BACK button to get back to this page)

eSnip music player in sidebar (click BACK button to get back to this page)

Invisible background music player for your blog

Embed Imeen music playlist into blog post

Embed Imeen music playlist into blog Part 2

Apple Quicktime to make MP3 player works

61 comments:

  1. Its really nice for viewers to listen to music and surf. I think i will also put it on my blog.

    ReplyDelete
  2. thank you Peter i will have a go and let you know how i get on.from gurnygob@msn.com

    ReplyDelete
  3. Wow, what a great idea, thanks!

    Random, unrelated question: how does one change the amount of space between lines in a post. On my most recent post, I have a list which looks kind of ridiculous with so much space between them each line of text. Thanks in advance.

    ReplyDelete
  4. You either click the delete key or delete the <br /> tags

    Peter
    Natural Remedies

    ReplyDelete
  5. Thanks Peter, but I still want them on separate lines. My problem is the text seems to be by default almost double spaced (or 1.5 as it would be called in Word) whereas I want one section single-spaced. I've never seen a blog arranged differently, though, so it may not be possible.

    ReplyDelete
  6. Hi Ray,

    Save your template first before trying anything. I may not know what i am writing. But open the template editor window and look for the following block of codes

    .post h3 {
    margin:.25em 0 0;
    padding:0 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color:#cc6600;
    }

    Change line-height:1.4em;
    to a value you desired.

    Peter
    Natural Remedies

    ReplyDelete
  7. peter i just want to thank you. i followed your advice on how to get music on my blog. i got it done at long last. i went to sonific. had a bit of a prob with working it out, but got it in the end. thank you very much

    ReplyDelete
  8. Is there a way to play the music file on demand, e.g., by clicking an icon, BUT in the background? I don't want the QuickTime plugin to show and change the current web page. I use FireFox 2.

    ReplyDelete
  9. Hi Becky,

    I am afraid I am not a great fan of music on websites, and have not done much work with it. Also, I don't fully understand your question. Perhaps you can try posting your question to the Google Blogger Help group and see what they come up with.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  10. Found this on a google search for - what else, putting music on blogs -

    Thanks!

    ReplyDelete
  11. Hi jblieu,

    That is nice knowing my post can be found via a search engine. Thanks for taking the trouble to comment and let me know. Very much appreciated.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  12. Thanks, I was able to use this!

    I embedded audio in a blog post. Got errors in Blogger when I did not put in the closing embed tag. Took me awhile to figure that out, but now I'm enjoying.

    I noticed it's different on machines with different default media players, so I'm experimenting with that now.

    Thanks again! I am not technical at all (YET)!

    ReplyDelete
  13. damn, thanks mate! really helped me a lot! niw, to put it in my blog...

    http://basyarblog.blogspot.com

    ReplyDelete
  14. i tried using the code but it keeps saying additional plugins are required. what plugins am i supposed to download ? and what am i supposed to do ? i'm lost

    ReplyDelete
  15. Hi Ruby,

    I guess I have to be honest here. I don't have much interest in music in blogs, and what I have done is tested what I described, and if it works, I post about it. I didn't install any extra plug-in, so I really do not know what plug-in you require for your computer. Perhaps you can post your problem to the Google Blogger Help group where there are many music enthusiasts there.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  16. Hi found this post through the search engine and found it to be the best to understand. Completely new to blogging and to html coding in general and have had a difficult time with all the lingo. I understand the steps you wrote out but I don't know how to upload my music file from my itunes on my hardrive to an online host. Can you tell me how? tried the freemp3 site but it is just independent singers and not anyone I was looking for. Also my itunes song file says m4a not mp3 does that mean anything? In reading the comment file I saw that a couple people had a problem with the "closing embed tag" I don't think I can figure this out on my own since I have no idea what this is. Do you know what they mean and what the solution is/was? Thanks

    ReplyDelete
  17. Hi Michelle,

    To tell you the truth, I do not really have very much interest in music, but have done some research with my limited time and have made numerous attempts at finding sites that will allow you to host a music file that is actually hosted on the web. All those that allow music upload I found only allow you to get a link to their site do download the music, which will not help in embedding the music in your post.

    If only I have more interest/time, I will do further research but with the amount of things still waiting for me to do, I doubt it will be anytime in the near future.

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

    ReplyDelete
  18. Whenever I try to add my music, all that apears is the quicktime "Q" with a question mark in the middle and the music doesn't play. I can't figure out what's wrong because I have the right code and url as far as i can see.

    ReplyDelete
  19. Hi Katie,

    Music is not my strong point as I really don't have much interest in music in my blogs except Make nice music slideshow for your family and My first grandchild and This Old Man music slideshow (my grandchild and the music is used with copyright owners' permission and all play fine). I have tested all the posts related to music before they become public and all tested OK, but there had been time I went back to check and the music play intermittently, have some kind of problem, etc. I don't know what is wrong.

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

    ReplyDelete
  20. hey peter thanks for posting these topic...but i dont know why it doesnt work for me!...i have tried a thousand times, and i cant make it work!

    ReplyDelete
  21. Hi mafe,

    Please refer to Make MP3 player works by adding Quicktime plugin.

    Peter (Blog*Star)
    What a grateful blogger did for me
    (no one should feel obligated. Everthing completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  22. Yay, I did it! Thanks for the tip. I had to try a couple of diff songs, it worked eventually.

    Question, can I embed a song (or loop of songs) without showing the player-thingamajigg?

    Merci!

    ReplyDelete
  23. Salut Lei,

    Comment ça va?

    "can I embed a song (or loop of songs) without showing the player-thingamajigg?"

    You mean you want an invisible music player? Like this blog: Blog with invisible background music player. Surf over there with your speakers turned on and see if that is what you want.

    If that is what you want, go to How to install an invisible music player and why you should not do it.

    Au revoir,

    Peter Blog*Star
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  24. I keep getting errors stating that I need to close the tag. The tag isn't closed once I use this code?

    ReplyDelete
  25. Hi pri,

    Hard to answer in comment. Refer back to post which I have updated (in red) and please give feedback if it helps.

    Peter Blog*Star
    Blogger for Dummies

    ReplyDelete
  26. It is not working for me i don't know what is it thta is lacking here, there's no music nothing.

    ReplyDelete
  27. Hi,

    I am neither a big fan of music on websites nor an expert but hope this may be of some help:

    Add Apple Quicktime to make MP2 player works

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

    ReplyDelete
  28. Help, this question is off topic by the way.

    Why when I post my posts, I see the posts on my blog. The words in front are cut off. help!!

    ReplyDelete
  29. Hi 1Nf3rn....

    What do you mean "words cut off"?

    ReplyDelete
  30. This is a really grat blog!!! helped alot

    can I ask you a question?

    how do you add color to the part after you posted a post.... like where it says Posted by (name) at 6:34
    not changing the font color but the background of that little part

    ReplyDelete
  31. I eleted the purpose statement that was on my blog by accident. Any way to recover that?

    ReplyDelete
  32. The standard for using the " />" to end a tag doesn't appear to be recognized by Blogger for all elements. I got the same error (Tag is not closed) but was able to correct it using the syntax:
    <embed src="..." ...></embed>

    the <embed src="..." ... /> should work, but doesn't -- or so it seems. But I'm currently listening to the song I embedded in a test post using the alternate syntax, so I know it works.

    ReplyDelete
  33. I sort of vaguely coming across a similar situation where I had to add a closing tag to make some script work although there was /> at the end and was supposed to be self closing. In any case, you are knowledgeable to solve the problem, so no problem.

    ReplyDelete
  34. my blog now says:

    additional plugins are required to display all the media on this page.
    there is a button that says install missing plug ins
    but when i click it it says
    no suitable plug ins found
    suggests several

    https://addons.mozilla.org/en-US/firefox/browse/type:7

    i do not want all my visitors to have to download a program to listen to my music

    any suggestions?

    ReplyDelete
  35. My own experience had been when the background music I embedded into a demo blog did not play, I had to install Apple Quicktime. I have no other experience of related nature

    ReplyDelete
  36. ?????????????????
    i am sorry. i didnt understand a word u said. could u explain it step by step 2 mii.

    ReplyDelete
  37. it dosent work can u explain in detaile

    ReplyDelete
  38. What doesn't work?

    No sound? Perhaps you need to install Apple Quicktime

    ReplyDelete
  39. I have used your code in the past to embed songs into posts. Thanks!

    For some reason recently, it keeps autostarting although the code is "false" Let me know if you have any ideas as to why this is!

    yours-truly-mj.blogspot.com

    ReplyDelete
  40. Nevermind. I figured it out! Thanks for all these tutorials an tips! SO HELPFUL!

    ReplyDelete
  41. Thanks Peter, it really help.

    ReplyDelete
  42. Hey Peter, sorry I just barely saw your comment! Ok, so I actually use the third code from here: http://www.hypergurl.com/music.html

    and then I was embedding my files in my data nest, but lately I have not been able to use that site (it might have shut down?) so I need to find another site to host my music files as mp3s.

    And using this code didn't completely solve my problem: For some reason the autostart=false only works when people are viewing my page in any browser EXCEPT chrome. Chrome likes to do it's own thing and just start the music file.

    ReplyDelete
  43. yeah working, but when we go to next page the music restarts, do we have any option like to get a continued music even browsing into pages?

    ReplyDelete
  44. Now my blog sings !
    thanku very much

    ReplyDelete
  45. Hey it's not working in my blog !
    It show to download plugin .
    reply me ! Please.
    check it out my blog
    http://mycineinfo.blogspot.com

    ReplyDelete
  46. Maybe you need to install Apple Quicktime

    ReplyDelete
  47. Hi, I am so glad to have found your blog.. I am a newby at this. I made my first blog and wanted music on it but danged if I can get it in my head of what to do. I have the song in "MY MUSIC" and a folder in there with the song. So can you kindly walk me through this step by baby step please. Is it too late to add the music to this page I published or should I just try it on a new page. I would love to have it on the one published if I could. http://whatsgoingoninshirleysworld.blogspot.com
    I know about the gadgets but don't understand what I am to type in the box that has the http//
    and where to put the code on the sidebar. Thanking you in advance.. and anxiously waiting t hear from you.

    ReplyDelete
  48. Shirley, tell us where you want that music - as background music for the whole blog, embed it in the sidebar which you have to click to get the music to play or in an individual post?

    ReplyDelete
  49. thank you very much...
    but the explanation is too long!

    ReplyDelete
  50. Thanks for the explanation, although it didn't have to be very long.
    you can try
    http://flowplayer.org/plugins/index.html
    http://www.alsacreations.fr/dewplayer
    http://developer.yahoo.com/mediaplayer/

    I added the feature in my blog. Really helped. Traffic was glad I used it. Now they can listen to songs before downloading
    www.pawpav.blogspot.com

    ReplyDelete
  51. hello please can you do url to this song [URL=http://www.4shared.com/audio/n11LeZzN/mp3.html].mp3[/URL]

    so i can put it on my blog

    ReplyDelete
  52. The code you gave is the BB code for bulletin board and some forums. For HTML refer to make active links in posts and comments

    ReplyDelete
  53. This section contains information about who identified the specimen, how they identified it and what concept .logo design

    ReplyDelete
  54. You will first have to find a music file that is already hosted on the web, or if you have your own music file stored in your computer, upload it into a file host and then get the URL of the file.

    What do you mean by this, file host? Because I would like to upload my own music to my profile.

    ReplyDelete
  55. Now a file in your computer is only accessible via your computer, not via someone in the internet. To be accessible via the Internet the file must be uploaded to a server of a webhost. Via that webhost. If you want that in your blog, that webhost must allow hot linking.

    ReplyDelete
  56. Visit My Blog And Follow It Also Tell me What Can I Do To Improve My Blog

    ReplyDelete
  57. Hello just wondering if its better to download free non copyrighted music from a site like www.instrumentalsfree.com and avoid copyright issues from using popular music?

    ReplyDelete
  58. Thanx! Btw I set the autostart to true instead of false, so that it starts automatically.
    Now I just need to know how to make it to always be on the top. Anybody knows?

    http://dannesphotoshop.blogspot.se/

    ReplyDelete
    Replies
    1. you put it on the side bar, or add it in the page layout as an html gadget. or you can have it play automaticly as well.

      MY question is: is there anyother way than putting the music in a post on the main page, to get so you can do different music on each page? and I want different music when somone clicks a archived article or post, then when they are just on the main page with all posts. home page.

      www.elliswater.blogspot.com

      Delete

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