How to Have an Auto Player on Your Tumblr Blog

You can set up a music player to automatically start playing an audio clip when a visitor opens your Tumblr blog. Select an audio player that is supported in Tumblr themes and includes the Autoplay feature -- such as

Hypster, Grooveshark or Billy Player -- select the song or playlist you will use in your player, generate the widget code with the Autoplay feature enabled, and then install the generated code in your Tumblr theme. If you have already installed a music player widget that supports the Autoplay feature, edit the widget HTML code to enable that feature.

Step 1

Open Hypster, Grooveshark, Billy Player or a similar site in a browser, and then create an account, if necessary (see Resources).

Step 2

Create and save a playlist containing at least one song on the selected platform. Note that if you select Billy Player, you must insert one or more URLs to your own hosted playlists or songs, as the site does not host music; however, both Hypster and Grooveshark host a wide selection of audio content.

Step 3

Generate the player widget code. For Grooveshark, click the “Share Song” icon next to a single song to open the Share dialog box. To share a playlist, click the “Share” button next to the playlist in the playlist page. Click “Embed” in the Share dialog box to display the code for the embedded widget in a text box. For Hypster, click “Create” in the top navigation menu, click the “Create Player” option, and then click the player design to open the code options page.

Step 4

Click the “Autoplay” check box to enable the feature. The Autoplay option is under the song and playlist input fields on Billy Player; in Hypster and Grooveshark, it is under the Select Playlist drop-down box. Modify any other player options, such as the link or background colors, as desired. Click “Get Code” or the equivalent option to display the code in a text box.

Step 5

Select all of the code, and then press “Ctrl-C” to copy it to your clipboard. You can also right-click inside the code box with all characters selected, and then click “Copy” in the context menu to copy the code.

Step 6

Open your Tumblr dashboard, click the arrow next to the name of the primary blog, select the blog that will host your music player, and then click the “Customize” tab to open the selected blog for editing.

Step 7

Click the “Edit HTML” option in the Customize menu to open the theme editor.

Step 8

Paste the music player widget code into the desired location in your theme code by pressing "Ctrl-V." The exact placement of the code depends on the player, so follow the player site's instructions for placing your code -- in some players, you place the widget code in the "" tag, for example, while for others the widget resides in the "" tag.

Step 9

Click “Update Preview” to view the player in the Preview pane.

Step 10

Click “Save” to save your changes, and then click “Exit" to close the Customize menu.

Edit Existing Widget

Step 1

Log in to Tumblr, and then click the arrow next to the entry for your primary blog in the right sidebar of your dashboard. A list of your blogs opens.

Step 2

Click the blog that hosts your audio player widget to open the blog in the dashboard.

Step 3

Click the “Customize” tab to open the theme with the Customize menu attached to the left sidebar.

Step 4

Locate the HTML for your player widget in the theme code. Check the Description box in the Customize menu first. If the widget code is not in the Description box, the code is embedded in the theme HTML, in which case click the “Edit HTML” button to open the HTML editor, press “Ctrl-F” to open the Find box, and then type the name of your player to quickly locate the widget in the code.

Step 5

Edit the “autoplay=false” command to “autoplay=true”.

Step 6

Click the “Update Preview” button to preview your changes from the HTML editor.

Step 7

Click the “Save” button to save and publish your changes.