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:
Moderate

Other People Are Reading

Instructions

  1. 1

    Open your Web browser, go to the Tumblr.com 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

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

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