Skip to the content.

CPU-Audio WebComponent

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

Player didn't start (yet ?)

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.

Purpose

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 (https://example.com/page#tagID&t=10m), 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 :

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

Features

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.

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 :

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

Participate

Credits

Thank you to my lovely friends :

Really sorry, NerOcrO

Keeping in touch

CPU Audio webcomponent

Crafted with from Toulouse, France, for CPU radio show