An audio WebComponent to provide an user-interface, timecoded links and some other features to an <audio> tag
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_includes
dist
src
tests-assets
tests
.gitignore
CHAPTERS_ED.md
CONTRIBUTING.md
FEATURES.md
INSTALL.md
LICENSE.md
LIVE.md
README.md
TODO.md
TROUBLESHOOTING.md
_config.yml
live_chapters.html
live_config.html
make.sh
tests-browser.html
tests-interface.html
tests-minimal.html

README.md

CPU-Audio WebComponent

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

Some links :

Version : 5 BETA. Licence GPL 3

Purpose

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 :

  • 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

Features

TL;DR ? See it in action

  • hyperlink <audio> tags to a specific time, Media Fragment standards ;
  • standards first, future-proof ;
  • only one single file to deploy ;
  • pure vanilla, no dependencies to any framework ;
  • progressive enhancement, can works even without proper WebComponent support ;
  • add an UI, customizable via attributes and CSS variables ;
  • 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 ;
  • 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.

Beware, WebComponents is a to-be-implemented-elsewhere standard. Will work mainly on :

  • Google Chrome
  • Firefox Nightly (63 +)
  • Safari Mac

To be tested on :

  • Safari iOS

Standard not implemented yet, the hash links will work but without the interface :

  • Edge

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

For handheld users, a long press on the timeline will show you a bench of buttons for a more precise navigation.

HOW TO install

Participate

Versions

  • April 2018 : 5 , forking to cpu-audio, WebComponent version
  • August 2017 : 4 , i18n, modularization, clone
  • August 2015 : 3 , forking to ondemiroir-audio-tag, for launching CPU radio show
  • October 2014 : Final version of timecodehash
  • September 2014 : 2 , correcting to standard separator
  • September 2014 : 1 , public announcing
  • July 2014 : 1.a , public release
  • June 2014 : 0.2 , proof of concept
  • October 2012 : first version, trashed

Credits

Thank you to my lovely friends :

Really sorry, NerOcrO

Keeping in touch