An audio web-component to provide an user-interface, timecoded links and some other features. Open-source
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.
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) :
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
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
With CSS variables, you can change some aspects, even only in a region of your page.
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
↓ Controller only on the playing / last played <audio>
When the webcomponent has the focus, some keys are used to pilot it.
As I'm not perfect, some tests were written for non-regressions, conformity and check feature support by browsers.
Browsers that don't support enough in webcomponents must display the <audio controls> tag as follow :