Skip to content


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