CPU-Audio features

An example with chapters :

Player didn't start (yet ?)

Your browser is loading very slowly, or 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

The default theme’s aspect changes when page 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 are reduced, image is hidden.
Under 480px wide : Total time is hidden, buttons are reduced, time-line is using the full available width under all the buttons.
Under 320px wide : Current time is hidden.

Modes

Most of the themes accept different kinds of presentation, via the mode="" attribute

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.

Advanced users can create their own graphic theme UI, as this one, minimilized in a single big button

Highlighting text amond chapters

If you use a chapter track with name chapters (you can generate them here)</a>, you can use a CSS rule to highlight a portion of your text with the playing audio.

Player didn't start (yet ?)

Your browser is loading very slowly, or 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>)

You can see it in action in the header of our mini-site.

CPU Audio webcomponent

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