In this example, elements of the host page are highlighted when the player show some chapters, with only CSS and HTML.
Please note : This example must be run in a web server, not via file:/// protocol, due to CSP/CORS requirements from browsers. Please note that obviously a chapter track is unuseful for a live streamed audio.
Also note that the class is set when the page is loaded and before the element is playing only if the audio id is expressed in the hash url
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.
This feature works if a chapter <track> is correctly loaded and interpreted by cpu-audio. Once loaded interpreted, you can hide chapter panel and tracks in the player (with hide="chapters panels"), the feature and so the css effects will still work.
The context-style feature was inspired by the now defunct BBC mini website hommage to their 1980s TV show about computers.
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.