Picobel

Version: 3.1.3Node.js CIGitHub

Picobel.js (pronounced peek-o-bell, as in decibel) is a lightweight dependency-free JavaScript tool that converts html audio tags into styleable markup.

Using Picobel you can turn a plain old <audio> tag that looks like this:

Audio source: Freeze Them on Bandcamp

...into a fully styled set of elements that looks like this:

import picobel from "picobel";

picobel({ theme: "default" });

Or maybe like this:

import picobel from "picobel";

picobel({
    theme: "bare",
    components: ["playPause", "timer", "duration", "progress"]
});

Or how about some retro media-player vibes?

* Not in any way affiliated with the creators of the iTunes player

import picobel from "picobel";

picobel({ theme: "itunes" });

You can apply whatever styles you like (Note: this monstrosity is not an officially-supported theme!)

import picobel from "picobel";

picobel({
    theme: "comic-sans-ftw",
    components: [
        "playPause",
        "mute",
        [
            ["title", "artist"],
            ["timer", "progress", "duration"]
        ]
    ]
});

Why would I need this?

There are two reasons you might want to use Picobel:

  1. You want a uniform cross-browser experience for the audio players on your site. Pick a pre-made Picobel theme, and you're all set.

  2. You're frontender and CSS magician who loves to have control over every aspect the sites you create. You can use the markup-only version of Picobel, and write your own CSS.

The native html <audio> tag provides fantastic functionality, but gives you no styling options at all. Picobel rebuilds the audio player with regular html elements: you get all the functionality of the native audio element, and complete control of it's appearance.

Learn more

There are plenty of things you can tweak and configure in Picobel. Learn more here: