How to Add Tumblr Audio Player to HTML

Written by jesse adams
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Add Tumblr Audio Player to HTML
Tumblr users can post audio files directly to their blogs. (Stockbyte/Stockbyte/Getty Images)

Tumblr, a free online blogging service, allows users to share content, photos, videos, links and audio files with just a few clicks. While the process of posting text, pictures, links and videos is relatively straightforward, the website uses a custom audio player for sound files. If you are creating your own Tumblr theme, or customising a theme without the audio player feature, you will need to know a few Tumblr-specific codes for audio posts to work on your blog.

Skill level:


  1. 1

    Open your Web browser, go to the home page, and log in with your e-mail address and password.

  2. 2

    Click the name of your blog at top of the Tumblr Dashboard, and click the "Customize appearance" button in the right sidebar.

  3. 3

    Click the "Theme" tab at the top of customisation page. Click the "Use custom HTML" button if you do not see lines of HTML and CSS code.

  4. 4

    Locate the section of the HTML that displays posts on the blog. In most blogs, it is located under a line of code that reads "<div id="posts">" or "<div id="content">."

  5. 5

    Type "{block:Audio}" (without quotation marks) anywhere within the "post" or "content" sections.

  6. 6

    Type "{AudioPlayerBlack}" without the quotation marks.

  7. 7

    Type "{block:Caption} {Caption} {/block:caption}" without quotation marks.

  8. 8

    Type "{/block:Audio}" without quotation marks.

  9. 9

    Click the "Update" button to preview how the audio player looks on your blog.

  10. 10

    Click the "Save + Close" button to update your Tumblr blog.

Tips and warnings

  • While not required, a working understanding of HTML and CSS will be beneficial when adding the audio player and audio post to your Tumblr website.
  • You can add other elements, such as artist information, album art and play counts, by adding the codes listed in the Tumblr theme resource documents.
  • You can choose one of three colours for the audio player. In Step 6, type "{AudioPlayerGrey}" for a grey player, "{AudioPlayerWhite}" for a white player and "{AudioPlayerBlack}" for a black player.
  • You can use CSS to manipulate how the audio post looks.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.