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

Documentation can be found at picobel.tomhazledine.com.

Quick start

Install from npm

npm install picobel

import picobel from "picobel";

picobel();

// ...or with options:
picobel({ theme: "default" });

React

import { Picobel } from "picobel/react";

<Picobel theme="default" />;

Install manually

If you prefer not to use npm, you can include the Picobel build file directly from the GitHub repository:

<script
    type="text/javascript"
    src="https://raw.githubusercontent.com/tomhazledine/picobel/main/packages/picobel/build/picobel.js"
></script>
<script type="text/javascript">
    picobel();
</script>

Versioned builds (e.g. picobel.3.3.0.js) are also available in the same directory if you need a pinned version.

CSS (optional)

Picobel's primary aim is to provide structured markup for styling audio players. If you're committed to writing all your own CSS then you do not need to include any of the Picobel stylesheets (although feel free to use the pre-made themes as inspiration or as a jumping-off point for writing your own styles).

Picobel also comes with several pre-made themes. Adding a theme is a two-step process:

1. Declare the theme option when initialising Picobel.
2. Include the relevant stylesheet in your project.

picobel({ theme: "default" });

CSS files for each theme are available in the /build directory. The filename convention is picobel.THEME_NAME.css.