aide.html

<div class="modal fade" id="aide" tabindex="-1" aria-labelledby="aideLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable modal-xl">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="aidelLabel" style="color: black;">Instant Replay 1.0 - Aide</h5>
			</div>
			<div class="modal-body">
				<h5 style="color: black;">I - INTRODUCTION</h5>
					<p style="color: black;">
						Un instant Replay, dans le domaine de la sonorisation, est un appareil permettant de lancer des morceaux audio comme des jingles et des virgules.
						<br>
						Cette application permet d'avoir, en ligne, neufs lecteurs programmables avec 3 points de démarrage (CUE) programmables grâce à un éditeur interne.
					</p>
				<h5 style="color: black;">II - LECTEURS</h5>
					<p style="color: black;">
						Au démarrage de l'application, l'écran affiche neufs players sous forme de cartouche.
						<br>
						Un player contient un seul morceau audio. Le titre est affiché en haut à gauche après le numéro du slot.
						<br>
						Chaque lecteur, identique dans leurs fonctions, possèdent 3 boutons CUE programmés, permettant de démarrer le morceau audio choisi au temps voulu.
						<br>
						Le bouton PLAY permet de lancer le morceau au temps 0. La PAUSE à stopper la lecture à un temps précis, qui peut être relancé avec le bouton PLAY.
						<br>
						Le bouton STOP, arrête la lecture du titre audio et le remet au temps début (temps 0).
						<br>
						Le slider VOLUME gère le niveau de sortie audio du morceau.
						<br>
						Le menu "Lecteurs" permet de revenir dans cette partie du logiciel.
					</p>
				<h5 style="color: black;">III - GESTION DES FICHIERS</h5>
					<p style="color: black;">
					En cliquant, dans le menu FICHIER, on entre dans le gestionnaire de fichiers.
					<br>
					La partie haute permet de télécharger un nouveau fichier dans le logiciel. La partie basse, permet de visualiser, sous forme d'un tableau, les titres déjà présents
					dans la bibiothèque.
					<br>
					Pour chaque titres de la bibliothèque, un lecteur est disponible pour pré-écouter le fichier audio.
					<br>
					1 - <b>AJOUTER UN TITRE DANS LA BIBLIOTHEQUE</b>
					<br>
					Annoter le titre du morceau qui va être insérer dans la bibliothèque dans le champs "Titre du morceau".
					<br>
					Cliquer sur la partie grise "Choisir un ficher" afin d'ouvrir la fenêtre permettant de choisir, sur le disque dur de l'ordinateur, le fichier MP3 ou WAV à insérer dans la base de données.
					<br>
					Cliquer sur le bouton ajouter pour télécharger le fichier audio.
					</p>
					<div class="alert alert-dark" role="alert">
						<b>NOTA</b>
						<br>
						Les fichiers téléchargeables ne peuvent posséder que l'extension WAV ou du MP3.
						<br>
						La taille des fichiers, par défaut, ne doit pas dépasser 2 Mo mais ceci est en fonction de l'hébergement de l'application. Voir la section installation.
					  </div>
					2 - <b>TABLEAU DE LA BIBLIOTHEQUE & FONCTIONS</b>
					<br>
					Le tableau de la bibliothèque de fichier reprends le numéro interne à la bibliotèque des titres.
					<br>
					Le nom fourni lors du téléchargement du fichier, le nom du fichier inscrit sur le disque dur, un lecteur pour écouter le titre audio et une colonne action, 
					qui possède un bouton DETRUIRE pour effacer définitivement le fichier de la base de données et du disque dur.
					</p>
					<div class="alert alert-dark" role="alert">
						<b>NOTA</b>
						<br>
						Dans la version Démonstration du logiciel, aucune de ces fonctions n'est actives.
					  </div>
				<h5 style="color: black;">IV - EDITION DES SLOTS</h5>
					<p style="color: black;">
					Pour éditer un morceau et programmer ses points CUE, utiliser le menu SLOTS et choisir le slot numéroté approprié.
					<br>
					1 - Le premier champs permet de choisir un titre inclu dans la bibliothèque. Une fois sélectionné, il se met en place automatiquement et le nom du fichier
						s'inscrit après EDITION DU FICHIER.
					<br>
					2 - La forme du fichier apparaît avec en dessous la position exprimée en seconde.
					<br>
					3 - Le cartouche DEPLACEMENT va permettre de se déplacer dans le morceau avec des paliers de 5, 1, 0,5 et 0,1 seconde.
					<br>
					Le bouton PLAY lit le titre audio et la PAUSE stop le fichier au temps de l'arrêt.
					<br>
					4 - Déplacer le curseur au point voulu et appuyer sur l'un des boutons CUE pour enregistrer la position. Cette cartouche EDITION & SAUVEGARDE DES CUES contient aussi un champ
					et trois autres boutons :
					<br>
					Le champs ou est indiqué la position temporelle de la CUE. Ce champs peut être modifié en édition pur. Il suffit de se positionner dessus et d'entré, au clavier un temps au format XX.XX
					<br>
					Un bouton de lecture qui démarre le titre audio à la position inscrite dans le champs. Un stop pour arrêter la lecture et remettre le morceau au début du temps indiqué dans le champs.
					Enfin, un bouton orange qui permet d'effacer le contenu du champs et de remettre la position du CUE à zéro.
					<br>
					5 - Pour enregistrer la totalité des données inscrites dans les champs CUE, appuyer sur le bouton rouge SAUVEGARDER.
					</p>
				<h5 style="color: black;">IV - INSTALLATION</h5>
					<p style="color: black; alink color: black;">
					Ce script est sous license libre.
					<br>
					Ce script doit être installé sur un serveur Internet utilisant les technologies 
					<a href="https://httpd.apache.org/" class="link-dark" target="_new">APACHE</a>, 
					<a href="https://www.php.net/" class="link-dark" target="_new">PHP</a>
					<a href="https://www.mysql.com/" class="link-dark" target="_new">MYSQL</a>
					et 
					<a href="https://www.phpmyadmin.net/" class="link-dark" target="_new">PHPMYADMIN</a> 
					pour administrer la base de données.
					<br>
					Les sources 
					<a href="https://getbootstrap.com/" class="link-dark" target="_new">BOOTSTRAP</a>
					et <a href="https://wavesurfer-js.org/" class="link-dark" target="_new">WAVESURFER.JS</a> sont intégrées avec le script.
					<br>
					Pour le bon fonctionnement de ce dernier, le logiciel doit tourné avec une connection Internet active.
					</p>
					<h6 style="color: black;">ETAPE 1</h6>
					<p style="color: black;">
					Copier le contenu du dossier dans un répertoire accessible sur votre serveur web.
					</p>
					<h6 style="color: black;">ETAPE 2</h6>
					<p style="color: black;">
					Créer une base de données MYSQL ou utiliser une déjà existante et executer le code SQL ci-dessous :
					<br>
					<textarea class="form-control" rows="20">
