Picobel Web Component

Note: Experimental as of version 3.0.3

Picobel is also available as a HTML Web Component (because why not?!). 

<picobel-player data-theme="default">
    <audio
        src="/audio-examples/taken-at-the-flood.mp3"
        title="Taken at the Flood"
        data-artist="Freeze Them"
        controls
    >
        Your browser does not support the <code>audio</code> element.
    </audio>
</picobel-player>

Note: by wrapping an HTML <audio> tag with Picobel, you're ensuring Picobel runs as a progressive enhancement. If the JS fails to load, for whatever reason, your users will still see a functional audio player.

Usage

To use the component, load the component script from the jsDelivr CDN with a <script> tag at the bottom of your page. If you want to use a theme, include the CSS in the same way as with regular Picobel. Now you can use the <picobel-player> component (and if you're using a theme be sure to set the data-theme attribute to the theme-name so the relevant styles are applied).

<!-- Add the stylesheet in your <head>... -->
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/picobel@3/build/picobel.default.css"
/>

<!-- And add the script tag at the bottom of the page... -->
<script src="https://cdn.jsdelivr.net/npm/picobel@3/build/picobel-component.js"></script>

If you're using npm, then you can import the component JS directly from the package:

import "picobel/component";

Note: as of v3.4.0 the component cleans up after itself: removing a <picobel-player> from the DOM stops playback, removes all event listeners, and restores the native <audio> element — so it's safe to use in single-page apps and dynamic layouts.

Examples

1. <picobel-player> loaded with no inbuilt styles

<picobel-player>
    <audio src="/audio-examples/taken-at-the-flood.mp3" controls>
        Your browser does not support the <code>audio</code> element.
    </audio>
</picobel-player>

2. <picobel-player> loaded with data-theme="skeleton"

<picobel-player data-theme="skeleton">
    <audio
        src="/audio-examples/taken-at-the-flood.mp3"
        title="Taken at the Flood"
        data-artist="Freeze Them"
        controls
    >
        Your browser does not support the <code>audio</code> element.
    </audio>
</picobel-player>

3. <picobel-player-default>

Note: Even more experimental.

I'm toying with the idea of releasing bundled components that come with theme-styles built in. <picobel-player-default> and <picobel-player-skeleton> are currently available for testing (although extremely alpha, as of v3.0.3).

<picobel-player-default>
    <audio
        src="/audio-examples/taken-at-the-flood.mp3"
        title="Taken at the Flood"
        data-artist="Freeze Them"
        controls
    >
        Your browser does not support the <code>audio</code> element.
    </audio>
</picobel-player-default>