An audio WebComponent to provide timecoded links and other features to an audio tag

This project is maintained by dascritch

CPU-Audio features

An example with chapters.

Your browser DOESN'T support WebComponent fairly enough.

Following examples are not fully functionnal, as the interface is not shown and the browser display its native player. This is intentional.
Only the hash-links functions works.

Size constraints

Aspect changes when page’s width is under 640px and 320px wide. The element must be able to insert itself in any width constraints, in liquid responsive web-design fashion.

We are waiting CSS @element implementation to complete this. The parent element is width-constraigned, so should be the webcomponent.



mode="button" . The component should not reduce under 640px wide.

No need to use title="", poster="", canonical="" or twitter="" attributes for the two previous examples excepted when you also use <cpu-controller>. Other modes exists, and some feature may be hidden. See INSTALL.md


You can change some aspects of the interface via some handy CSS variables, even only in a region of your page.


You can create playlists on a page, one or more. When a player is ending, the next one in its playlists starts.

Note that the global controller (see below) is able to show the current playlist, and highlight the playing media.

Global page controller

↓ Controller only on the playing / last played <audio>

CPU Audio webcomponent

Crafted with ♥ from Toulouse, France, for CPU radio show