Skip to content

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


Notifications You must be signed in to change notification settings


Repository files navigation

CPU-Audio WebComponent

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


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 :

  1. if your URL has a hash with a timecode (, the service will position the named <audio controls> at this timecode (here, #TagID at 10 minutes) ;
  2. or, if a audio source (qualified by its url) was played in your website, and was unexpectedly exited, the service will reposition its <audio controls> at the same timecode.

During the page life :

  • if an <audio controls> anchor is linked with a timecode, as <a href="#sound&t=10m">, the service will play this tag at this timecode ;
  • no cacophony : when a <audio controls> starts, it will stop any other <audio controls> in the page ;
  • if you have a <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


TL;DR ? See it in action

  • hyperlink <audio> tags to a specific time, using not well-known Media Fragment standards ;
  • standards first, future-proof ;
  • only one single file to deploy ;
  • pure vanilla, no dependencies to any framework, so usable in any JS framework ;
  • progressive enhancement, can works even without proper WebComponent support ;
  • add an UI, customizable via attributes and CSS variables ;
  • exists in different graphic themes ;
  • responsive liquid design ;
  • recall the player where it was unexpectedly left (click on a link when playing) ;
  • play only one sound in the page ;
  • playlist with auto-advance ;
  • play only a range between 2 timestamps ;
  • chapters, using standards WebVTT ;
  • alternate navigation for a finest precision on smartphones ;
  • global <cpu-controller> .

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

HOW TO install

A unique and lightweight js file to install, without any dependencies.

Keyboard functions

When the interface got the focus, you can use those keys :

  • Space : play/pause audio
  • Enter : play/pause audio (only on play/pause button)
  • : -5 seconds
  • : +5 seconds
  • : back to start
  • End : to the end, finish playing, ev. skip to the sound in playlist
  • Escape : back to start, stop playing
  • and : move focus between entries in panels (Enter to select)

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).

Some links



Thank you to my lovely friends :

Really sorry, NerOcrO

Keeping in touch