cpu-audio

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, 480px and 320px wide. The element must be able to insert itself in any width constraints, in liquid responsive web-design fashion.

Some examples using <iframe>s :

Under 640px wide : Height and font-size is reduced, image is hidden.
Under 480px wide : Total time and chapters timeline are hidden.
Under 320px wide : Current time is hidden.

Modes

mode="compact"

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

No need to use title="", 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

↓ Unfoldable mode, by example : mode="compact,default" , the component will be displayed in compact mode in stand-by, but will unfold to default once it plays.

Personnalization

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

Highlighting text amond chapters

If you use a chapter track with name chapters, you can use a CSS rule to highlight a portion of your text with the playing audio.

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.

Playlists

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

Notes :

Global page controller

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

(except those included via <iframe>)

CPU Audio webcomponent

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