CPU-Audio WebComponent

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

Some links :

• Demonstration site
  • Features
  • How to install
  • Live configuration
• JS installable code
• Code repository, Latest stable release
• Informations (in french) : Reconstruire son lecteur audio pour le web
• Main author : Xavier "dascritch" Mouton-Dubosc
• How to participate to this project

Version : 5.3 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.

WebComponents will work mainly on :

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

WebComponent standard won't be implemented, 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

• How install, deploy and customize on your server
• You can try playing with our live configurator tool, event it isn't perfect yet.
• Known problems and misconfigurations

Participate

• Contribute in any way
• Tests
• Bugs, issues, tickets and features
• What to do, next

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 :

• Thomas Parisot for suggestions
• Loïc Gerbaud for corrections
• Guillaume Lemoine and Phonitive for helping
• Benoît Salles for testing

• @mariejulien about CONTRIBUTING.md

Really sorry, NerOcrO

Keeping in touch

• professional http://dascritch.com
• blog http://dascritch.net
• twitter : @dascritch