CPU-Audio WebComponent
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 :
- 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,#TagIDat 10 minutes) ; - 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
Features
- 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.
- How to install, deploy and customize on your server
- You can try playing with our live configurator tool
- See it running in our demonstration site
- See basic examples and applications with advanced use cases
- A React .jsx example
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
- Demonstration site
- JS installable code
- Code repository, Latest stable release
- Frequently Asked Questions
- Blog posts about its creation and development : Série cpu-audio sur dascritch.net
- How to cite a podcast, now you can support time positions URL
- Main author : Xavier “dascritch” Mouton-Dubosc
- Licence LGPL 3
Participate
Credits
Thank you to my lovely friends :
- Thomas Parisot for suggestions
- Loïc Gerbaud, Guillaume Lemoine and Guillaume de Jabrun for bug-hunting
- Benoît Salles and Michel Poulain for testing
- @mariejulien about CONTRIBUTING.md
- Christophe Porteneuve of Delicious Insights to kick my ass on modern javascript.
- scombat for a wonderful wrapper of cpu-audio.js in React
- Éric Daspet for its remarks on documentation
- Gabi Boyer for helping me avery a lot to debug iOS issues
Really sorry, NerOcrO
Keeping in touch
- professional http://dascritch.com
- blog http://dascritch.net
- twitter : @dascritch
CPU Audio webcomponent
Crafted with ♥ from Toulouse, France, for CPU radio show