☆☆ karaoPrint ☆☆

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

Organiser le webToPrint

Le web offre la possibilité d'attribuer différents médias aux feuilles de style css. Ainsi, il est possible de gérer à la fois le web et le print d'un objet à partir d'un même code html.

Renomez la feuille de style custom.css par screen.css. Puisque nous générons plusieurs médias de sorties, cette feuille devient notre style web et plus notre style global.
À l'intérieur du dossier assets/css, créez un nouveau dossier à votre nom (assets/css/your-name). Dans ce nouveau dossier, déplacez le fichier screen.css (assets/css/your-name/screen.css)

Ajoutez le média screen aux feuilles de style karaoprint.css et screen.css, pour que le style web ne s'applique pas sur l'édition.

							
	<link rel="stylesheet" type="text/css" href="assets/css/karaoprint.css" media="screen">
	<link rel="stylesheet" type="text/css" href="assets/css/your-name/screen.css" media="screen">

Le média peut également se spécifier en utilisant les media queries à l'intérieur d'une feuille css.

							
	@media screen{

		*/ CODE CSS WEB */
	}	

	@media print{

		*/ CODE CSS PRINT */
	}

Créez une feuille de style fonts.css dans le dossier assets/css/your-name. À l'intérieur, copiez vos @font-face. Cette feuille de style sera active pour le web et le print, afin que vous puissiez appeller vos fonts dans les deux. Nous ne spécifions donc pas de médias. Dans la head de votre fichier index.html, insrérez le lien vers cette feuille avant screen.css.
```
							
	<link rel="stylesheet" type="text/css" href="assets/css/karaoprint.css" media="screen">							
	<link rel="stylesheet" type="text/css" href="assets/css/your-name/fonts.css">
	<link rel="stylesheet" type="text/css" href="assets/css/your-name/screen.css" media="screen">	
							
						
```
Créez une feuille de style print.css et enregistrez là dans le dossier assets/css/your-name. Insérez le lien vers cette feuille à la suite des autres, et dans l'attribut media, indiquez print.
```
							
	<link rel="stylesheet" type="text/css" href="assets/css/your-name/print.css" media="print">	
							
						
```

Téléchargez le fichier reset.css. Ce fichier est une feuille de style qui permet d'annuler le style par défaut du html, afin que vous partiez d'une base vide. Insérez le reset avant la feuille de style print et attribuez lui media="print". Tout compris, vos appels de feuilles ressemblent à ça :

							
	<link rel="stylesheet" type="text/css" href="assets/css/karaoprint.css" media="screen">							
	<link rel="stylesheet" type="text/css" href="assets/css/your-name/fonts.css">
	<link rel="stylesheet" type="text/css" href="assets/css/your-name/screen.css" media="screen">
	<link rel="stylesheet" type="text/css" href="assets/css/reset.css" media="print">	
	<link rel="stylesheet" type="text/css" href="assets/css/your-name/print.css" media="print">