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, grab the source from GitHub and include it at the bottom of your page with a <script> tag. 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 usingh 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="/picobel.default.css" />

<!-- And add the script tag at the bottom of the page... -->
<script src="/picobel-component.js"></script>

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

import "picobel/build/picobel-component.js";

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>