An audio WebComponent to provide an user-interface, timecoded links and some other features to an <audio>
tag.
Some links :
- Demonstration site
- 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
An hashtag observer for <audio>
tags with fancy interface, hyperlinks and share buttons.
When you load a page :
- 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) ; - 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
- 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
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 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
- 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
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
- professional http://dascritch.com
- blog http://dascritch.net
- twitter : @dascritch