Display The Album Art, Track Name and Artist in your Tumblr Audio Posts

When you publish audio posts on Tumblr and want the Album Cover, Track Name, Artist and Album Name displayed along with the song and the audio player you must insert some code within your theme html, if your layout doesn’t include it already.

Don’t get scared since it’s easy. Take into account that only the mp3 audio files hosted on Tumblr can be displayed this way (it’s totally different from having a tumblr music player in your sidebar with a pre-built playlist). You can also tweak the theme css to make this look different, even with a much bigger album artwork, but that’s a thing to write about in another post.

UPDATE: This post was written quite a long time ago. Today, most themes already have the Album Art code to extract all the info from an mp3 file and show it in an audio post. You should first seek for this code within your them to verify you don’t have it before starting to add it yet again. If you have it, and still the Album Art, Artist Name and Track Title don’t appear, it means that the lack of info lies within your mp3 file.

How To Display Album Artwork, Artist and Track Name in Your Audio Posts.

Go to Customize Appereance >> Edit HTML
Once there, with control+F, look for the following code; {block:Audio}
Right after {block:Audio} you must paste the following lines, if you read each one of them you will see that they represent each part, the album artwork, the Track Name, etc.

    {block:AlbumArt}
    <img src=”{AlbumArtURL}” />
    {/block:AlbumArt}
 
    {block:Artist}
    Artist: {Artist}
    {/block:Artist}
 
    {block:Album}
    Album: {Album}
    {/block:Album}
 
    {block:TrackName}
    Track: {TrackName}
    {/block:TrackName}

Now save and close, then publish an audio post or just check an old and check how it looks

You can see an example of this is displayed on a audio post here.

If you are still wondering how to get music on tumblr, don’t lose time anylonger, check our post and learn how to quickly add tons of free tracks from widgets like Grooveshark and Hypster.

18 Responses to "Display The Album Art, Track Name and Artist in your Tumblr Audio Posts"

Victoria
July 20, 2010 at 6:19 am

wow worked perfectly thank you

[Reply]
Miranda
November 25, 2010 at 9:47 am

Hi this technique didn’t work for me. After I inserted the text after {block:Audio}, and saved and refreshed the page, it was still blank. Any suggestions?

Thankyou.

[Reply]
Mr. Tumblr Reply:
March 22nd, 2012 at 7:13 pm
Why don’t you try uploading an mp3 file that comes from a safe source and contains all the actuall information needed to display the album artwork?

[Reply]
Jennifer
May 6, 2011 at 8:17 pm

The code’s not working out for me. I’ve tried a few different times with varying results. Sometimes I can get the image, but no other info. Other times, the other info and no photo. Another time, the code seemed to drastically alter my theme (washing out the color on some, but not all pages..?) and then the code seems to get rejected and vanishes from the theme’s code.
I’m using Papercut by Peter Vidani.

[Reply]
Andrew
August 25, 2011 at 7:50 am

I used this and it all worked (thank you), but the album artwork. There is just a tiny blue square with a question mark where the album art should be. How do I fix that?

[Reply]
Mr. Tumblr Reply:
March 22nd, 2012 at 7:12 pm
Upload an mp3 file that actually contains the album artwork.

[Reply]
IvonneImagines
August 28, 2011 at 2:34 am

Great tutorial, helped out a lot. However, I have one problem – after putting in the code and checking to see if it worked, I noticed that only the album art/track name show. The album art won’t show no matter what I do.

The theme I’m modifying -did- originally come showing only album art and the player, and it worked fine. It just suddenly stopped working.

I’m wondering if it is my coding or maybe it’s tumblr?

[Reply]
Mr. Tumblr Reply:
March 22nd, 2012 at 7:11 pm
It’s not the code that is wrong, but the mp3 file.

[Reply]
Mimi
September 8, 2011 at 9:01 am

will someone please tell me how to code my theme so that when I post audio, the title of the post is the audio track info/title and NOT the description (as it currently is). It is a problem because in a feed reader, readers would not know what the content or audio actually IS unless I put that in the description and then it would be displayed twice. . .

[Reply]
romy
January 11, 2012 at 2:42 pm

I’ve done what you told, but it’s not working for me, it displaying the code instead, what should I do?

[Reply]
Mr. Tumblr Reply:
March 22nd, 2012 at 7:10 pm
You are doing it wrong. Probably pasting the code in the wrong spot

[Reply]
Nix
January 17, 2012 at 6:16 am

Hello! I tried this and everything worked except for the Album Art display. It still didn’t show the photo. What should I do?

[Reply]
Mr. Tumblr Reply:
March 22nd, 2012 at 7:09 pm
If the rest worked, it means that the lack of album art image is within the mp3 file.

[Reply]
Amy
January 21, 2012 at 5:00 am

There’s actually a tiny mistake in this!
There should be no / in the second line after {AlbumArtURL}” /
Take this out and it’s perfect!

[Reply]
Mr. Tumblr Reply:
March 22nd, 2012 at 6:58 pm
Fixed. Thanks a lot Amy !!.

[Reply]
Aidan Brintnell
March 22, 2012 at 8:35 pm

I’ve tried this coding over and over again, I even took the ? out of the line. I always get constant broken picture links however and i don’t know how to fix it. I’ve tried re uploading the image and it never seems to work.

[Reply]
Mr. Tumblr Reply:
March 23rd, 2012 at 12:24 pm
It’s not about the code, the fact the you actually get a “broken picture” means that the code actually tries to pull the image from the mp3. The problem lies within the file itself.

[Reply]
rica
January 24, 2013 at 11:50 am

I tried it just using the album art block, as I just want the album art and it didn’t work, it just shows a tiny broken image thing. I’m sure it’s not the mp3 file as the artwork shows when on my dashboard, and the broken image thing shows in all audio posts. I’m not sure what I’m doing wrong?

[Reply]