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
- 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.
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
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).
- 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
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
- professional http://dascritch.com
- blog http://dascritch.net
- twitter : @dascritch