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 :
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.
- Bonjour à toi, Enfant du Futur Immédiat : Des chiffres et des lettres
- Lexique : Casser un chiffrement
- Plantage : La chute de l'Empire du chiffre Allemand
- Artefact du passé : La machine Enigma
- Histoire : Les génies du Biuro Szyfrów
- Ainsi naquit : Bletchley Park, le premier campus technologique
- Le Gourou : Alan Turing
Playlists
You can create playlists on a page, one or more. When a player is ending, the next one in its playlists starts.
Notes :
- The global controller (see below) is able to show the current playlist, and highlight the playing media.
- The playlist feature won’t work among iframes.
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