CREATE TABLE music (
id int(11) NOT NULL,
musicname text NOT NULL,
musicfile text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO music (id, musicname, musicfile) VALUES
(1, 'Into the Night', 'slot1.mp3'),
(2, 'Trailer Sport Stylish', 'slot2.mp3'),
(3, 'Electronic Rock King Around Here', 'slot3.mp3'),
(4, 'Spirit Blossom', 'slot4.mp3'),
(5, 'Embrace', 'slot5.mp3'),
(6, 'Stylish Intro Logo Youtube', 'slot6.mp3'),
(7, 'Intro Music Black Box Roughly Made Bass House', 'slot7.mp3'),
(8, 'Groovy Energy Sport 80 BPM Shor', 'slot8.mp3'),
(9, 'Clip 02 Newsflash', 'slot9.mp3');

CREATE TABLE slot1 (
id int(11) NOT NULL,
musicid int(11) NOT NULL,
cue1 double(11,5) NOT NULL,
cue2 double(11,5) NOT NULL,
cue3 double(10,5) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO slot1 (id, musicid, cue1, cue2, cue3) VALUES
(1, 1, 13.70000, 82.30000, 121.13094);

CREATE TABLE slot2 (
id int(11) NOT NULL,
musicid int(11) NOT NULL,
cue1 double(11,5) NOT NULL,
cue2 double(11,5) NOT NULL,
cue3 double(10,5) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO slot2 (id, musicid, cue1, cue2, cue3) VALUES
(1, 2, 7.11670, 38.98118, 104.76979);

CREATE TABLE slot3 (
id int(11) NOT NULL,
musicid int(11) NOT NULL,
cue1 double(11,5) NOT NULL,
cue2 double(11,5) NOT NULL,
cue3 double(10,5) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO slot3 (id, musicid, cue1, cue2, cue3) VALUES
(1, 3, 15.50000, 15.33916, 0.00000);

CREATE TABLE slot4 (
id int(11) NOT NULL,
musicid int(11) NOT NULL,
cue1 double(11,5) NOT NULL,
cue2 double(11,5) NOT NULL,
cue3 double(10,5) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO slot4 (id, musicid, cue1, cue2, cue3) VALUES
(1, 4, 10.08256, 0.00000, 0.00000);

CREATE TABLE slot5 (
id int(11) NOT NULL,
musicid int(11) NOT NULL,
cue1 double(11,5) NOT NULL,
cue2 double(11,5) NOT NULL,
cue3 double(10,5) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO slot5 (id, musicid, cue1, cue2, cue3) VALUES
(1, 5, 78.19458, 113.73946, 0.00000);

CREATE TABLE slot6 (
id int(11) NOT NULL,
musicid int(11) NOT NULL,
cue1 double(11,5) NOT NULL,
cue2 double(11,5) NOT NULL,
cue3 double(10,5) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO slot6 (id, musicid, cue1, cue2, cue3) VALUES
(1, 6, 0.00000, 0.00000, 0.00000);

CREATE TABLE slot7 (
id int(11) NOT NULL,
musicid int(11) NOT NULL,
cue1 double(11,5) NOT NULL,
cue2 double(11,5) NOT NULL,
cue3 double(10,5) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO slot7 (id, musicid, cue1, cue2, cue3) VALUES
(1, 7, 0.87884, 21.09986, 56.19458);

CREATE TABLE slot8 (
id int(11) NOT NULL,
musicid int(11) NOT NULL,
cue1 double(11,5) NOT NULL,
cue2 double(11,5) NOT NULL,
cue3 double(10,5) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO slot8 (id, musicid, cue1, cue2, cue3) VALUES
(1, 8, 0.00000, 0.00000, 0.00000);

CREATE TABLE slot9 (
id int(11) NOT NULL,
musicid int(11) NOT NULL,
cue1 double(11,5) NOT NULL,
cue2 double(11,5) NOT NULL,
cue3 double(10,5) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO slot9 (id, musicid, cue1, cue2, cue3) VALUES
(1, 9, 0.00000, 0.00000, 0.00000);

ALTER TABLE music
ADD PRIMARY KEY (id);

ALTER TABLE slot1
ADD PRIMARY KEY (id);

ALTER TABLE slot2
ADD PRIMARY KEY (id);

ALTER TABLE slot3
ADD PRIMARY KEY (id);

ALTER TABLE slot4
ADD PRIMARY KEY (id);

ALTER TABLE slot5
ADD PRIMARY KEY (id);

ALTER TABLE slot6
ADD PRIMARY KEY (id);

ALTER TABLE slot7
ADD PRIMARY KEY (id);

ALTER TABLE slot8
ADD PRIMARY KEY (id);

ALTER TABLE slot9
ADD PRIMARY KEY (id);

ALTER TABLE music
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=14;

ALTER TABLE slot1
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

ALTER TABLE slot2
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

ALTER TABLE slot3
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

ALTER TABLE slot4
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

ALTER TABLE slot5
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

ALTER TABLE slot6
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

ALTER TABLE slot7
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

ALTER TABLE slot8
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

ALTER TABLE slot9
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
COMMIT;
</textarea>

					<h6 style="color: black;">ETAPE 3</h6>
					<p style="color: black;">
					Modifier le fichier "connect.php" qui se trouve dans le répertoire principal du script.
					<br>
					Entrer les informations liées au serveur Internet utilisé :
					<textarea class="form-control" rows="1">$bdd = new PDO('mysql:host=localhost;port=3306;dbname=nom_de_la_base_de_donnee;charset=utf8', 'login', 'motdepasse');</textarea>
					<br>
					<b>HOST</b> : doit comporter le host sur lequel est hébergé la base de donnée. Sur un serveur unique pour APACHE et  MYSQL, le plus souvent on reste en localhost. Sinon il faut regarder la notice d'utilisation fournie par le fournisseur de service.
					<br>
					<b>PORT</b> : Le port par défaut est le 3306. Le modifier si les informations du serveur MYSQL sont différentes
					<br>
					<b>DBNAME</b> : doit comporter le nom de la base de données utilisée.
					<br>
					A la place de <b>LOGIN</b> et <b>MOTDEPASSE</b>, entrer les informations d'accès à la base de données fournies par le fournisseur de service.
					</p>
					<h6 style="color: black;">ETAPE 4</h6>
					<p style="color: black;">
					Dans un navigateur, écrire l'adresse correspondante à votre serveur et le dossier contenant le script. Par exemple, https://monsite.com/instantreplay/". 
					</p>
				<h5 style="color: black;">V - CONCLUSION</h5>
					<p style="color: black;">
					Ce script est fonctionnel avec les navigateur Google Chrome, Microsoft Edge, Firefox, Brave, Opera sur PC avec une résolution de 1920 x 1080 pixels.
					<br>
					<div class="alert alert-dark" role="alert">
						<b>NOTA</b>
						<br>
						La limitation de la taille des fichiers à télécharger est limité par la configuration du serveur PHP dans le fichier PHP.INI
						<br>
						Cette limitation est inscrite à la ligne : <code>upload_max_filesize</code>.
						<br>
						Les hébergeurs grand public limitent, pour la plus part, à 2 Mo. Si vous possédez votre propore hébergement, vous pouvez modificer cette limitation à votre guise.
					  </div>
			</div>
		</div>
	</div>
</div>