How To Add Music Onto Your Tumblr Blog

... Jupiterimages/BananaStock/Getty Images

Though you can publish an audio track or playlist in a Tumblr post, the post will only play when the user starts the Tumblr audio player in the post. Alternatively, embed a player in your Tumblr theme that will continue to play music while users scroll through your blog's pages. Several audio player widgets are freely available from sites like Hypster, SCM and Streampad. With Hypster, select a song or playlist, then build the audio widget around the audio link. Play any online track or playlist on your Tumblr blog with the SCM player. With Streampad, simply embed the player in your theme code to play all audio posts on your blog.

Explore this article

Hypster
Open Hypster in a browser
Click the Create option
Click the Create option-2
Type a name for the player in the Name field
Click the Player Color Scheme drop
Log in to your Tumblr dashboard
Right click inside the Description box
Click the Update Preview " button
Streampad
Open the Streampad
Right-click in the code box
Open Tumblr
Click the Edit HTML
Locate the
Click the Update Preview button
SCM Player
Open the SCM site in a browser
Click the Edit Playlist tab
Paste the desired URLs desired in the respective input
Click the Autoplay
Click the Repeat Mode drop-down
Click the Placement of Player Bar drop-down
Click the Customize link
Click Edit HTML
Click the Update Preview button

1 Hypster

2 Open Hypster in a browser

Open Hypster in a browser, then log in with your Hypster account credentials. If you do not have an account, click the "Register" link, then type an email address, username and password. Click the "Both" radio button to answer the question "I Am Interested In (Players, Playlists, Both)." Type the answer to the security question, then click the "I Agree to the Terms and Conditions" check box. Click the optional checkboxes to receive the newsletter and additional information, if desired. Click "Register." A verification email is sent to your email address; however, you can immediately log in to your account.

3 Click the Create option

Click the "Create" option in the top navigation menu, then click "Playlist." Click the "Add New Playlist" button, then click "Add New Song." Type a song title or artist's name in the Search box, then click the "Search" icon. Click the desired track to add the song to the playlist. Repeat selecting songs until you have composed the playlist to publish on Tumblr.

4 Click the Create option-2

Click the "Create" option in the top navigation menu, then click "Player." A list of available embedded player widgets opens. Click the thumbnail for the player you want to open the code generation page for the player.

5 Type a name for the player in the Name field

Type a name for the player in the Name field, then click the "Playlist" drop-down box and click one of your saved playlists. Click the "Autostart" check box to play the music automatically on your blog. You can also click the "Shuffle Playlist" option, if desired.

6 Click the Player Color Scheme drop

Click the "Player Color Scheme" drop-down box, then click the desired color scheme. Click "Get Code." The widget code displays in the Code box. Click the "Copy Code" button to copy the widget code to your clipboard.

7 Log in to your Tumblr dashboard

Log in to your Tumblr dashboard, then click the "Customize" link to open the theme for your primary blog in the Customize tool.

8 Right click inside the Description box

Right-click inside the "Description" box in the Customize menu, then click "Paste." The player code is pasted into the description of your blog. Note that you can also click "Edit HTML," then embed the widget code in another location in your theme's code.

9 Click the Update Preview " button

Click the "Update Preview" button, then click "Save." Click "Exit" to close the Customize tool. The embedded Hypster widget now plays your Hypster playlist on all pages of your blog.

10 Streampad

11 Open the Streampad

Open the Streampad Get It page in a browser, then click the "Tumblr" icon (see Resources).

12 Right-click in the code box

Right-click in the code box, then click "Select All" to copy the code to your clipboard.

13 Open Tumblr

Open Tumblr and log in to your dashboard. Click the "Customize" link under the name of your primary blog.

14 Click the Edit HTML

Click the "Edit HTML" link in the Customize panel to open the theme code in the editor.

15 Locate the

Locate the "</head>" tag, then right-click directly in front of the tag. Click "Paste" to paste the widget code.

16 Click the Update Preview button

Click the "Update Preview" button, then click "Save." Click "Exit" to close the Customize tool. The Streampad widget now displays on your users' browsers and plays your published audio posts on your blog.

17 SCM Player

18 Open the SCM site in a browser

Open the SCM site in a browser, then click the radio button next to the desired player skin in the Setup Wizard tool (see Resources).

19 Click the Edit Playlist tab

Click the "Edit Playlist" tab in the Setup Wizard, then click the "Manual Playlist" radio button to manually enter URLs to online playlists or tracks. You can also click the second radio button to use an RSS playlist, a SoundCloud set or a YouTube playlist.

20 Paste the desired URLs desired in the respective input

Type or copy and paste the desired URLs in the respective input boxes, then click "Next" to open the Configure Settings box.

21 Click the Autoplay

Click the "Autoplay" and the "Shuffle Playlists" options, if desired, then click the "Volume" slider. Select the default volume for the player.

22 Click the Repeat Mode drop-down

Click the "Repeat Mode" drop-down box, then click the "Repeat Playlist" or "Repeat Item" option to loop the playlist or song. You can also click "Play Playlist Once" to play the selection one time.

23 Click the Placement of Player Bar drop-down

Click the "Placement of Player Bar" drop-down box, then click the "Top" or "Bottom" option, depending on your preference. Click "Done" to generate the widget code. Drag the cursor over all of the code, then press "Ctrl-C" to copy the code to your clipboard.

24 Click the Customize link

Log in to your Tumblr dashboard, then click the "Customize" link under your primary blog name to open the theme for your blog in the Customize tool.

25 Click Edit HTML

Click "Edit HTML," then click just after the "<body" or "<body>" tag. Depending on your theme, the "body" tag may or may not have a closing bracket. Press "Ctrl-V" to paste the widget code.

26 Click the Update Preview button

Click the "Update Preview" button, then click "Save." Click "Exit" to close the Customize tool. The SCM player now displays in the top or bottom of the browser window for visitors to your blog.

About the Author

Based in the live music capital of the world, Tammy Columbo continues to work in the information technology industry as she has done for more than 10 years. While living in Austin, Columbo has contributed to high profile projects for the State of Texas, Fortune 500 technology companies and various non-profit organizations. Columbo began writing professionally in 2009.