How to Customize the Tumblr Audio Player

Audio is one of the seven different post types in Tumblr, and there's a default layout and style used for the widget that plays your selected track. You can manually modify some aspects of the player, both in the post creation window and by editing the HTML of your current Tumblr theme, but some characteristics are set by the Tumblr platform itself and can't be edited. To modify the HTML of your theme, click "Edit HTML" on the customization screen.

Audio Post Options

Upload an audio file to Tumblr and if the file has track, artist, album and album art embedded in it, this information appears in the post creation window. You can edit any of this data as required and add a caption if you'd like to. As with any other Tumblr post, you can add tags to the post as well. The same fields appear if you link to an external audio track elsewhere on the Web, but if you embed a track from another service, such as Spotify or Soundcloud, you can't edit the metadata associated with the track.

Audio Player Color and Sizes

Tumblr offers several variables that theme creators can use to change the appearance of the audio player. Look for a section in the theme HTML starting "{block:AudioEmbed}." This is where the audio player code starts. You can insert the code "{AudioEmbed-xxx}" to set the size of the audio player, where "xxx" is the width in pixels; choose from 250, 400, 500 and 640 pixels wide. You can also use the codes "{AudioPlayerWhite}," "{AudioPlayerGrey}" or "{AudioPlayerBlack}" to set the color of the default Tumblr audio player.

Play Counts and Download Links

Another variable enables you to show how many times a particular track has been played: Use "{PlayCount}" for a simple number, "{FormattedPlayCount}" for a number formatted with commas, or "{PlayCountWithLabel}" for a formatted number with a "plays" label. If the post is linking to an audio file hosted outside of Tumblr, you can make use of the "{ExternalAudioURL}" tag to point visitors towards the original source. All of these variables and links can be HTML and cascading style sheets of your choice to change their appearance and layout on screen. If you're not comfortable writing HTML and CSS of your own, study some of Tumblr's free themes to see how the authors apply these placeholders.

Track Metadata

The variables "{AlbumArtURL}," "{Artist}," "{Album}" and "{TrackName}" report back the metadata for the track as entered (or automatically filled out) in the post creation window. It's up to you how this information is shown on screen. You can choose to display all of a track's details or hide everything except for the album art, for example. Again, you can format the text font, size and color of these variables using the HTML and CSS code applied to the blog. You may find it easier to modify the existing code rather than starting again from scratch.