Sunday, October 10, 2010

Embed MP3 into blog/website with a Flash Player

Unlike videos, where you can upload to Youtube, there aren't a lot of places where you can upload your audio files and later embed them to your blog/website.
Of course you can always use the simple <embed src="yourmusic.mp3"></embed> html code, but you will need to install the Apple QuickTime plugin to play it on your browser.
On the other hand, nowadays Adobe Flash is almost omnipresent in all computers. Coupled with the increasing usage of Dropbox, BooMP3 is a light-weight & free flash MP3 player that allow you to embed MP3 uploaded to your Dropbox account into your blog/website.


The Main page of BooMP3

Embedding using BooMP3 follows 5 simple steps:

Step 1: Register at Dropbox
Oh ya! Do use the link above, cos Dropbox says: "For every friend who joins Dropbox, we'll give you BOTH 500 MB of bonus space!"

Step 2: Optional but highly recommended: Login with Facebook
With an registered account, you can better keep track of your uploaded files
like this

Step 3: Upload an mp3 file to your Dropbox
1. Go to Dropbox website
2. Go to the 'Public' folder
3. Click "Upload" and upload your mp3 file


Step 4: Copy it's public URL
1. Go to Dropbox website
2. Find your mp3 file
3. Hover your mouse over it and click small blue down-pointing triangle

4. Click "Copy public link"

Step 5: Paste the link at the text field
and click 'Save'

And there you have it, a flash MP3 player for your blog/website.
Just copy and paste the html code. If you want, you can tick the checkbox □ for Autoplay and Loop. You can even create playlists for your uploaded songs.

An example of my uploaded song
Perfect Blue - Sungha Jung

Perfect Blue - Sungha Jung

39 comments:

boomp3.com said...

Great how-to! I've just put a link to it on boomp3.com main page:)

GES said...

Wow! It is an honour.
and thanks for creating such a wonderful web application.

DIRETO DA GELADEIRA said...

Como eu faço para colocar várias musicas de uma só vez, tipo um playlist.

GES said...

Thanks for visiting. View my next post for method of adding songs to playlist.
It's definitely not the best way, but that's what I can think of now with my limited knowledge of html.

Joe said...

Is there a way to lower the volume?

John Link said...

< a href="http://db.tt/IZOm4UV"> Please, join and add bonus space for me and for you ;) < /a>

Anonymous said...

http://db.tt/aJkBaWT

Amelia said...

Awesome!! Thanks a lot so that I could share my mp3's easily.

For those who doesn't have a Dropbox account, welcome to use my referral link to gain 2GB + EXTRA FREE 250MB storage, which sum up to a total of 2.25GB.
http://db.tt/4bhwbD4

Batti's Repostería Suprema said...

Hi, i just copied the html code and my question is: where i should paste it on my blog?

La Botica Parroquial said...

Why do i have an error?
I followed all the instructons and at the time i copy the URL to the sLINK mall box and click SAVE... it comes out error....

Please help

GES said...

Can you do a printscreen of the error? i'll try to help.
you can send it to ganengseng@gmail.com

tony said...

Very useful for access my music on multiple machines! Thanks!

Here is my referal if you haven't gotten your own drop box account:

http://db.tt/bSdpIkB

mark said...

Just stumbled across your blog, but learned about Boomp3 last summer.

I signed up for the dropbox referral party thing, shared a few songs, and got a few clicks... and it lasted less than two weeks.

Last click was July 24. When trying to register anew, Boomp3 tells me that my referral link is already in use.

Is this a limited-time thing? Is the link only shared for a few days or weeks? Or is this a glitch?

Thanks.

GES said...

aiks. I must have overlooked this comment. Sorry Mark.

I am actually just a blogger, and not in anyway related to BooMP3. This post was written because I think it was a very good app, so I wanted to share with my friends and readers.

So a better way to get solutions to your question would be to e-mail the developers at
support@boomp3.com

Cheers! And thanks for visiting

Romina Mamá XXI said...

Great, thank you so much!!

Seguidor said...

Ok that sounds very good but i dont got the last screen with the customized player i just reached the application today any clue

GES said...

The customization are just extra option

Autoplay: Straight away play when the page is loaded

Loop: Continuous playing

In the default situation where the boxes are left unchecked, the song will only play when you click the 'play' button, and it will only play for once.

Generic Zoloft said...

You have a very good blog that the main thing a lot of interesting and useful!

GES said...

Thanks! =)

html5 audio player said...

Thanks for the share. I learned a lot from this blog. Keep updating about information about this same category.
html5 audio player

html5 audio player said...

I just gathered lot form this blog. I bookmarked this site for continuous visit.

Top seo forums said...

Great post you have been shared. Thanks..

Smart Talks said...

You are the SAVIOR of the audio blogosphere. I have a blogspot blog and have been all over the internet looking for an embedded player to work on my blog, for me mp3s. I got as far as getting stuff uploaded to Dropbox, but couldn't find any code that worked consistently and across browsers. That is, until I came across your post.

Domo Arigato

cm punk said...

this is such a nice and useful information for us...i appreciate urs word.......Flash Development Services

0845 numbers said...

When it comes to portable MP3 players, you want one that has a long battery life. The very essence of a portable player is the fact that you can take it anywhere you wish. That won’t work very well if your player’s battery runs down quickly and you are always searching for a place to recharge it.

ACSG SG said...

fiz tudo certo, conforme o tutorial acima, mas deu um erro:

Application error

Change this error message for exceptions thrown outside of an action (like in Dispatcher setups or broken Ruby code) in public/500.html

alguem pode me explicar sobre isso?

g said...

Really its Amazing article. This is very nice and you had presented this article in such a manner that everyone can understand it easily!

Анатолий Кулинкович said...

I created an account at Dropbox, uploaded files there, but I have no folder called 'Public' in my Dropbox
and my attempts to get link leads to the fact that I get, for example link
https://www.dropbox.com/s/u3nst5ilw3tzju1/Pokoj-nasha-priroda.mp3,
paste that link to http://boomp3.com/mp3s/save_url, but get the response 'File not found at that URL'.

What advise to do?

Anatoli said...

Thank you very much for this detailed article!

GES said...

New Dropbox account created after 4 Oct 2012 will no longer have the Public folder by default.
If you want to enable it, you can read more here
https://www.dropbox.com/help/16/en

or just click the link below to enable the public folder.
https://www.dropbox.com/enable_public_folder

Bridal saree said...

everyone else ritten by brain dead individuals? :-P And, if you are posting on additional social sites, has already said, but I do want to comment on your knowledge of the topic. Youre truly well-informed. I cant believe how much of this I just wasnt aware of. Thank you for bringing more information

Anonymous said...

You need this code : https://dl.dropboxusercontent.com/ etc. and file will play :)

Anonymous said...

you are the best!!!! thanks man!

mehndi designs said...

Hi! Would you mind if I share your blog with my twitter group? There's a lot of folks that I think would really enjoy your content. Please let me know.

GES said...

Hi, Sure.
But I have not updated my blog for quite some time. =P
Actually, that's since I gotten busier n busier with my Graduate studies.
But I'm happy that I still get replies and comments once a while, and even happier to share them.

Anonymous said...

a mi me gusta mucho http://de-regalo.com/

Musica Gratis said...

buenisima la pagina!

rap said...

Is it possible to post the player without allowing the mp3 file to be downloaded? Thanks!

GES said...

As far as I know, you can't.
However, you can remove the content between <a href> and </a> to remove the link to the site.
By the way, this player tool was not written by me, I just found it useful and promoted it here :)