Add Autoplay Background Music on Tumblr

I know that many Tumblr users really hate the idea of a music player set on autoplay, specially those that can’t be turned off. I’ve even seen groups created to unfollow these people. However, many of you keep asking how to do it so here is how to add background music playlists to Tumblr.

Since there are so many ways to put music on your tumblr, we’ll start out by creating an autoplay music widget with with hypster. You can also Read this tutorial to know how to download songs from Tumblr.

How to Put Music on Tumblr That Autoplays in the Background

For the autoplay widget we are going to use Hypster.com
You first need to register with them. go here and create an account.
Once you are logged in, go here. After you entered the name, go back to your account and scroll down until you find the playlists section, there you need to set the one you are interested in to ACTIVE, then go to search and start adding songs to your playlist, this will always be your autoplay background music, and you need to come back to the site and edit the playlist if you want different songs to play.
Now, go here to crete your autoplay music widget from hypster. Choose the playlist and check the enable autoplay option.
The code below is the embed widget that autoplays on tumblr (make sure the volume is up so you can actually verify it’s working). NOTE: THE CODE IS ONLY MEANT TO SERVE AS AN EXAMPLE, IF YOU USE IT IN YOUR TUMBLR BLOG, IT WILL DISPLAY OUR PLAYLIST, REMEMBER TO GRAB YOUR OWN EMBEDDABLE HYPSTER CODE.

<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMzE*MDg5MDEzMjYmcHQ9MTMzMTQwODk*NTg4MiZwPTIxMzc5MSZkPSZnPTEmbz1hNTg3ZTc3MGU3NmU*OGJlYjcz/YTg2ZGZiMTBmYjcyOQ==.gif" /><embed quality="high" style="width:370px;visibility:visible; height:300px;" type="application/x-shockwave-flash" height="300" width="370"  pluginspage="http://www.macromedia.com/go/getflashplayer" border="0" src="http://www.hypster.com/flash/player.swf?id=1907883:1950215:0&autoplay=true" FlashVars="color_bg=0x9A0000&color_border=0x9A0000&color_box=0x9A0000&color_songbg=0xFF9700&color_song_clicked=0xFECB81&color_Title=0x000000&color_btns=0xD4D0C7&color_title=0x000000" /><br /><a href="http://www.hypster.com/?src=player-text" style="font-weight:bold;font-size:12px">Get Your Own Free Hypster.com Playlist.</a>

The next step to have the background mp3 player is to strip a lot this code. First, you must delete the <img tag until you see /> (right before <embed tag begins). Then you need to delete the <a tag until </a>. Also, get rid of <br/> . Finally, we must make some mods to the final code that is to be embedded as the background player for Tumblr. You can see that there are two pairs of width and height tags. You must change the values of the height tags to 15 in both cases. Regarding the width tags, you can start by leaving them at 150, but that varies if you want to display the song title or not. Never delete the px word after each value.
This is how it should like once the editing for the Tumblr autoplay background music player is done;

Go to your Tumblr >> Customize Theme >> Edit HTML and insert it where you consider appropiate, whether it is the header, sidebar, or footer, the higher the better since you are giving the visitor a chance to stop the autoplay. You can also add the autoplay widget for tumblr in your description box.

Last but not least, read the following suggestions for inserting autoplay music on Tumblr;

If you want to add the autoplay widget on an individual post you can do it using the html button located on the edition tools. However, it wouldnt make sense since you want it to work on every single page/post of your Tumblelog.
All music widgets are quite similar in their structure no matter what site they are from, just give it a try changing the width, height, autoplay parameters to see how it finally shows up

How to Put Music On Tumblr

Besides Hypster, there are many other plugins that you can use to add music to your tumblr, streampad, SCM, tumblrplayer, beemp3, etc. In our opinion The best track player for tumblr is grooveshark (follow the link and learn how to install it). It has an endless stream of songs to choose from and is easily customizable.

We have individual tutorials that tell you how to embed music on tumblr, just follow the links below

More Resources To get music on Tumblr.

If you can’t manage to make your autoplay background music show up in your layout, just leave a link indicating the theme you are using and where you want it and We’ll try to help you.

139 Responses to "Add Autoplay Background Music on Tumblr"

← Older Comments

rachel
October 11, 2012 at 12:38 am

On hypster, there is no longer a button to chose for a Tumblr widget

[Reply]
Natalie
October 11, 2012 at 2:38 am

