<CPU-Audio> web-component

An audio web-component to provide an user-interface, timecoded links and some other features. Open-source

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.

Features

See README.md on this project's github

You can point to a moment of any audio of this page via a <a href> tag, even outside from this page :

Chapters (↓ This section for demo purposes is static, not generated) :

  1. Bonjour à toi, Enfant du Futur Immédiat : Des chiffres et des lettres — (1:17)
  2. Lexique : Casser un chiffrement — (6:28)
  3. ♪ The Limp Twins - If it ain't broke... Break it ! — (9:16)
  4. Plantage : La chute de l'Empire du chiffre Allemand — (12:45)
  5. Artefact du passé : La machine Enigma — (20:45)
  6. ♪ Clair obscur - Es war — (29:22)
  7. Histoire : Les génies du Biuro Szyfrów — (33:19)
  8. Ainsi naquit : Benchley Park, le premier campus technologique — (38:35)
  9. ♪ Alexandre Desplat - The imitation game (opening) — (47:27)
  10. Le gourou : Alan Turing — (50:03)

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 @element implementation to complete this. The parent element is width-constraigned, so the webcomponent

Modes

mode="compact".
No needs for title="", poster="", canonical="" or twitter="" attributes excepted when you also use <cpu-controller>.

mode="button".
The component SHOULD NOT reduce under 640px wide.
No needs for title="", poster="", canonical="" or twitter="" attributes excepted when you also use <cpu-controller>.

Other modes exists, and some feature may be hidden. See INSTALL.md

Personnalization

With CSS variables, you can change some aspects, even only in a region of your page.

Playlists

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.

// Maybe the current playing cpu-audio will also be able to display the playlist

Global page controller

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

Keyboard controls

When the webcomponent has the focus, some keys are used to pilot it.

Tests

As I'm not perfect, some tests were written for non-regressions, conformity and check feature support by browsers.

Fallbacks

Browsers that don't support enough in webcomponents must display the <audio controls> tag as follow :