Audio player in paper style

Last Updated on July 2, 2026 by Editorial Team

This awesome audio player is great for both podcasts and general audio files. It’s free, open source and customizable, which makes it an awesome upgrade for the browsers default HTML audio element.

It’s built as native Custom Element using Polymer for production-ready cross-browser support, meaning that JavaScript, CSS and HTML5 are included.

Check out the LIVE DEMO.

Some of the awesome features:

• Custom title to fit your naming (useful for podcasts)
• Custom color to fit your web page style
• Detailed events tracking with Google Analytics
• Set the start time of your audio with the Offset property
• Auto play

More specs and usage info on its Githup repo via the Download button below.

Created by Nadi.

Install it:
– via Bower: bower install paper-audio-player
– or, download the latest release (zip) from Github:

What you see in the mockup is exactly what makes this component worth grabbing: a slim, horizontal audio bar sitting directly on top of a photo, with nothing but a round play button, a track title, and a timestamp.

There’s no chrome, no boxy control panel, no default browser styling fighting with your page. The paper-audio-player strips the audio element down to the essentials and lets it float over whatever background you give it, which is why it reads so well against that hot-air-balloon photo in the preview.

That orange circular button with the record-style dot icon is the visual anchor of the whole design. It picks up a single accent color and repeats it in the semi-transparent white bar behind the title text, so the player feels like one cohesive object rather than a bunch of separate controls glued together.

This is a paper-style aesthetic in the literal sense: flat planes, soft shadows implied by transparency rather than heavy drop shadows, and a layout that looks like a strip of card sitting just above the surface of the page.

Because the whole thing is a custom HTML element, adapting it to your own site is mostly a matter of setting attributes rather than rebuilding markup. You can swap in your own track title so it displays the episode name or song title exactly as you want it credited.

The color property means you’re not stuck with orange. Drop in a hex value that matches your brand palette and the play button, progress indicator, and text all shift together, so it holds up whether you’re building a music label site, a podcast homepage, or a portfolio page with a single ambient soundtrack.

Where this really shines is on pages where audio is secondary to a strong visual, like a photography portfolio, a travel blog, a band’s landing page, or a podcast episode page where the hero image or featured photo needs to stay the star.

Since it overlays cleanly on images the way it does in the preview, it also works well inside hero sections, article headers, or full-bleed banners where a standard audio tag would look clunky and out of place.

Working With Titles, Offset, and Autoplay

A few of the included properties are worth planning for before you drop the element into a page.

The title attribute is what shows up in that pill-shaped label, so keep it short if you’re naming podcast episodes or remix titles, since long strings will crowd the timestamp the way “Suit & Tie (Oscar Wylde Remix)” nearly does in the demo.

The offset property lets you start playback partway into a track, which is handy if you’re highlighting a chorus or a specific quote in a longer recording rather than making listeners sit through an intro.

• Use autoplay sparingly, since autoplaying audio on page load can frustrate visitors and is blocked by some browsers regardless of settings.
• Pair the player with a caption or credit line near the image if the track and photo are from different sources.
• Because the built-in analytics track events like play, pause, and completion, it’s a good fit for sites where you actually want data on listener engagement, such as podcast networks or music promo pages.

Visually, it pairs nicely with other flat, minimal UI elements: simple icon sets, sans-serif type, and muted or duotone photography like the sunset landscape shown here.

Avoid placing it over busy, high-contrast images, since the semi-transparent bar depends on a reasonably calm patch of background to stay legible.