Josh Nichols

Change the default color of Tumblr’s API audio player

While designing your own Tumblr theme, you have the option to choose between three different audio player colors for your audio posts: black, grey and white. If you’re pulling data using the Tumblr API, you are limited to just the default white player. With a slight change to the code, you can display it in other colors.

What the API returns

When pulling an audio post from Tumblr’s API you will get a result that looks like this:

 <audio-player>&lt;embed type="application/x-shockwave-flash" src="http://mrblank.tumblr.com/swf/audio_player.swf?audio_file=http://www.tumblr.com/audio_file/76328024/y1KTnuSvWjneoooxgDICn1bX&amp;color=FFFFFF" height="27" width="207" quality="best"&gt;&lt;/embed&gt;</audio-player>

Changing the color

To get other colors, simply look for the variable, color=FFFFFF and change the FFFFFF to whatever hexadecimal color you choose. This changes the background color of the player. Buttons and the play-bar are semi-transparent and sit on top of the color. You can generally use any color you want except for a very dark one.

If you want a black player, change the swf file audio_player.swf to audio_player_black.swf. This will use an opaque black player that will have light buttons.

Some XSLT for Symphony

To change the color with XSLT, you have to do a little bit of substring() selecting. Once you begin outputting the <audio-player> node, simply use this bit of code:

 <xsl:value-of select="substring-before(audio-player,'FFFFFF')" disable-output-escaping="yes"/>
 <!-- Your hex color -->
 <xsl:text>FFCC33</xsl:text>
 <xsl:value-of select="substring-after(audio-player,'FFFFFF')" disable-output-escaping="yes"/>

To change to the black player, use this:

 <xsl:value-of select="substring-before(audio-player,'.swf')" disable-output-escaping="yes"/>
 <xsl:text>_black</xsl:text>
 <xsl:value-of select="substring-after(audio-player,'audio_player')" disable-output-escaping="yes"/>

Note: the disable-output-escaping="yes" attribute is required because Tumblr escapes HTML entities for valid XML.

More control, please

If you desire more control over the player’s looks, you can give Dan Kantor’s JavaScript hack a try.