<cpu-audio title="Au carnaval avec Samba Résille (2003)" poster="https://dascritch.net/vrac/.blog2/entendu/.1404-SambaResille_m.jpg" canonical="https://dascritch.net/post/2014/04/08/Au-Carnaval-avec-Samba-R%C3%A9sille" waveform="./tests-assets/waveform-sambaresille.png" twitter="@dascritch"
A generic WebComponent crafted with a hashtag observer for <audio> tags with fancy interface, hyperlinks, chaptering, playlist and share buttons.
When you load a page :
https://example.com/page#tagID&t=10m), the service will position the named <audio controls> at this timecode (here, #TagID at 10 minutes) ;<audio controls> at the same timecode.During the page life :
<audio controls> anchor is linked with a timecode, as <a href="#sound&t=10m">, the service will play this tag at this timecode ;<audio controls> starts, it will stop any other <audio controls> in the page ;<cpu-controller> in your page, it will clone the playing <cpu-audio> interface.This link starts the upper player at 20:45, and a link can limit playing between a start (0:05) and end (0:08) marks
<audio> tags to a specific time, using not well-known Media Fragment standards ;<cpu-controller> .It could have been done via polyfills or frameworks, but I wanted a plain standard, vanilla javascript, easy to install and configure.
A unique and lightweight js file to install, without any dependencies.
When the interface got the focus, you can use those keys :
For handheld users, a long press on the timeline will show you another interface for a more precise navigation (Desktop users can try it via a right click on it).
Thank you to my lovely friends :
Really sorry, NerOcrO