How to Put a Song on Tumblr With a Play Button in the Background

By Ashley Poland

Tumblr blogs allow users to show off who they are in artistic ways; for some users, this includes the use of music and other audio clips. To embed an audio player on your Tumblr blog, just add the code for it to the "Description" section of the customization page; this section supports HTML, CSS and other Web coding and is usually included on the sidebar on Tumblr themes. Audio files must be hosted on an external server, such as on a Web host; Tumblr doesn't offer file hosting.

HTML Audio Tag

If you just want a basic audio player on your Tumblr blog, you can use the HTML5 audio tag. The audio tag works with multiple file types, such as MP3, WAV and OGG. To view the play buttons for the HTML5 audio player, include "controls" as an attribute to the audio tag. If you want it to autoplay in the background, you can add the "autoplay" attribute as well -- but use this cautiously, as many users do not enjoy autoplaying music. You can use CSS to make some changes to the audio player, such as the width. For instance, reducing the width to 45 pixels hides everything but the play button.

Standalone Audio Players

While the HTML audio tag gets the job done, if you want a player with more customization options and features, you can turn to standalone audio players built for websites. However, these players require you to have Web space for storing and serving the necessary player files. WordPress Audio Player provides a standalone version that you can use on any website; with the files hosted on an external Web server, you can embed it into your Tumblr description with the media player code. However, modifying the player -- for instance, to include multiple files -- requires manual coding. Another alternative is Dewplayer, which uses Flash over HTML and scripting and has a few preset player options. If you want to customize it, it will generate custom code based on information you provide.

Music and Audio Services

If you don't want to bother uploading audio files and writing HTML, you can use an audio sharing service on your Tumblr blog. Spotify enables you to share your favorite songs using its embedded audio player; you can even use it for playlists you've created. You can upload your own audio files to Soundcloud, and add its embedded media player to the description section of Tumblr. Similar to Spotify, you can use Soundcloud's embedded player to share "sets," the service's equivalent to playlists.

Accessibility and Other Concerns

While it's tempting to set music to autoplay in the background of your page, seriously consider before doing so. While it can set a certain mood for the page, that mood is commonly "irritation" for visitors; many will close a page before it even loads when it features autoplay music. Not only does it irritate users, but it also presents an accessibility issue for visually impaired users. Further, it increases the load time on the page, another factor that often causes users to leave a website prematurely.