Bienvenue sur karaoPrint.js, un outil JS pour créer des karaokés en HTML / CSS, basé sur la YouTubePlayer API.
Brief
Workshop brief ici
Demo
Ici une live chanson en action.
Getting Started
- Télécharger le Starterkit
-
Dans le fichier index.html, renseigner le lien youTube de votre chanson, dans l'attribut data-src de l'élément qui porte la class "track" :
<div class="track" data-src="http://youtube.com/?"></div>
-
L'élément qui porte la class "slides" contient tous les slides de votre karaoke. Chaque div enfant est un slide. Vous êtes libre d’en ajouter autant que vous voulez.
<div class="slides"> <div data-slide="0" class="sing"> Welcome to karaoprint.js </div> <div data-slide="1"> Yeeaahh </div> </div>
-
Ce qui importe dans chaque slide, c'est l'attribut data-slide. Il contient la seconde à laquelle ce slide doit s'afficher. C'est lui qui permet de créer l'animation. Il vous permet également de viser le slide dans le CSS
<div data-slide="0" class="sing">
-
La class "sing" indique que le slide est actif. Elle doit donc être présente sur le tout premier (sinon il n’apparaît pas).
<div data-slide="0" class="sing">
Gérer le style
Pour appliquer votre propre karaoStyle, insérez votre CSS dans le fichier assets/css/custom.css et pas dans le fichier assets/css/karoprint.css
Tips
CSS
- Flexbox → https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- CSS Grids → https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
- Media Queries → https://www.w3schools.com/css/css_rwd_mediaqueries.asp, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
- Glyphs → https://unilist.raphaelbastide.com/
- Animations → https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
- Units → https://www.w3schools.com/CSSref/css_units.asp
- Can I Use _ ? → https://caniuse.com/
Fonts Libres
- Use and Modify → https://usemodify.com/
- Velvetyne → https://www.velvetyne.fr/
- GoogleFonts → https://fonts.google.com/
- Font Squirrel → https://www.fontsquirrel.com/
- Font Library → https://fontlibrary.org/en
- By Womxn → http://design-research.be/by-womxn/
- OSP Foundry → http://osp.kitchen/foundry/
- Sébastien San Filipo → http://love-letters.be/foundry.html
- Omnibus Type → https://www.omnibus-type.com/
- Temporary State → http://typefaces.temporarystate.net/preview/
Refs
Karaoke
- Movieprint → http://movieprint.codedrops.net/
- eSpeak → http://espeak.sourceforge.net/
WebToPrint - Ressources
- PrePostPrint → https://prepostprint.org/doku.php//en/introduction
- Post Digital Publishing Archives → http://p-dpa.net/
- Library of the Printed Web → http://libraryoftheprintedweb.tumblr.com/, https://printedweb.org/
WebToPrint - Ojects
- Médor
- LoFi Poster Machine by Tim Rodenbröker
- Code X
- Critical Atlas of Internet
- I think that conversations are the best, biggest thing that free software has to offer its user
- G.BODYWORK
- La Villa Hermosa " BRASS → Print tool v1
- for with in
- John Caserta Web to Print
- Design fluide
- Can you dig it
- Copy This Book. An Artist’s Guide to Copyright
- The Newspaper of the Air
- Design the public domain
- Print Capsule
- Drawing Curved
- DadaPrint3r
- Omnirama: journal algorithmique
- Self-Assembling Book
- Inhabitations
- VLM
- La Balsamine 2018-2019
- La Balsamine 2017-2018
- La Balsamine 2011-2012
- La Balsamine 2016-2017
- La Balsamine 2014-2015
- La Balsamine 2012-2013
- Phillip Parker
- Le Tigre
- <o> future <o>
- Anonymous press
- Raphaël Bastide
- Homepape
- Frankenfont
- Google Book
- The death of the author
- The death of the author
- Cnap catalogue
- Working On My Novel
- Eric Schrijver - Hybrid Publishing Back To The Future Publishing Theses at the KABK
- Loraine Furter
- deconstruction<
- Workshop outils d'édition hybrides
- Internet Cache Self Portrait series
- villa Noailles FIMPAH
- villa Noailles Domestic pools
- villa Noailles Design Parade
- villa Noailles Pitchouns
- Constant flyers
- Le geste radiophonique
WebToPrint — Tools
- css print
- css print frameworks
- Html2print
- paged.js
- Letter
- Even
- Libris
- Bindery.js
- weasyprint
- Basiljs
- Yah2p
- pad2print
- Ethertoff
- Print With CSS
WebToPrint - Enthousiastics
- OSP → http://osp.kitchen/
- La Villa Hermosa → http://design.lavillahermosa.com/
- Bonjour Monde → http://bonjourmonde.net/
- Loraine Furter → https://lorainefurter.net/en
- Eric Schrijver → https://ericschrijver.nl/
- g.u.i. → https://www.g-u-i.net/en
- Sarah Garcin → http://www.sarahgarcin.com/
- Raphaël Bastide → https://raphaelbastide.com/
- Louise Druhle → https://www.louisedrulhe.fr/
- Lena Robin→ http://www.lenarobin.xyz/