FEATURES.md

CPU-Audio features

An example with chapters :

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 :

<style scoped> #constrained div { border : 1px black solid; margin :2px auto; padding : 4px;} #constrained iframe {width : 100%; height: 70px} @media (max-width: 640px) { #constrained .size_2 { display : none; } } @media (max-width: 480px) { #constrained .size_3 { display : none; } } @media (max-width: 320px) { #constrained .size_4 { display : none; } } </style>

Under 640px wide : Height and font-size are reduced, image is hidden. <iframe src="./examples/iframe_for_dimension.html" ></iframe>

Under 480px wide : Total time is hidden, buttons are reduced, time-line is using the full available width under all the buttons. <iframe src="./examples/iframe_for_dimension.html" ></iframe>

Under 320px wide : Current time is hidden. <iframe src="./examples/iframe_for_dimension.html" ></iframe>

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.

<style class="showcode" scoped contenteditable>/* you can edit to test it right now */
    #personnalization-demo {
        --cpu-background : yellow;
        --cpu-color : green;
        --cpu-playing-background : yellow;
        --cpu-playing-color : green;
    }
</style>

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), you can use a CSS rule to highlight a portion of your text with the playing audio.

<style> .cpu_playing_tag_«highligths»_cue_«chap-1» #highligths_c1, .cpu_playing_tag_«highligths»_cue_«chap-2» #highligths_c2, .cpu_playing_tag_«highligths»_cue_«chap-4» #highligths_c4, .cpu_playing_tag_«highligths»_cue_«chap-5» #highligths_c5, .cpu_playing_tag_«highligths»_cue_«chap-7» #highligths_c7, .cpu_playing_tag_«highligths»_cue_«chap-8» #highligths_c8, .cpu_playing_tag_«highligths»_cue_«chap-10» #highligths_c10 { background : #ddd; outline : 1px solid black; } </style>

• 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.