How to Have a Music Box on Tumblr

To install a music box to your Tumblr theme, embed a music player widget in your theme code. Several music hosting services, such as Hypster and Grooveshark, provide custom code for Tumblr-compatible music widgets. Create an account on one of the widget sites, and then select the tracks or playlists to host on your Tumblr blog. The service generates custom code for the music widget to embed in your Tumblr theme. Sites like StreamPAD provide the music player widget code for Tumblr, but the you must provide the URL to a hosted playlist or track. If you simply want to share a song or playlist on your blog, use the Audio Post form to add music to your timeline.

Open a browser and navigate to one of the compatible music hosting sites (see Resources). Click the “Register” link in the Hypster home page.

Complete the account form, respond to the verification email, and then log in to your new account.

Click the “Tumblr Music Player" option, and then click one of the seven available Tumblr player widgets. The selected player opens.

Click the “Playlist” drop-down box, and then click the playlist to host. Drag individual tracks to the Track section to add single songs.

Click the “Get Code” button. The code for your Tumblr music widget is generated.

Open Tumblr and log in to your dashboard. Click the blog to modify in the right pane, and then click “Customize” to open the Customize tool.

Click “Edit HTML” to open the HTML editor, and then click the location in the code where you want the music player to appear. Press “Ctrl-V” to paste the music widget code.

Click “Update Preview” to view the changes, and then click “Save.” Click “Exit” to close the Customize tool. Open the page in a browser to view and test the player.

Click the “Create Account” button in the Grooveshark home page to register.

Complete the account form, respond to the verification email, and then log in to your new Grooveshark account.

Click “Create Playlist,” and then type a name for the list. Drag and drop tracks to the playlist to populate the list. You can also upload audio tracks from your computer by dragging and dropping the tracks in the Drop Tracks Here box.

Click the gear icon for the track or playlist to host on your Tumblr blog, and then click the “Share” option to open the sharing dialog box with the URL to the playlist highlighted.

Click the “Embed" option in the left. Formatting options for the player display. Change the width and height of the player, if desired. You can also choose new base, primary and secondary colors for the widget.

Click the “Preview” button to preview the player widget. When the widget is formatted to your specifications, click “Copy” to copy the URL to the widget code.

Right-click inside the code box, and then click “Select All.” Right-click again, and then click “Copy" to copy the widget code to your clipboard.

Open Tumblr and log in to your dashboard. Click the blog to edit, and then click “Customize” to open the Customize tool.

Click “Edit HTML” to open the theme code in the HTML editor.

Click the location in the code where you want the music player to appear, and then press “Ctrl-V” to paste the music widget code.

Click “Update Preview” to view the changes, and then click “Save.” Click “Exit” to close the Customize tool. Open the page in a browser to view and test the player.

Open the StreamPAD site in a browser, and then click the “Get It” option.

Click the “Tumblr” icon for your platform. The Get the Code box containing the code to copy to your Tumblr theme opens.

Drag the cursor over the code to highlight, and then press “Ctrl-C” to copy the characters.

Open Tumblr and log in to your dashboard. Click the blog to edit, and then click “Customize” to open the Customize tool.

Click the “Edit HTML” link to open the HTML editor.

Click the location in the code where the music player should appear, and then press “Ctrl-V” to paste the music widget code.

Change the URL in the “src=http://” reference in the widget code to the URL for your track or playlist.

Click “Update Preview” to view the changes, and then click “Save.” Click “Exit” to close the Customize tool. The page opens for previewing in the browser.

Log in to your Tumblr dashboard, and then click the “New Audio Post” icon to open the new post form.

Click the “Search" icon, and then type a track name, artist name or album in the Search box. As you type, matching entries appear in the form. Click the desired track. Note that all tracks that appear in the Search tool are designated for non-commercial use. You can embed this content into your blogs without violating any copyright laws. Proceed to the next step to enter a URL instead.

Click the “External URL” option, and then type the address of an externally hosted playlist or track in the URL field. Proceed to the next step to upload your own MP3 file instead.

Click the “Upload a File” option, and then drag and drop the MP3 file into the square icon. The file automatically uploads to the Tumblr servers. You can also click the icon to open a file selector and browse to the desired file. Click on the file, and then click “Open” to upload it.

Click the “Publish” button to publish the post.