ive tried a bunch of times, but i still cant get my tumblr to play the music automatically, and ive tried getting it down at the bottom of the page, but it always stays at the top. what can i do to fix it?

[Reply]
Melissa
October 20, 2012 at 11:03 pm

This worked well for me, the only thing is when it appears on my tumblr page, the song plays but the incorrect title of the song is portrayed. Is there anyway i can fix this?

[Reply]
Amanda
October 20, 2012 at 11:13 pm

I put 15 songs on my playlist, but when i added it on tumblr only 5 songs played. What can i do to fix this?

[Reply]
Choopie
November 9, 2012 at 9:24 pm

On mine, the same song keeps replaying, no matter what. I tried fixing the code a million times and none of the songs will change! ;n; Anyone know how to fix that?

[Reply]
X.
November 18, 2012 at 5:23 pm

I’ve done everything this tutorial says to do but it doesn’t show up as just the song title and play/pause like it should, it still shows the big box, with the youtube video in it, no matter how I edit the HTML.

[Reply]
Sorra
November 27, 2012 at 3:06 am

I tried pasting the code in my custom CSS box at the bottom of the customization panel. It never ever shows up or works, though. And when I go back to customization, the code is totally gone.
Do you know what I did wrong?

[Reply]
Ariel
November 29, 2012 at 12:48 am

When I finished adding music to my playlist on Hypster and I clicked where you told me to so I could enable the embed player widget I couldn’t find the square that said “Tumblr” on it so that I could get the embed code. I only saw it under bookmark, how do I find the tumblr square so I can get my code to make my playlist?

[Reply]
Sara
December 1, 2012 at 5:53 pm

I followed all the steps and I got the player onto my page, but it’s just a box and it won’t play or do anything it just has the back, play, and forward buttons plus the box where the song should be. I did set it for autoplay but the box is blank and nothing will play. What did I do wrong?

[Reply]
Riley
December 6, 2012 at 3:06 am

I got the music player working fine, but it only plays one song then it stops. It also doesn’t let me click the ‘next’ button. How do i fix this?

[Reply]
Jordan
December 18, 2012 at 5:14 pm

I have tried putting it on autoplay and it wouldn’t play. I also tried it on manual and it still doesn’t play. I would appreciated some help on this matter.

[Reply]
Natalie
December 31, 2012 at 10:10 pm

i followed all the steps exactly as it says. it didnt work when i put it in my HTML thing, but it wouldn’t show up after i hit save. so i tried putting it in my description box and everything worked fine, except for the fact that there isn’t any music playing. suggestions please?

[Reply]
olivia
January 2, 2013 at 11:51 pm

Theme: Rubber Cement
I want it as my header

[Reply]
Chrissy
January 3, 2013 at 12:52 pm

hi~
i followed all the instructions but when i tried to adjust the height and width and clicked “Update Preview”, the title on the screen was right(since its the first song on my playlist) but the song playing was different..i checked my Embed Player Widget on hipster but i didn’t even checked the “Enable Shuffle mode”

please help.. T__T

[Reply]
Christina
January 3, 2013 at 9:03 pm

Hi! So I did all the steps and the players shows up and works, but not all of the songs in my playlist are playing, only a few. Why is that? Thanks!

[Reply]
Jonathan
January 6, 2013 at 7:09 pm

I got confused on Step 6. PLEASE HELP!!! Once I pasted it before it showed this credit card ad on the bar.

[Reply]
Sergio
January 12, 2013 at 8:00 pm

I have a totally layout theme and when I try to press pause or next the buttons doen’t work, instead, I get redirected to totally layouts…is there anything I can do? thanks

[Reply]
stephanie
January 13, 2013 at 2:20 am

everything worked fine for me until i went out of it the music isnt playing.
at all, what should i do and yes i have my volume up.

[Reply]
Betrice
January 13, 2013 at 6:54 pm

I did all the steps, but the title of the song that is playing won’t show… What do I do? Please help xx

[Reply]
alecia
January 15, 2013 at 1:42 am

i need help on how to get the link on to tumblr & i also need to know where to post the link under quotes ?

[Reply]
Amanda
January 26, 2013 at 2:09 pm

Hey…what player should I use…because I don’t see the things I need to change in the code

[Reply]
tennyscope
January 27, 2013 at 2:56 pm

it doesnt work.
i cant find the god damn embedding code and every time i put music into my playlist, there are like 5 of the same song and when i refresh, its all gone

[Reply]