An audio WebComponent to provide timecoded links and other features to an audio tag

This project is maintained by dascritch

CPU-Audio WebComponent

An audio WebComponent to provide an user-interface, timecoded links and some other features to an <audio> tag.

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.

Some links :

Version : 6.2 Licence GPL 3


An hashtag observer for <audio> tags with fancy interface, hyperlinks and share buttons.

When you load a page :

  1. if your URL has an hash with a timecode (page#tagID&t=10m), the service will play the named <audio controls> at this timecode (here, #TagID at 10 minutes) ;
  2. else, if a <audio controls> with a url <source> was played in your website, and was unexpectedly exited, the service will play the <audio controls> at the same timecode.

During the page life :

This link starts the upper player at 20:45


TL;DR ? See it in action

It could have been done via polyfills or frameworks, but I wanted a plain standard, vanilla javascript, easy to install and configure.

WebComponents will work mainly on :

WebComponent standard won’t be implemented, the hash links will work but without the interface :

Keyboard functions

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.

HOW TO install




Thank you to my lovely friends :

Really sorry, NerOcrO

Keeping in touch

CPU Audio webcomponent

Crafted with ♥ from Toulouse, France, for CPU radio show