Synthèse vocale silencieuse : Code PHP JavaScript unique pour plusieurs textes à faire parler.

**Renerelire** · 21/07/2020, 03h51

Bonjour,

J'ai une page Web PHP HTML qui contient environ 130 <div>s dont je veux pouvoir faire parler le texte. J'aurais donc 4 boutons (Écoutez, Pause, Reprendre, Arrêter) pour chacune des ces <div>s.

Je suis bloqué dans ce code PHP JavaScript et je n'ai aucune idée de comment je peux trouver les erreurs. Je suis très novice en programmation: J'ai essayé de lire la section JavaScript le W3Schools.com, mais quoique que j'apprenne un peu, ça reste vague. Les boutons apparaissent normalement, mais quand je clique dessus, rien ne se produit. Je ne sais pas si mes fonction JS sont bien évoquées, ni si le code à l'intérieur des fonctions JS sont correctes. C'est le grand floue. J'ai essayé Examiné l'élément , console, de Firefox, mais je ne vois pas d'erreurs. Est-ce parce que je ne sais pas utiliser cet outils? Je ne travail que sur mon seul site Web personnel.

Code HTML généré de ma page PHP (Merci NoSmoking pour m'avoir écrit d'ajouter ce code généré):

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
 
	<div><button id="lectureObjectif">Écouter</button>&nbsp;<button id="pauseObjectif">Pause</button>&nbsp;<button id="reprendreObjectif">Reprendre</button>&nbsp;<button id="arretObjectif">Arrêtter</button></div>
	<!-- The div (with the Objectif id) to be spoken -->
	<div id="Objectif" class="moi-wrap-text">
		<p>L'objectif de ce site est important. </p>
	</div>
 
	<div><button id="lecturePourquoi">Écouter</button>&nbsp;<button id="pausePourquoi">Pause</button>&nbsp;<button id="reprendrePourquoi">Reprendre</button>&nbsp;<button id="arretPourquoi">Arrêtter</button></div>
	<!-- The div (with the Pourquoi id) to be spoken -->
	<div id="Pourquoi" class="moi-wrap-text">
		<p>Pourquoi est-il important de savoir.</p>
	</div>
 
	<!-- External JavaScript file -->
	<script src="deux.js" defer></script>
 
</body>

Contenu de mon fichier JavaScript

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// Fonction pour faire parler
function doLecture(textName) {
	/* Removes all utterances from the utterance queue and
	if an utterance is currently being spoken, speaking will stop */
	speechSynthesis.cancel();
	// instancier un objet d'énonciation
	let parole = new SpeechSynthesisUtterance();
	parole.lang = 'fr-Fr'; // language, default is 'en-US'
	parole.pitch = 1; // 0 à 2 = hauteur
	parole.rate = 1.3; // 0.1 à 10 = vitesse
	parole.volume = 1; // 0 à 1 = volume
	// Get the DOM object
	parole.text = document.getElementById(textName).textContent;
	// Speak
	speechSynthesis.speak(parole);
}
 
// Fonction pour faire une pause
function doPause(textName) {
	// instancier un objet d'énonciation
	let parole = new SpeechSynthesisUtterance();
	// Get the DOM object
	parole.text = document.getElementById(textName).textContent;
	// Pause speaking
	speechSynthesis.pause(parole);
}
 
// Fonction pour reprendre le faire parler
function doReprendre(textName) {
	// instancier un objet d'énonciation
	let parole = new SpeechSynthesisUtterance();
	// Get the DOM object
	parole.text = document.getElementById(textName).textContent;
	// Resume speaking
	speechSynthesis.resume(parole);
}
 
// Fonction pour arrêter le faire parler
function doArret(textName) {
	// instancier un objet d'énonciation
	let parole = new SpeechSynthesisUtterance();
	// Get the DOM object
	parole.text = document.getElementById(textName).textContent;
	// Stop speaking
	speechSynthesis.stop(parole);
}

Contenu de mon fichier PHP (au cas où le problème viendrait, en parti, de là) :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php 
 
//  id des "div"s à faire parler
$texts = ['Objectif', 'Pourquoi'];
 
$buttons = [];
$events = [];
 
foreach($texts as $text) {
    $buttons[$text] = make_buttons($text);
    $events[$text] = make_events($text);
}
 
	function make_buttons($textname) {
    $buttons = [];
    $buttons[] = '<button id="lecture' . $textname . '">Écouter</button>';
    $buttons[] = '<button id="pause' . $textname . '">Pause</button>';
    $buttons[] = '<button id="reprendre' . $textname . '">Reprendre</button>';
    $buttons[] = '<button id="arret' . $textname . '">Arrêtter</button>';
    return implode("&nbsp;", $buttons);
}
	function make_events($textname) {
    $clicks = [];
    $clicks[] = "document.getElementById('lecture{$textname}').onclick = doLecture('{$textname}');";
    $clicks[] = "document.getElementById('pause{$textname}').onclick = doPause('{$textname}');";
    $clicks[] = "document.getElementById('reprendre{$textname}').onclick = doReprendre('{$textname}');";
    $clicks[] = "document.getElementById('arret{$textname}').onclick = doArret('{$textname}');";
    return implode("\n", $clicks);			
}	
	$events = implode("\n", $events);
	?>
 
	<?php 	//  Apparition des boutons pour id "Objectif" à faire parler
	echo "<div>{$buttons['Objectif']}</div>";?>
 
	<!-- Le div avec l'id "Objectif" -->
	<div id="Objectif" class="moi-wrap-text">
		<p>L'objectif de ce site est important. </p>
	</div>
 
	<?php 	//  Apparition des boutons pour id "Pourquoi" à faire parler
	echo "<div>{$buttons['Pourquoi']}</div>";?>
 
	<!-- Le div avec l'id "Pourquoi" -->
	<div id="Pourquoi" class="moi-wrap-text">
		<p>Pourquoi est-il important de savoir?</p>
	</div>

**NoSmoking** · 21/07/2020, 15h07

Bonjour,

... mais quand je clique dessus, rien ne se produit. Je ne sais pas si mes fonction JS sont bien évoquées, ni si le code à l'intérieur des fonctions JS sont correctes.

il faut regarder le code HTML généré, et éventuellement mettre celui-ci à la place du code PHP qui ne nous sert à rien, pour voir d'éventuelles erreurs et pouvoir t'aider.

**NoSmoking** · 22/07/2020, 09h03

Ton code généré me paraît incomplet !

Néanmoins, ton soucis vient de la déclaration de tes événements sur les différents boutons.

Dans ton PHP :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

$clicks[] = "document.getElementById('lecture{$textname}').onclick = doLecture('{$textname}');";

le code généré est par exemple le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('lectureObjectif').onclick = doLecture('Objectif');

tu affectes le résultat de la fonction au onclick sur ton élément et non l'appel à la fonction elle même, il aurait fallu écrire

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

$clicks[] = "document.getElementById('lecture{$textname}').onclick = function(){doLecture('{$textname}');};";

qui serait généré par exemple comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.getElementById('lectureObjectif').onclick = function () {
  doLecture('Objectif');
};

Remarque sur ta fonction doArret(textName), la méthode stop() n'existe pas, il te faut utiliser la méthode cancel(), comme tu l'utilise dans ta fonction doLecture.

**Renerelire** · 24/07/2020, 10h21

Merci NoSmoking...

Avec les corrections que tu m'as données, j'ai réussis à faire fonctionner pour une page où j'ai seulement 4 à 5 textes à faire parler. Mais ça ne fonctionne pas pour une autre page où j'en ai environ 130.

Je ne sais pas comment ça s'appelle (peut-être déclarer et créer un tableau), mais on dirait que si j'ai une valeur qui n'est pas utilisée par la suite, PHP ne m'indique pas d'erreur, mais la synthèse vocale ne fonctionne pas pour toutes les valeurs qui suivent, même si les boutons apparaissent bien. Ce que j'appelle les valeurs se sont les "trucs" dans le "tableau". Ex: à la position 0 la valeur est 100, à la position 1 la valeur est Jamais100, à la position 2 à valeur est Différence, etc. J'imagine qu'il y a un moyen de trouver les valeurs en trop (les non utilisées) ou bien faire en sorte que c'est valeurs soient ignorées. Si non, je devrai les vérifier une à une.

Ce que j'appelle "tableau" c'est ceci:

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<?php 
$texts = [ '100', 'Jamais100', 'Différence', 'Aiment', 'Assez', 'Sante', 'VontMourir', 'Attentionnees', 'Temps', 'Sauvage', 'Testes', 'RienManger', 'OGM', 'Besoin', 'Concus', 'Plantes', 'Turies', 'Recolte', 'Valeur', 'Nourriture', 'Autochtones', 'B12', 'Bacteries', 'BelleVie', 'Bio', 'Biologique', 'Meilleure', 'Calcium', 'Canines', 'Carences', 'Cerveau', 'Cercle', 'Chaine', 'Chinois', 'Choix', 'Chomage', 'Cosmetiques', 'Cruaute', 'Culture', 'Problemes', 'Degoutante', 'Domestiques', 'Devons', 'Dieu', 'Difference', 'Diminue', 'Disparaitrait', 'Dispendieu','LeurVie', 'Ethique', 'Euthanasier', 'Ecologique', 'Differement', 'Fer', 'Fermes', 'Forcez', 'Gaspille', 'Gout', 'Hitler', 'Humainement', 'Humains', 'Palme', 'Humanisez', 'Hypocrites', 'Inconsistant', 'Ile', 'Impoli', 'Importance', 'Intelligents', 'Insoutenable', 'Instinct', 'Intolerants', 'Juger', 'Laine', 'Lait', 'LaitAmande', 'LaitBon', 'Legal', 'Local', 'Maladifs', 'Malsain', 'SeMangent', 'PlusRien', 'Mangeraient', 'Malade', 'Medicaux', 'Miel', 'Mieux', 'Annees', 'Medecin', 'Mode', 'Subective', 'MondeEntier', 'Mourir', 'PourRien', 'Deja', 'Naturel', 'Normal', 'Necessaire', 'Nihiliste', 'Oeufs', 'Opinion', 'YPenser', 'Penser', 'Differemment', 'Ferme', 'Poissons', 'Planete', 'PremierHommes', 'Proteines', 'Animaux', 'Raison', 'Religion', 'Sacrifices', 'GroupeSanguin', 'Sentiments', 'Service', 'Souffrent', 'Souffrir', 'Soya', 'Soja', 'Souffriraient', 'Surpeuplerait', 'Technologie', 'PasLeTemps', 'ToutLeMonde', 'LesTuer', 'Bebe', 'Tribu', 'Elevés', 'TuentPlus', 'Tueries', 'Medicaments', 'Vegetarien', 'Welfariste', 'Concept', 'Jamais', 'Subjective', 'Bible', 'Survivre', 'EtreTues', 'Tribus', 'Benefice', 'Doivent'];?>

Parties du Fichier HTML généré (j'ai enlevé du code répétitif et hors sujet):

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
 
		<main>
			<section>
							<!--	gauche ou droite-->
								<article>
					<!-- section-text -->
					<div class="section-text">
						<span id="religion" class="anchor"></span>
						<h3>"Le véganisme est une <span class="moi-color-01">religion</span>."
							<div><button id="lectureReligion">Écouter</button>&nbsp;<button id="pauseReligion">Pause</button>&nbsp;<button id="reprendreReligion">Reprendre</button>&nbsp;<button id="arretReligion">Arrêtter</button></div>						</h3>
												<div class="wrap-right">
							<!-- Slideshow container -->
							<div class="slideshow-container">
								<img src="img/conceptions-erronees/religion.jpg" alt="">
							</div>
							<!--Slide show end-->
						</div>
						<div id="Religion" class="moi-wrap-text">
							<p> Ne pas vouloir nuire aux vaches et aux porcs n'est pas plus une religion que de ne pas vouloir nuire aux chats et aux chiens. Le véganisme est tout simplement une obligation morale. Contrairement aux "croyants", les véganes se basent sur des connaissances et des faits (études, statistiques, etc.).&nbsp;Leur motivation est éthique. </p>
							<p>Une religion est un ensemble de croyances définissant le rapport de l’homme avec le sacré marqué par des pratiques et des rites, tandis qu’une philosophie est une manière d’interpréter le monde qui guide nos comportements. Les animaux ne sont pas considérés comme &quot;sacrés&quot; puisqu’ils ne sont pas perçus comme appartenant au domaine séparé, intangible, inviolable du "religieux" qui inspire crainte et impose le respect, sous peine de représailles ou par l'intention d’obtenir des privilèges.</p>
 
							<p>La religion consiste à amener les gens à croire en des choses qu’ils ne peuvent pas voir. Le véganisme amène les gens à voir des choses qu'ils ne veulent pas croire. </p>
							<p>Je propose la lecture de
								<a href="http://www.la-carotte-masquee.com/veganisme-religion/" title=" Mythe #3: Le véganisme est une religion" target="_blank"> Mythe #3: Le véganisme est une religion</a>
								de <span class="moi-auteur">La Carotte Masquée: Blog Antispéciste Agitateur de Neuronnes</span>.</p>
 
 
													<p class="button-center-menu"><a class="button-style-2"
                                href="#haut-menu">- menu -</a>
						  </p>			
 
						</div>
					</div>
				</article>
				<article>
					<!-- section-text -->
					<div class="section-text">
						<span id="plus-rien-manger" class="anchor"></span>
						<h3> "C’est trop dur d’être végane. On ne peut <span class="moi-color-01">plus rien manger</span>."
							<div><button id="lectureRienManger">Écouter</button>&nbsp;<button id="pauseRienManger">Pause</button>&nbsp;<button id="reprendreRienManger">Reprendre</button>&nbsp;<button id="arretRienManger">Arrêtter</button></div>						</h3>
 
						<div id="RienManger" class="moi-wrap-text">
							<p>Nous sommes habitués aux recettes standard avec du lait et des oeufs, mais il existe une version végane de pratiquement tout. Ajoutez le mot « végane » ou « végétalien » lorsque vous cherchez une recette sur Internet et le tour est joué! Tout ce que vous aurez à sacrifier, ce sont certains produits surtransformés dans l’allée des biscuits ou des petits gâteaux, mais c’est sans doute une très bonne chose. </p>
							<p>Aussi, si nous nous mettons à la place des animaux, il est très facile d'être végane et très difficile de ne pas l'être.</p>
 
													<p class="button-center-menu"><a class="button-style-2"
                                href="#haut-menu">- menu -</a>
						  </p>			
						</div>
					</div>
				</article>
				<article>
					<!-- section-text -->
					<div class="section-text">
						<span id="maladifs" class="anchor"></span>
						<h3> "Les végans sont <span class="moi-color-01">faibles et maladifs</span>."
							<div><button id="lectureMaladifs">Écouter</button>&nbsp;<button id="pauseMaladifs">Pause</button>&nbsp;<button id="reprendreMaladifs">Reprendre</button>&nbsp;<button id="arretMaladifs">Arrêtter</button></div>						</h3>
 
						<div id="Maladifs" class="moi-wrap-text">
							<p>Plusieurs athlètes de niveau olympique sont véganes. Au Québec, nous avons même Georges Laraque, un ancien hockeyeur, maintenant propriétaire d’un restaurant crudivore, et le moins qu’on puisse dire, c’est qu’il n’a l’air ni faible et ni maladif.</p>
 
													<p class="button-center-menu"><a class="button-style-2"
                                href="#haut-menu">- menu -</a>
						  </p>			
						</div>
					</div>
				</article>
				<article>
					<!-- section-text -->
					<div class="section-text">
						<span id="inconsistant" class="anchor"></span>
						<h3> "Si les végans sont contre le fait de tuer des prédateurs, ils sont donc complices de la souffrance que ces prédateurs provoquent pour leurs proies. S’ils sont pour le fait de tuer des prédateurs, ils n’ont donc rien contre la souffrance animale. Dans tous les cas, <span class="moi-color-01">le véganisme est inconsistant</span>."
							<div><button id="lectureInconsistant">Écouter</button>&nbsp;<button id="pauseInconsistant">Pause</button>&nbsp;<button id="reprendreInconsistant">Reprendre</button>&nbsp;<button id="arretInconsistant">Arrêtter</button></div>						</h3>
 
						<div id="Inconsistant" class="moi-wrap-text">
							<p>Le véganisme ne cherche pas à éliminer toute souffrance dans le monde, mais celle qui dépend de nous et que nous pouvons éviter de provoquer.</p>
							<p>Si nous décidions d’éliminer toutes les espèces prédatrices pour sauver toutes les proies en ne gardant seulement celles qui sont exclusivement herbivores ou frugivores, l’équilibre de la nature serait débalancée. Les proies deviendraient trop nombreuses pour les ressources disponibles et elles mourraient de faim. Donc, nous ne réglerions rien. D’un autre côté, nous savons que les animaux carnivores, contrairement à nous, ne peuvent pas survivre sans viande et que leur mort aussi serait une source de souffrance.</p>
							<p>Il n’y a pas de réponse simple à ce problème ou de façon de choisir la solution qui diminuerait le plus les souffrances dans le monde animal. Par contre, refuser de participer à la souffrance d’une centaine de millions d’animaux qui meurent chaque année pour les humains, ça, c’est à notre portée, et tout de suite. Pas besoin d’essayer de changer la réalité. Il suffit de dire non à la viande et aux produits d’origine animale.</p>
							<p>Si nous attendons de voir un monde sans aucune souffrance avant d’agir, rien ne bougera jamais.</p>
 
													<p class="button-center-menu"><a class="button-style-2"
                                href="#haut-menu">- menu -</a>
						  </p>			
						</div>
					</div>
				</article>
				<article>
					<!-- section-text -->
					<div class="section-text">
						<span id="attentionnees" class="anchor"></span>
						<h3> "Je connais des éleveurs producteurs et ce sont des <span class="moi-color-01">personnes aimantes et attentionnées</span>."
							<div><button id="lectureAttentionnees">Écouter</button>&nbsp;<button id="pauseAttentionnees">Pause</button>&nbsp;<button id="reprendreAttentionnees">Reprendre</button>&nbsp;<button id="arretAttentionnees">Arrêtter</button></div>						</h3>
													<div class="wrap-left">
								<!-- Slideshow container -->
								<div class="slideshow-container">
									<img src="img/conceptions-erronees/attentiones.jpg" alt="">
								</div>
								<!--Slide show end-->
							</div>
						<div id="Attentionnees" class="moi-wrap-text">
							<p> Malheureusement, leur proximité avec leur bétail ne signifie pas qu’ils soient conscients du fait que les animaux souffrent réellement et qu’ils ont un intérêt à ne pas souffrir. Rien n’oblige un producteur à se questionner sur ce qu’est le spécisme ou sur les raisons de considérer les intérêts de l’animal à ne pas souffrir.</p>
							<p> Quelqu’un qui travaille dans le milieu, déjà conditionné à l’idée qu’il est normal de manger de la viande, peut facilement voir tout ce qu’il fait de bien pour le bétail comme un signe de son affection et leur mise à mort comme une évidence à laquelle il était préparé. Ça laisse malheureusement moins de place à l’empathie. Du moins, une empathie authentique et désintéressée.</p>
 
													<p class="button-center-menu"><a class="button-style-2"
                                href="#haut-menu">- menu -</a>
						  </p>			
						</div>
					</div>
				</article>
				<article>
					<!-- section-text -->
					<div class="section-text">
						<span id="morts-pour-rien" class="anchor"></span>
						<h3> Si vous ne mangez pas d’animaux, ils vont quand même finir à l’abattoir,  ils seront gaspillés et <span class="moi-color-01">ils seront morts pour rien</span>."
							<div><button id="lecturePourRien">Écouter</button>&nbsp;<button id="pausePourRien">Pause</button>&nbsp;<button id="reprendrePourRien">Reprendre</button>&nbsp;<button id="arretPourRien">Arrêtter</button></div>						</h3>
 
						<div id="PourRien" class="moi-wrap-text">
							<p>Les producteurs tiennent compte de la demande et, quand elle baisse, ils n’ont d’autre choix que de ralentir la reproduction des animaux d’élevage. Par conséquent, moins d’animaux naissent, déjà condamnés à une brève existence et à des souffrances inutiles.</p>
 
													<p class="button-center-menu"><a class="button-style-2"
                                href="#haut-menu">- menu -</a>
						  </p>			
						</div>
					</div>
				</article>
 
			</section>
 
 
		</main>
		<!-- content fin -->
 
	</div>
	<!-- moi-global fin -->
	<!-- top button -->
	      <button onclick="topFunction()" id="myBtn" title="Allez en haut"><img src="img/general/vers-le-haut.png" width="50" height="50" alt=""/></button>	<!-- custom js -->
	<script src="js/menu.js" defer></script>
<script src="js/top.js" defer></script>	<script src="js/slide.js" defer></script>
 
	<!-- Code JS pour faire parler -->
<script>document.getElementById('lecture100').onclick = function(){doLecture('100');};
document.getElementById('pause100').onclick = function(){doPause('100');};
document.getElementById('reprendre100').onclick = function(){doReprendre('100');};
document.getElementById('arret100').onclick = function(){doArret('100');};
document.getElementById('lectureJamais100').onclick = function(){doLecture('Jamais100');};
document.getElementById('pauseJamais100').onclick = function(){doPause('Jamais100');};
document.getElementById('reprendreJamais100').onclick = function(){doReprendre('Jamais100');};
document.getElementById('arretJamais100').onclick = function(){doArret('Jamais100');};
document.getElementById('lectureDifférence').onclick = function(){doLecture('Différence');};
document.getElementById('pauseDifférence').onclick = function(){doPause('Différence');};
document.getElementById('reprendreDifférence').onclick = function(){doReprendre('Différence');};
document.getElementById('arretDifférence').onclick = function(){doArret('Différence');};
document.getElementById('lectureAiment').onclick = function(){doLecture('Aiment');};
document.getElementById('pauseAiment').onclick = function(){doPause('Aiment');};
document.getElementById('reprendreAiment').onclick = function(){doReprendre('Aiment');};
document.getElementById('arretAiment').onclick = function(){doArret('Aiment');};
document.getElementById('lectureAssez').onclick = function(){doLecture('Assez');};
document.getElementById('pauseAssez').onclick = function(){doPause('Assez');};
document.getElementById('reprendreAssez').onclick = function(){doReprendre('Assez');};
document.getElementById('arretAssez').onclick = function(){doArret('Assez');};
document.getElementById('lectureSante').onclick = function(){doLecture('Sante');};
document.getElementById('pauseSante').onclick = function(){doPause('Sante');};
document.getElementById('reprendreSante').onclick = function(){doReprendre('Sante');};
document.getElementById('arretSante').onclick = function(){doArret('Sante');};
document.getElementById('lectureVontMourir').onclick = function(){doLecture('VontMourir');};
document.getElementById('pauseVontMourir').onclick = function(){doPause('VontMourir');};
document.getElementById('reprendreVontMourir').onclick = function(){doReprendre('VontMourir');};
document.getElementById('arretVontMourir').onclick = function(){doArret('VontMourir');};
document.getElementById('lectureAttentionnees').onclick = function(){doLecture('Attentionnees');};
document.getElementById('pauseAttentionnees').onclick = function(){doPause('Attentionnees');};
document.getElementById('reprendreAttentionnees').onclick = function(){doReprendre('Attentionnees');};
document.getElementById('arretAttentionnees').onclick = function(){doArret('Attentionnees');};
document.getElementById('lectureTemps').onclick = function(){doLecture('Temps');};
document.getElementById('pauseTemps').onclick = function(){doPause('Temps');};
document.getElementById('reprendreTemps').onclick = function(){doReprendre('Temps');};
document.getElementById('arretTemps').onclick = function(){doArret('Temps');};
document.getElementById('lectureSauvage').onclick = function(){doLecture('Sauvage');};
document.getElementById('pauseSauvage').onclick = function(){doPause('Sauvage');};
document.getElementById('reprendreSauvage').onclick = function(){doReprendre('Sauvage');};
document.getElementById('arretSauvage').onclick = function(){doArret('Sauvage');};
document.getElementById('lectureTestes').onclick = function(){doLecture('Testes');};
document.getElementById('pauseTestes').onclick = function(){doPause('Testes');};
document.getElementById('reprendreTestes').onclick = function(){doReprendre('Testes');};
document.getElementById('arretTestes').onclick = function(){doArret('Testes');};
document.getElementById('lectureRienManger').onclick = function(){doLecture('RienManger');};
document.getElementById('pauseRienManger').onclick = function(){doPause('RienManger');};
document.getElementById('reprendreRienManger').onclick = function(){doReprendre('RienManger');};
document.getElementById('arretRienManger').onclick = function(){doArret('RienManger');};
document.getElementById('lectureOGM').onclick = function(){doLecture('OGM');};
document.getElementById('pauseOGM').onclick = function(){doPause('OGM');};
document.getElementById('reprendreOGM').onclick = function(){doReprendre('OGM');};
document.getElementById('arretOGM').onclick = function(){doArret('OGM');};
document.getElementById('lectureBesoin').onclick = function(){doLecture('Besoin');};
document.getElementById('pauseBesoin').onclick = function(){doPause('Besoin');};
document.getElementById('reprendreBesoin').onclick = function(){doReprendre('Besoin');};
document.getElementById('arretBesoin').onclick = function(){doArret('Besoin');};
document.getElementById('lectureConcus').onclick = function(){doLecture('Concus');};
document.getElementById('pauseConcus').onclick = function(){doPause('Concus');};
document.getElementById('reprendreConcus').onclick = function(){doReprendre('Concus');};
document.getElementById('arretConcus').onclick = function(){doArret('Concus');};
document.getElementById('lecturePlantes').onclick = function(){doLecture('Plantes');};
document.getElementById('pausePlantes').onclick = function(){doPause('Plantes');};
document.getElementById('reprendrePlantes').onclick = function(){doReprendre('Plantes');};
document.getElementById('arretPlantes').onclick = function(){doArret('Plantes');};
document.getElementById('lectureTuries').onclick = function(){doLecture('Turies');};
document.getElementById('pauseTuries').onclick = function(){doPause('Turies');};
document.getElementById('reprendreTuries').onclick = function(){doReprendre('Turies');};
document.getElementById('arretTuries').onclick = function(){doArret('Turies');};
document.getElementById('lectureRecolte').onclick = function(){doLecture('Recolte');};
document.getElementById('pauseRecolte').onclick = function(){doPause('Recolte');};
document.getElementById('reprendreRecolte').onclick = function(){doReprendre('Recolte');};
document.getElementById('arretRecolte').onclick = function(){doArret('Recolte');};
document.getElementById('lectureValeur').onclick = function(){doLecture('Valeur');};
document.getElementById('pauseValeur').onclick = function(){doPause('Valeur');};
document.getElementById('reprendreValeur').onclick = function(){doReprendre('Valeur');};
document.getElementById('arretValeur').onclick = function(){doArret('Valeur');};
document.getElementById('lectureNourriture').onclick = function(){doLecture('Nourriture');};
document.getElementById('pauseNourriture').onclick = function(){doPause('Nourriture');};
document.getElementById('reprendreNourriture').onclick = function(){doReprendre('Nourriture');};
document.getElementById('arretNourriture').onclick = function(){doArret('Nourriture');};
document.getElementById('lectureAutochtones').onclick = function(){doLecture('Autochtones');};
document.getElementById('pauseAutochtones').onclick = function(){doPause('Autochtones');};
document.getElementById('reprendreAutochtones').onclick = function(){doReprendre('Autochtones');};
document.getElementById('arretAutochtones').onclick = function(){doArret('Autochtones');};
document.getElementById('lectureB12').onclick = function(){doLecture('B12');};
document.getElementById('pauseB12').onclick = function(){doPause('B12');};
document.getElementById('reprendreB12').onclick = function(){doReprendre('B12');};
document.getElementById('arretB12').onclick = function(){doArret('B12');};
document.getElementById('lectureBacteries').onclick = function(){doLecture('Bacteries');};
document.getElementById('pauseBacteries').onclick = function(){doPause('Bacteries');};
document.getElementById('reprendreBacteries').onclick = function(){doReprendre('Bacteries');};
document.getElementById('arretBacteries').onclick = function(){doArret('Bacteries');};
document.getElementById('lectureBelleVie').onclick = function(){doLecture('BelleVie');};
document.getElementById('pauseBelleVie').onclick = function(){doPause('BelleVie');};
document.getElementById('reprendreBelleVie').onclick = function(){doReprendre('BelleVie');};
document.getElementById('arretBelleVie').onclick = function(){doArret('BelleVie');};
document.getElementById('lectureBio').onclick = function(){doLecture('Bio');};
document.getElementById('pauseBio').onclick = function(){doPause('Bio');};
document.getElementById('reprendreBio').onclick = function(){doReprendre('Bio');};
document.getElementById('arretBio').onclick = function(){doArret('Bio');};
document.getElementById('lectureBiologique').onclick = function(){doLecture('Biologique');};
document.getElementById('pauseBiologique').onclick = function(){doPause('Biologique');};
document.getElementById('reprendreBiologique').onclick = function(){doReprendre('Biologique');};
document.getElementById('arretBiologique').onclick = function(){doArret('Biologique');};
document.getElementById('lectureMeilleure').onclick = function(){doLecture('Meilleure');};
document.getElementById('pauseMeilleure').onclick = function(){doPause('Meilleure');};
document.getElementById('reprendreMeilleure').onclick = function(){doReprendre('Meilleure');};
document.getElementById('arretMeilleure').onclick = function(){doArret('Meilleure');};
document.getElementById('lectureCalcium').onclick = function(){doLecture('Calcium');};
document.getElementById('pauseCalcium').onclick = function(){doPause('Calcium');};
document.getElementById('reprendreCalcium').onclick = function(){doReprendre('Calcium');};
document.getElementById('arretCalcium').onclick = function(){doArret('Calcium');};
document.getElementById('lectureCanines').onclick = function(){doLecture('Canines');};
document.getElementById('pauseCanines').onclick = function(){doPause('Canines');};
document.getElementById('reprendreCanines').onclick = function(){doReprendre('Canines');};
document.getElementById('arretCanines').onclick = function(){doArret('Canines');};
document.getElementById('lectureCarences').onclick = function(){doLecture('Carences');};
document.getElementById('pauseCarences').onclick = function(){doPause('Carences');};
document.getElementById('reprendreCarences').onclick = function(){doReprendre('Carences');};
document.getElementById('arretCarences').onclick = function(){doArret('Carences');};
document.getElementById('lectureCerveau').onclick = function(){doLecture('Cerveau');};
document.getElementById('pauseCerveau').onclick = function(){doPause('Cerveau');};
document.getElementById('reprendreCerveau').onclick = function(){doReprendre('Cerveau');};
document.getElementById('arretCerveau').onclick = function(){doArret('Cerveau');};
document.getElementById('lectureCercle').onclick = function(){doLecture('Cercle');};
document.getElementById('pauseCercle').onclick = function(){doPause('Cercle');};
document.getElementById('reprendreCercle').onclick = function(){doReprendre('Cercle');};
document.getElementById('arretCercle').onclick = function(){doArret('Cercle');};
document.getElementById('lectureChaine').onclick = function(){doLecture('Chaine');};
document.getElementById('pauseChaine').onclick = function(){doPause('Chaine');};
document.getElementById('reprendreChaine').onclick = function(){doReprendre('Chaine');};
document.getElementById('arretChaine').onclick = function(){doArret('Chaine');};
document.getElementById('lectureChinois').onclick = function(){doLecture('Chinois');};
document.getElementById('pauseChinois').onclick = function(){doPause('Chinois');};
document.getElementById('reprendreChinois').onclick = function(){doReprendre('Chinois');};
document.getElementById('arretChinois').onclick = function(){doArret('Chinois');};
document.getElementById('lectureChoix').onclick = function(){doLecture('Choix');};
document.getElementById('pauseChoix').onclick = function(){doPause('Choix');};
document.getElementById('reprendreChoix').onclick = function(){doReprendre('Choix');};
document.getElementById('arretChoix').onclick = function(){doArret('Choix');};
document.getElementById('lectureChomage').onclick = function(){doLecture('Chomage');};
document.getElementById('pauseChomage').onclick = function(){doPause('Chomage');};
document.getElementById('reprendreChomage').onclick = function(){doReprendre('Chomage');};
document.getElementById('arretChomage').onclick = function(){doArret('Chomage');};
document.getElementById('lectureCosmetiques').onclick = function(){doLecture('Cosmetiques');};
document.getElementById('pauseCosmetiques').onclick = function(){doPause('Cosmetiques');};
document.getElementById('reprendreCosmetiques').onclick = function(){doReprendre('Cosmetiques');};
document.getElementById('arretCosmetiques').onclick = function(){doArret('Cosmetiques');};
document.getElementById('lectureCruaute').onclick = function(){doLecture('Cruaute');};
document.getElementById('pauseCruaute').onclick = function(){doPause('Cruaute');};
document.getElementById('reprendreCruaute').onclick = function(){doReprendre('Cruaute');};
document.getElementById('arretCruaute').onclick = function(){doArret('Cruaute');};
document.getElementById('lectureCulture').onclick = function(){doLecture('Culture');};
document.getElementById('pauseCulture').onclick = function(){doPause('Culture');};
document.getElementById('reprendreCulture').onclick = function(){doReprendre('Culture');};
document.getElementById('arretCulture').onclick = function(){doArret('Culture');};
document.getElementById('lectureProblemes').onclick = function(){doLecture('Problemes');};
document.getElementById('pauseProblemes').onclick = function(){doPause('Problemes');};
document.getElementById('reprendreProblemes').onclick = function(){doReprendre('Problemes');};
document.getElementById('arretProblemes').onclick = function(){doArret('Problemes');};
document.getElementById('lectureDegoutante').onclick = function(){doLecture('Degoutante');};
document.getElementById('pauseDegoutante').onclick = function(){doPause('Degoutante');};
document.getElementById('reprendreDegoutante').onclick = function(){doReprendre('Degoutante');};
document.getElementById('arretDegoutante').onclick = function(){doArret('Degoutante');};
document.getElementById('lectureDomestiques').onclick = function(){doLecture('Domestiques');};
document.getElementById('pauseDomestiques').onclick = function(){doPause('Domestiques');};
document.getElementById('reprendreDomestiques').onclick = function(){doReprendre('Domestiques');};
document.getElementById('arretDomestiques').onclick = function(){doArret('Domestiques');};
document.getElementById('lectureDevons').onclick = function(){doLecture('Devons');};
document.getElementById('pauseDevons').onclick = function(){doPause('Devons');};
document.getElementById('reprendreDevons').onclick = function(){doReprendre('Devons');};
document.getElementById('arretDevons').onclick = function(){doArret('Devons');};
document.getElementById('lectureDieu').onclick = function(){doLecture('Dieu');};
document.getElementById('pauseDieu').onclick = function(){doPause('Dieu');};
document.getElementById('reprendreDieu').onclick = function(){doReprendre('Dieu');};
document.getElementById('arretDieu').onclick = function(){doArret('Dieu');};
document.getElementById('lectureDifference').onclick = function(){doLecture('Difference');};
document.getElementById('pauseDifference').onclick = function(){doPause('Difference');};
document.getElementById('reprendreDifference').onclick = function(){doReprendre('Difference');};
document.getElementById('arretDifference').onclick = function(){doArret('Difference');};
document.getElementById('lectureDiminue').onclick = function(){doLecture('Diminue');};
document.getElementById('pauseDiminue').onclick = function(){doPause('Diminue');};
document.getElementById('reprendreDiminue').onclick = function(){doReprendre('Diminue');};
document.getElementById('arretDiminue').onclick = function(){doArret('Diminue');};
document.getElementById('lectureDisparaitrait').onclick = function(){doLecture('Disparaitrait');};
document.getElementById('pauseDisparaitrait').onclick = function(){doPause('Disparaitrait');};
document.getElementById('reprendreDisparaitrait').onclick = function(){doReprendre('Disparaitrait');};
document.getElementById('arretDisparaitrait').onclick = function(){doArret('Disparaitrait');};
document.getElementById('lectureDispendieu').onclick = function(){doLecture('Dispendieu');};
document.getElementById('pauseDispendieu').onclick = function(){doPause('Dispendieu');};
document.getElementById('reprendreDispendieu').onclick = function(){doReprendre('Dispendieu');};
document.getElementById('arretDispendieu').onclick = function(){doArret('Dispendieu');};
document.getElementById('lectureLeurVie').onclick = function(){doLecture('LeurVie');};
document.getElementById('pauseLeurVie').onclick = function(){doPause('LeurVie');};
document.getElementById('reprendreLeurVie').onclick = function(){doReprendre('LeurVie');};
document.getElementById('arretLeurVie').onclick = function(){doArret('LeurVie');};
document.getElementById('lectureEthique').onclick = function(){doLecture('Ethique');};
document.getElementById('pauseEthique').onclick = function(){doPause('Ethique');};
document.getElementById('reprendreEthique').onclick = function(){doReprendre('Ethique');};
document.getElementById('arretEthique').onclick = function(){doArret('Ethique');};
document.getElementById('lectureEuthanasier').onclick = function(){doLecture('Euthanasier');};
document.getElementById('pauseEuthanasier').onclick = function(){doPause('Euthanasier');};
document.getElementById('reprendreEuthanasier').onclick = function(){doReprendre('Euthanasier');};
document.getElementById('arretEuthanasier').onclick = function(){doArret('Euthanasier');};
document.getElementById('lectureEcologique').onclick = function(){doLecture('Ecologique');};
document.getElementById('pauseEcologique').onclick = function(){doPause('Ecologique');};
document.getElementById('reprendreEcologique').onclick = function(){doReprendre('Ecologique');};
document.getElementById('arretEcologique').onclick = function(){doArret('Ecologique');};
document.getElementById('lectureDifferement').onclick = function(){doLecture('Differement');};
document.getElementById('pauseDifferement').onclick = function(){doPause('Differement');};
document.getElementById('reprendreDifferement').onclick = function(){doReprendre('Differement');};
document.getElementById('arretDifferement').onclick = function(){doArret('Differement');};
document.getElementById('lectureFer').onclick = function(){doLecture('Fer');};
document.getElementById('pauseFer').onclick = function(){doPause('Fer');};
document.getElementById('reprendreFer').onclick = function(){doReprendre('Fer');};
document.getElementById('arretFer').onclick = function(){doArret('Fer');};
document.getElementById('lectureFermes').onclick = function(){doLecture('Fermes');};
document.getElementById('pauseFermes').onclick = function(){doPause('Fermes');};
document.getElementById('reprendreFermes').onclick = function(){doReprendre('Fermes');};
document.getElementById('arretFermes').onclick = function(){doArret('Fermes');};
document.getElementById('lectureForcez').onclick = function(){doLecture('Forcez');};
document.getElementById('pauseForcez').onclick = function(){doPause('Forcez');};
document.getElementById('reprendreForcez').onclick = function(){doReprendre('Forcez');};
document.getElementById('arretForcez').onclick = function(){doArret('Forcez');};
document.getElementById('lectureGaspille').onclick = function(){doLecture('Gaspille');};
document.getElementById('pauseGaspille').onclick = function(){doPause('Gaspille');};
document.getElementById('reprendreGaspille').onclick = function(){doReprendre('Gaspille');};
document.getElementById('arretGaspille').onclick = function(){doArret('Gaspille');};
document.getElementById('lectureGout').onclick = function(){doLecture('Gout');};
document.getElementById('pauseGout').onclick = function(){doPause('Gout');};
document.getElementById('reprendreGout').onclick = function(){doReprendre('Gout');};
document.getElementById('arretGout').onclick = function(){doArret('Gout');};
document.getElementById('lectureHitler').onclick = function(){doLecture('Hitler');};
document.getElementById('pauseHitler').onclick = function(){doPause('Hitler');};
document.getElementById('reprendreHitler').onclick = function(){doReprendre('Hitler');};
document.getElementById('arretHitler').onclick = function(){doArret('Hitler');};
document.getElementById('lectureHumainement').onclick = function(){doLecture('Humainement');};
document.getElementById('pauseHumainement').onclick = function(){doPause('Humainement');};
document.getElementById('reprendreHumainement').onclick = function(){doReprendre('Humainement');};
document.getElementById('arretHumainement').onclick = function(){doArret('Humainement');};
document.getElementById('lectureHumains').onclick = function(){doLecture('Humains');};
document.getElementById('pauseHumains').onclick = function(){doPause('Humains');};
document.getElementById('reprendreHumains').onclick = function(){doReprendre('Humains');};
document.getElementById('arretHumains').onclick = function(){doArret('Humains');};
document.getElementById('lecturePalme').onclick = function(){doLecture('Palme');};
document.getElementById('pausePalme').onclick = function(){doPause('Palme');};
document.getElementById('reprendrePalme').onclick = function(){doReprendre('Palme');};
document.getElementById('arretPalme').onclick = function(){doArret('Palme');};
document.getElementById('lectureHumanisez').onclick = function(){doLecture('Humanisez');};
document.getElementById('pauseHumanisez').onclick = function(){doPause('Humanisez');};
document.getElementById('reprendreHumanisez').onclick = function(){doReprendre('Humanisez');};
document.getElementById('arretHumanisez').onclick = function(){doArret('Humanisez');};
document.getElementById('lectureHypocrites').onclick = function(){doLecture('Hypocrites');};
document.getElementById('pauseHypocrites').onclick = function(){doPause('Hypocrites');};
document.getElementById('reprendreHypocrites').onclick = function(){doReprendre('Hypocrites');};
document.getElementById('arretHypocrites').onclick = function(){doArret('Hypocrites');};
document.getElementById('lectureInconsistant').onclick = function(){doLecture('Inconsistant');};
document.getElementById('pauseInconsistant').onclick = function(){doPause('Inconsistant');};
document.getElementById('reprendreInconsistant').onclick = function(){doReprendre('Inconsistant');};
document.getElementById('arretInconsistant').onclick = function(){doArret('Inconsistant');};
document.getElementById('lectureIle').onclick = function(){doLecture('Ile');};
document.getElementById('pauseIle').onclick = function(){doPause('Ile');};
document.getElementById('reprendreIle').onclick = function(){doReprendre('Ile');};
document.getElementById('arretIle').onclick = function(){doArret('Ile');};
document.getElementById('lectureImpoli').onclick = function(){doLecture('Impoli');};
document.getElementById('pauseImpoli').onclick = function(){doPause('Impoli');};
document.getElementById('reprendreImpoli').onclick = function(){doReprendre('Impoli');};
document.getElementById('arretImpoli').onclick = function(){doArret('Impoli');};
document.getElementById('lectureImportance').onclick = function(){doLecture('Importance');};
document.getElementById('pauseImportance').onclick = function(){doPause('Importance');};
document.getElementById('reprendreImportance').onclick = function(){doReprendre('Importance');};
document.getElementById('arretImportance').onclick = function(){doArret('Importance');};
document.getElementById('lectureIntelligents').onclick = function(){doLecture('Intelligents');};
document.getElementById('pauseIntelligents').onclick = function(){doPause('Intelligents');};
document.getElementById('reprendreIntelligents').onclick = function(){doReprendre('Intelligents');};
document.getElementById('arretIntelligents').onclick = function(){doArret('Intelligents');};
document.getElementById('lectureInsoutenable').onclick = function(){doLecture('Insoutenable');};
document.getElementById('pauseInsoutenable').onclick = function(){doPause('Insoutenable');};
document.getElementById('reprendreInsoutenable').onclick = function(){doReprendre('Insoutenable');};
document.getElementById('arretInsoutenable').onclick = function(){doArret('Insoutenable');};
document.getElementById('lectureInstinct').onclick = function(){doLecture('Instinct');};
document.getElementById('pauseInstinct').onclick = function(){doPause('Instinct');};
document.getElementById('reprendreInstinct').onclick = function(){doReprendre('Instinct');};
document.getElementById('arretInstinct').onclick = function(){doArret('Instinct');};
document.getElementById('lectureIntolerants').onclick = function(){doLecture('Intolerants');};
document.getElementById('pauseIntolerants').onclick = function(){doPause('Intolerants');};
document.getElementById('reprendreIntolerants').onclick = function(){doReprendre('Intolerants');};
document.getElementById('arretIntolerants').onclick = function(){doArret('Intolerants');};
document.getElementById('lectureJuger').onclick = function(){doLecture('Juger');};
document.getElementById('pauseJuger').onclick = function(){doPause('Juger');};
document.getElementById('reprendreJuger').onclick = function(){doReprendre('Juger');};
document.getElementById('arretJuger').onclick = function(){doArret('Juger');};
document.getElementById('lectureLaine').onclick = function(){doLecture('Laine');};
document.getElementById('pauseLaine').onclick = function(){doPause('Laine');};
document.getElementById('reprendreLaine').onclick = function(){doReprendre('Laine');};
document.getElementById('arretLaine').onclick = function(){doArret('Laine');};
document.getElementById('lectureLait').onclick = function(){doLecture('Lait');};
document.getElementById('pauseLait').onclick = function(){doPause('Lait');};
document.getElementById('reprendreLait').onclick = function(){doReprendre('Lait');};
document.getElementById('arretLait').onclick = function(){doArret('Lait');};
document.getElementById('lectureLaitAmande').onclick = function(){doLecture('LaitAmande');};
document.getElementById('pauseLaitAmande').onclick = function(){doPause('LaitAmande');};
document.getElementById('reprendreLaitAmande').onclick = function(){doReprendre('LaitAmande');};
document.getElementById('arretLaitAmande').onclick = function(){doArret('LaitAmande');};
document.getElementById('lectureLaitBon').onclick = function(){doLecture('LaitBon');};
document.getElementById('pauseLaitBon').onclick = function(){doPause('LaitBon');};
document.getElementById('reprendreLaitBon').onclick = function(){doReprendre('LaitBon');};
document.getElementById('arretLaitBon').onclick = function(){doArret('LaitBon');};
document.getElementById('lectureLegal').onclick = function(){doLecture('Legal');};
document.getElementById('pauseLegal').onclick = function(){doPause('Legal');};
document.getElementById('reprendreLegal').onclick = function(){doReprendre('Legal');};
document.getElementById('arretLegal').onclick = function(){doArret('Legal');};
document.getElementById('lectureLocal').onclick = function(){doLecture('Local');};
document.getElementById('pauseLocal').onclick = function(){doPause('Local');};
document.getElementById('reprendreLocal').onclick = function(){doReprendre('Local');};
document.getElementById('arretLocal').onclick = function(){doArret('Local');};
document.getElementById('lectureMaladifs').onclick = function(){doLecture('Maladifs');};
document.getElementById('pauseMaladifs').onclick = function(){doPause('Maladifs');};
document.getElementById('reprendreMaladifs').onclick = function(){doReprendre('Maladifs');};
document.getElementById('arretMaladifs').onclick = function(){doArret('Maladifs');};
document.getElementById('lectureMalsain').onclick = function(){doLecture('Malsain');};
document.getElementById('pauseMalsain').onclick = function(){doPause('Malsain');};
document.getElementById('reprendreMalsain').onclick = function(){doReprendre('Malsain');};
document.getElementById('arretMalsain').onclick = function(){doArret('Malsain');};
document.getElementById('lectureSeMangent').onclick = function(){doLecture('SeMangent');};
document.getElementById('pauseSeMangent').onclick = function(){doPause('SeMangent');};
document.getElementById('reprendreSeMangent').onclick = function(){doReprendre('SeMangent');};
document.getElementById('arretSeMangent').onclick = function(){doArret('SeMangent');};
document.getElementById('lecturePlusRien').onclick = function(){doLecture('PlusRien');};
document.getElementById('pausePlusRien').onclick = function(){doPause('PlusRien');};
document.getElementById('reprendrePlusRien').onclick = function(){doReprendre('PlusRien');};
document.getElementById('arretPlusRien').onclick = function(){doArret('PlusRien');};
document.getElementById('lectureMangeraient').onclick = function(){doLecture('Mangeraient');};
document.getElementById('pauseMangeraient').onclick = function(){doPause('Mangeraient');};
document.getElementById('reprendreMangeraient').onclick = function(){doReprendre('Mangeraient');};
document.getElementById('arretMangeraient').onclick = function(){doArret('Mangeraient');};
document.getElementById('lectureMalade').onclick = function(){doLecture('Malade');};
document.getElementById('pauseMalade').onclick = function(){doPause('Malade');};
document.getElementById('reprendreMalade').onclick = function(){doReprendre('Malade');};
document.getElementById('arretMalade').onclick = function(){doArret('Malade');};
document.getElementById('lectureMedicaux').onclick = function(){doLecture('Medicaux');};
document.getElementById('pauseMedicaux').onclick = function(){doPause('Medicaux');};
document.getElementById('reprendreMedicaux').onclick = function(){doReprendre('Medicaux');};
document.getElementById('arretMedicaux').onclick = function(){doArret('Medicaux');};
document.getElementById('lectureMiel').onclick = function(){doLecture('Miel');};
document.getElementById('pauseMiel').onclick = function(){doPause('Miel');};
document.getElementById('reprendreMiel').onclick = function(){doReprendre('Miel');};
document.getElementById('arretMiel').onclick = function(){doArret('Miel');};
document.getElementById('lectureMieux').onclick = function(){doLecture('Mieux');};
document.getElementById('pauseMieux').onclick = function(){doPause('Mieux');};
document.getElementById('reprendreMieux').onclick = function(){doReprendre('Mieux');};
document.getElementById('arretMieux').onclick = function(){doArret('Mieux');};
document.getElementById('lectureAnnees').onclick = function(){doLecture('Annees');};
document.getElementById('pauseAnnees').onclick = function(){doPause('Annees');};
document.getElementById('reprendreAnnees').onclick = function(){doReprendre('Annees');};
document.getElementById('arretAnnees').onclick = function(){doArret('Annees');};
document.getElementById('lectureMedecin').onclick = function(){doLecture('Medecin');};
document.getElementById('pauseMedecin').onclick = function(){doPause('Medecin');};
document.getElementById('reprendreMedecin').onclick = function(){doReprendre('Medecin');};
document.getElementById('arretMedecin').onclick = function(){doArret('Medecin');};
document.getElementById('lectureMode').onclick = function(){doLecture('Mode');};
document.getElementById('pauseMode').onclick = function(){doPause('Mode');};
document.getElementById('reprendreMode').onclick = function(){doReprendre('Mode');};
document.getElementById('arretMode').onclick = function(){doArret('Mode');};
document.getElementById('lectureSubective').onclick = function(){doLecture('Subective');};
document.getElementById('pauseSubective').onclick = function(){doPause('Subective');};
document.getElementById('reprendreSubective').onclick = function(){doReprendre('Subective');};
document.getElementById('arretSubective').onclick = function(){doArret('Subective');};
document.getElementById('lectureMondeEntier').onclick = function(){doLecture('MondeEntier');};
document.getElementById('pauseMondeEntier').onclick = function(){doPause('MondeEntier');};
document.getElementById('reprendreMondeEntier').onclick = function(){doReprendre('MondeEntier');};
document.getElementById('arretMondeEntier').onclick = function(){doArret('MondeEntier');};
document.getElementById('lectureMourir').onclick = function(){doLecture('Mourir');};
document.getElementById('pauseMourir').onclick = function(){doPause('Mourir');};
document.getElementById('reprendreMourir').onclick = function(){doReprendre('Mourir');};
document.getElementById('arretMourir').onclick = function(){doArret('Mourir');};
document.getElementById('lecturePourRien').onclick = function(){doLecture('PourRien');};
document.getElementById('pausePourRien').onclick = function(){doPause('PourRien');};
document.getElementById('reprendrePourRien').onclick = function(){doReprendre('PourRien');};
document.getElementById('arretPourRien').onclick = function(){doArret('PourRien');};
document.getElementById('lectureDeja').onclick = function(){doLecture('Deja');};
document.getElementById('pauseDeja').onclick = function(){doPause('Deja');};
document.getElementById('reprendreDeja').onclick = function(){doReprendre('Deja');};
document.getElementById('arretDeja').onclick = function(){doArret('Deja');};
document.getElementById('lectureNaturel').onclick = function(){doLecture('Naturel');};
document.getElementById('pauseNaturel').onclick = function(){doPause('Naturel');};
document.getElementById('reprendreNaturel').onclick = function(){doReprendre('Naturel');};
document.getElementById('arretNaturel').onclick = function(){doArret('Naturel');};
document.getElementById('lectureNormal').onclick = function(){doLecture('Normal');};
document.getElementById('pauseNormal').onclick = function(){doPause('Normal');};
document.getElementById('reprendreNormal').onclick = function(){doReprendre('Normal');};
document.getElementById('arretNormal').onclick = function(){doArret('Normal');};
document.getElementById('lectureNecessaire').onclick = function(){doLecture('Necessaire');};
document.getElementById('pauseNecessaire').onclick = function(){doPause('Necessaire');};
document.getElementById('reprendreNecessaire').onclick = function(){doReprendre('Necessaire');};
document.getElementById('arretNecessaire').onclick = function(){doArret('Necessaire');};
document.getElementById('lectureNihiliste').onclick = function(){doLecture('Nihiliste');};
document.getElementById('pauseNihiliste').onclick = function(){doPause('Nihiliste');};
document.getElementById('reprendreNihiliste').onclick = function(){doReprendre('Nihiliste');};
document.getElementById('arretNihiliste').onclick = function(){doArret('Nihiliste');};
document.getElementById('lectureOeufs').onclick = function(){doLecture('Oeufs');};
document.getElementById('pauseOeufs').onclick = function(){doPause('Oeufs');};
document.getElementById('reprendreOeufs').onclick = function(){doReprendre('Oeufs');};
document.getElementById('arretOeufs').onclick = function(){doArret('Oeufs');};
document.getElementById('lectureOpinion').onclick = function(){doLecture('Opinion');};
document.getElementById('pauseOpinion').onclick = function(){doPause('Opinion');};
document.getElementById('reprendreOpinion').onclick = function(){doReprendre('Opinion');};
document.getElementById('arretOpinion').onclick = function(){doArret('Opinion');};
document.getElementById('lectureYPenser').onclick = function(){doLecture('YPenser');};
document.getElementById('pauseYPenser').onclick = function(){doPause('YPenser');};
document.getElementById('reprendreYPenser').onclick = function(){doReprendre('YPenser');};
document.getElementById('arretYPenser').onclick = function(){doArret('YPenser');};
document.getElementById('lecturePenser').onclick = function(){doLecture('Penser');};
document.getElementById('pausePenser').onclick = function(){doPause('Penser');};
document.getElementById('reprendrePenser').onclick = function(){doReprendre('Penser');};
document.getElementById('arretPenser').onclick = function(){doArret('Penser');};
document.getElementById('lectureDifferemment').onclick = function(){doLecture('Differemment');};
document.getElementById('pauseDifferemment').onclick = function(){doPause('Differemment');};
document.getElementById('reprendreDifferemment').onclick = function(){doReprendre('Differemment');};
document.getElementById('arretDifferemment').onclick = function(){doArret('Differemment');};
document.getElementById('lectureFerme').onclick = function(){doLecture('Ferme');};
document.getElementById('pauseFerme').onclick = function(){doPause('Ferme');};
document.getElementById('reprendreFerme').onclick = function(){doReprendre('Ferme');};
document.getElementById('arretFerme').onclick = function(){doArret('Ferme');};
document.getElementById('lecturePoissons').onclick = function(){doLecture('Poissons');};
document.getElementById('pausePoissons').onclick = function(){doPause('Poissons');};
document.getElementById('reprendrePoissons').onclick = function(){doReprendre('Poissons');};
document.getElementById('arretPoissons').onclick = function(){doArret('Poissons');};
document.getElementById('lecturePlanete').onclick = function(){doLecture('Planete');};
document.getElementById('pausePlanete').onclick = function(){doPause('Planete');};
document.getElementById('reprendrePlanete').onclick = function(){doReprendre('Planete');};
document.getElementById('arretPlanete').onclick = function(){doArret('Planete');};
document.getElementById('lecturePremierHommes').onclick = function(){doLecture('PremierHommes');};
document.getElementById('pausePremierHommes').onclick = function(){doPause('PremierHommes');};
document.getElementById('reprendrePremierHommes').onclick = function(){doReprendre('PremierHommes');};
document.getElementById('arretPremierHommes').onclick = function(){doArret('PremierHommes');};
document.getElementById('lectureProteines').onclick = function(){doLecture('Proteines');};
document.getElementById('pauseProteines').onclick = function(){doPause('Proteines');};
document.getElementById('reprendreProteines').onclick = function(){doReprendre('Proteines');};
document.getElementById('arretProteines').onclick = function(){doArret('Proteines');};
document.getElementById('lectureAnimaux').onclick = function(){doLecture('Animaux');};
document.getElementById('pauseAnimaux').onclick = function(){doPause('Animaux');};
document.getElementById('reprendreAnimaux').onclick = function(){doReprendre('Animaux');};
document.getElementById('arretAnimaux').onclick = function(){doArret('Animaux');};
document.getElementById('lectureRaison').onclick = function(){doLecture('Raison');};
document.getElementById('pauseRaison').onclick = function(){doPause('Raison');};
document.getElementById('reprendreRaison').onclick = function(){doReprendre('Raison');};
document.getElementById('arretRaison').onclick = function(){doArret('Raison');};
document.getElementById('lectureReligion').onclick = function(){doLecture('Religion');};
document.getElementById('pauseReligion').onclick = function(){doPause('Religion');};
document.getElementById('reprendreReligion').onclick = function(){doReprendre('Religion');};
document.getElementById('arretReligion').onclick = function(){doArret('Religion');};
document.getElementById('lectureSacrifices').onclick = function(){doLecture('Sacrifices');};
document.getElementById('pauseSacrifices').onclick = function(){doPause('Sacrifices');};
document.getElementById('reprendreSacrifices').onclick = function(){doReprendre('Sacrifices');};
document.getElementById('arretSacrifices').onclick = function(){doArret('Sacrifices');};
document.getElementById('lectureGroupeSanguin').onclick = function(){doLecture('GroupeSanguin');};
document.getElementById('pauseGroupeSanguin').onclick = function(){doPause('GroupeSanguin');};
document.getElementById('reprendreGroupeSanguin').onclick = function(){doReprendre('GroupeSanguin');};
document.getElementById('arretGroupeSanguin').onclick = function(){doArret('GroupeSanguin');};
document.getElementById('lectureSentiments').onclick = function(){doLecture('Sentiments');};
document.getElementById('pauseSentiments').onclick = function(){doPause('Sentiments');};
document.getElementById('reprendreSentiments').onclick = function(){doReprendre('Sentiments');};
document.getElementById('arretSentiments').onclick = function(){doArret('Sentiments');};
document.getElementById('lectureService').onclick = function(){doLecture('Service');};
document.getElementById('pauseService').onclick = function(){doPause('Service');};
document.getElementById('reprendreService').onclick = function(){doReprendre('Service');};
document.getElementById('arretService').onclick = function(){doArret('Service');};
document.getElementById('lectureSouffrent').onclick = function(){doLecture('Souffrent');};
document.getElementById('pauseSouffrent').onclick = function(){doPause('Souffrent');};
document.getElementById('reprendreSouffrent').onclick = function(){doReprendre('Souffrent');};
document.getElementById('arretSouffrent').onclick = function(){doArret('Souffrent');};
document.getElementById('lectureSouffrir').onclick = function(){doLecture('Souffrir');};
document.getElementById('pauseSouffrir').onclick = function(){doPause('Souffrir');};
document.getElementById('reprendreSouffrir').onclick = function(){doReprendre('Souffrir');};
document.getElementById('arretSouffrir').onclick = function(){doArret('Souffrir');};
document.getElementById('lectureSoya').onclick = function(){doLecture('Soya');};
document.getElementById('pauseSoya').onclick = function(){doPause('Soya');};
document.getElementById('reprendreSoya').onclick = function(){doReprendre('Soya');};
document.getElementById('arretSoya').onclick = function(){doArret('Soya');};
document.getElementById('lectureSoja').onclick = function(){doLecture('Soja');};
document.getElementById('pauseSoja').onclick = function(){doPause('Soja');};
document.getElementById('reprendreSoja').onclick = function(){doReprendre('Soja');};
document.getElementById('arretSoja').onclick = function(){doArret('Soja');};
document.getElementById('lectureSouffriraient').onclick = function(){doLecture('Souffriraient');};
document.getElementById('pauseSouffriraient').onclick = function(){doPause('Souffriraient');};
document.getElementById('reprendreSouffriraient').onclick = function(){doReprendre('Souffriraient');};
document.getElementById('arretSouffriraient').onclick = function(){doArret('Souffriraient');};
document.getElementById('lectureSurpeuplerait').onclick = function(){doLecture('Surpeuplerait');};
document.getElementById('pauseSurpeuplerait').onclick = function(){doPause('Surpeuplerait');};
document.getElementById('reprendreSurpeuplerait').onclick = function(){doReprendre('Surpeuplerait');};
document.getElementById('arretSurpeuplerait').onclick = function(){doArret('Surpeuplerait');};
document.getElementById('lectureTechnologie').onclick = function(){doLecture('Technologie');};
document.getElementById('pauseTechnologie').onclick = function(){doPause('Technologie');};
document.getElementById('reprendreTechnologie').onclick = function(){doReprendre('Technologie');};
document.getElementById('arretTechnologie').onclick = function(){doArret('Technologie');};
document.getElementById('lecturePasLeTemps').onclick = function(){doLecture('PasLeTemps');};
document.getElementById('pausePasLeTemps').onclick = function(){doPause('PasLeTemps');};
document.getElementById('reprendrePasLeTemps').onclick = function(){doReprendre('PasLeTemps');};
document.getElementById('arretPasLeTemps').onclick = function(){doArret('PasLeTemps');};
document.getElementById('lectureToutLeMonde').onclick = function(){doLecture('ToutLeMonde');};
document.getElementById('pauseToutLeMonde').onclick = function(){doPause('ToutLeMonde');};
document.getElementById('reprendreToutLeMonde').onclick = function(){doReprendre('ToutLeMonde');};
document.getElementById('arretToutLeMonde').onclick = function(){doArret('ToutLeMonde');};
document.getElementById('lectureLesTuer').onclick = function(){doLecture('LesTuer');};
document.getElementById('pauseLesTuer').onclick = function(){doPause('LesTuer');};
document.getElementById('reprendreLesTuer').onclick = function(){doReprendre('LesTuer');};
document.getElementById('arretLesTuer').onclick = function(){doArret('LesTuer');};
document.getElementById('lectureBebe').onclick = function(){doLecture('Bebe');};
document.getElementById('pauseBebe').onclick = function(){doPause('Bebe');};
document.getElementById('reprendreBebe').onclick = function(){doReprendre('Bebe');};
document.getElementById('arretBebe').onclick = function(){doArret('Bebe');};
document.getElementById('lectureTribu').onclick = function(){doLecture('Tribu');};
document.getElementById('pauseTribu').onclick = function(){doPause('Tribu');};
document.getElementById('reprendreTribu').onclick = function(){doReprendre('Tribu');};
document.getElementById('arretTribu').onclick = function(){doArret('Tribu');};
document.getElementById('lectureElevés').onclick = function(){doLecture('Elevés');};
document.getElementById('pauseElevés').onclick = function(){doPause('Elevés');};
document.getElementById('reprendreElevés').onclick = function(){doReprendre('Elevés');};
document.getElementById('arretElevés').onclick = function(){doArret('Elevés');};
document.getElementById('lectureTuentPlus').onclick = function(){doLecture('TuentPlus');};
document.getElementById('pauseTuentPlus').onclick = function(){doPause('TuentPlus');};
document.getElementById('reprendreTuentPlus').onclick = function(){doReprendre('TuentPlus');};
document.getElementById('arretTuentPlus').onclick = function(){doArret('TuentPlus');};
document.getElementById('lectureTueries').onclick = function(){doLecture('Tueries');};
document.getElementById('pauseTueries').onclick = function(){doPause('Tueries');};
document.getElementById('reprendreTueries').onclick = function(){doReprendre('Tueries');};
document.getElementById('arretTueries').onclick = function(){doArret('Tueries');};
document.getElementById('lectureMedicaments').onclick = function(){doLecture('Medicaments');};
document.getElementById('pauseMedicaments').onclick = function(){doPause('Medicaments');};
document.getElementById('reprendreMedicaments').onclick = function(){doReprendre('Medicaments');};
document.getElementById('arretMedicaments').onclick = function(){doArret('Medicaments');};
document.getElementById('lectureVegetarien').onclick = function(){doLecture('Vegetarien');};
document.getElementById('pauseVegetarien').onclick = function(){doPause('Vegetarien');};
document.getElementById('reprendreVegetarien').onclick = function(){doReprendre('Vegetarien');};
document.getElementById('arretVegetarien').onclick = function(){doArret('Vegetarien');};
document.getElementById('lectureWelfariste').onclick = function(){doLecture('Welfariste');};
document.getElementById('pauseWelfariste').onclick = function(){doPause('Welfariste');};
document.getElementById('reprendreWelfariste').onclick = function(){doReprendre('Welfariste');};
document.getElementById('arretWelfariste').onclick = function(){doArret('Welfariste');};
document.getElementById('lectureConcept').onclick = function(){doLecture('Concept');};
document.getElementById('pauseConcept').onclick = function(){doPause('Concept');};
document.getElementById('reprendreConcept').onclick = function(){doReprendre('Concept');};
document.getElementById('arretConcept').onclick = function(){doArret('Concept');};
document.getElementById('lectureJamais').onclick = function(){doLecture('Jamais');};
document.getElementById('pauseJamais').onclick = function(){doPause('Jamais');};
document.getElementById('reprendreJamais').onclick = function(){doReprendre('Jamais');};
document.getElementById('arretJamais').onclick = function(){doArret('Jamais');};
document.getElementById('lectureSubjective').onclick = function(){doLecture('Subjective');};
document.getElementById('pauseSubjective').onclick = function(){doPause('Subjective');};
document.getElementById('reprendreSubjective').onclick = function(){doReprendre('Subjective');};
document.getElementById('arretSubjective').onclick = function(){doArret('Subjective');};
document.getElementById('lectureBible').onclick = function(){doLecture('Bible');};
document.getElementById('pauseBible').onclick = function(){doPause('Bible');};
document.getElementById('reprendreBible').onclick = function(){doReprendre('Bible');};
document.getElementById('arretBible').onclick = function(){doArret('Bible');};
document.getElementById('lectureSurvivre').onclick = function(){doLecture('Survivre');};
document.getElementById('pauseSurvivre').onclick = function(){doPause('Survivre');};
document.getElementById('reprendreSurvivre').onclick = function(){doReprendre('Survivre');};
document.getElementById('arretSurvivre').onclick = function(){doArret('Survivre');};
document.getElementById('lectureEtreTues').onclick = function(){doLecture('EtreTues');};
document.getElementById('pauseEtreTues').onclick = function(){doPause('EtreTues');};
document.getElementById('reprendreEtreTues').onclick = function(){doReprendre('EtreTues');};
document.getElementById('arretEtreTues').onclick = function(){doArret('EtreTues');};
document.getElementById('lectureTribus').onclick = function(){doLecture('Tribus');};
document.getElementById('pauseTribus').onclick = function(){doPause('Tribus');};
document.getElementById('reprendreTribus').onclick = function(){doReprendre('Tribus');};
document.getElementById('arretTribus').onclick = function(){doArret('Tribus');};
document.getElementById('lectureBenefice').onclick = function(){doLecture('Benefice');};
document.getElementById('pauseBenefice').onclick = function(){doPause('Benefice');};
document.getElementById('reprendreBenefice').onclick = function(){doReprendre('Benefice');};
document.getElementById('arretBenefice').onclick = function(){doArret('Benefice');};
document.getElementById('lectureDoivent').onclick = function(){doLecture('Doivent');};
document.getElementById('pauseDoivent').onclick = function(){doPause('Doivent');};
document.getElementById('reprendreDoivent').onclick = function(){doReprendre('Doivent');};
document.getElementById('arretDoivent').onclick = function(){doArret('Doivent');};</script>
	<script src="js/parler.js" defer></script>
	<!-- Code JS pour faire parler FIN -->

**NoSmoking** · 25/07/2020, 11h09

Mais ça ne fonctionne pas pour une autre page où j'en ai environ 130.

Je te propose de changer ton approche et de générer tes boutons côté client au chargement de la page, de ce fait peu importe la quantité, voire identification de tes éléments à lire.

Par exemple, sur base du HTML suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="Objectif" class="texte-a-lire">
  <p>L'objectif de ce site est important. </p>
</div>
<div id="Pourquoi" class="texte-a-lire">
  <p>Pourquoi est-il important de savoir?</p>
</div>

on peut créer les boutons atomiquement de la façon suivante, attention il faut suivre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const btnCde = [{
  label: "▶",
  title: "Lecture",
  action: doLecture
}, {
  label: "||",
  title: "Pause",
  action: doPause
}, {
  label: "|▶",
  title: "Reprise",
  action: doReprendre
}, {
  label: "✖︎",
  title: "Arrêt",
  action: doArret
}];
 
const oTextes = document.querySelectorAll(".texte-a-lire");
oTextes.forEach((el) => {
  const refId = el.id;
  const oParent = el.parentNode;
  // création d'un conteneur
  const container = document.createElement("DIV");
  container.className = "container-btn-speech";
  // création et ajout des boutons
  btnCde.forEach((cde) => {
    const btn = document.createElement("BUTTON");
    btn.innerHTML = cde.label;
    btn.title = cde.title;
    btn.className = "btn-speech";
    btn.onclick = function () {
      cde.action(refId);
    };
    container.appendChild(btn);
  });
  // ajout conteneur suivant position
  oParent.insertBefore(container, el);
});

et tu devrais obtenir quelque chose comme

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="container-btn-speech">
  <button title="Lecture" class="btn-speech">▶</button>
  <button title="Pause" class="btn-speech">||</button>
  <button title="Reprise" class="btn-speech">|▶</button>
  <button title="Arrêt" class="btn-speech">✖︎</button>
</div>
<div id="Objectif" class="texte-a-lire">
  <p>L'objectif de ce site est important. </p>
</div>
<div class="container-btn-speech">
  <button title="Lecture" class="btn-speech">▶</button>
  <button title="Pause" class="btn-speech">||</button>
  <button title="Reprise" class="btn-speech">|▶</button>
  <button title="Arrêt" class="btn-speech">✖︎</button>
</div>
<div id="Pourquoi" class="texte-a-lire">
  <p>Pourquoi est-il important de savoir?</p>
</div>

La mise en place de classes sur les éléments n'est là que pour faire du cosmétique.

Nota : je ne suis pas sûr que tu ais besoin de tous les boutons !

**Renerelire** · 25/07/2020, 11h25

Je viens de voir, que tu m'as donner d'autres explications : Merci, je vais lire ça. J'envoie ce message que j'avais commencé.

Tous fonctionne sur les navigateurs de mon PC, mais pas sur ceux de mon mobile.

Sur un des navigateur je peux par exemple écouter la synthèse vocale et l'arrêter, par exemple, sur mon premier texte à faire parler. La pause ne fonctionne pas et je ne peux pas écouter les autres textes. Sur d'autres navigateur, aucun il n'y a aucun son.

Je remets le code JavaScript (les codes HTML et PHP) n'ont pas changés.

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
// Faire parler en Français
 
// Function for Speak
function doLecture(textName) {
	/* Removes all utterances from the utterance queue and
	if an utterance is currently being spoken, speaking will stop */
	speechSynthesis.cancel();
	// instancier un objet d'énonciation
	let parole = new SpeechSynthesisUtterance();
	parole.lang = 'fr-Fr'; // language, default is 'en-US'
		// Get the DOM object
	parole.text = document.getElementById(textName).textContent;
	parole.pitch = 1; // 0 à 2 = hauteur
	parole.rate = 1.3; // 0.1 à 10 = vitesse
	parole.volume = 1; // 0 à 1 = volume
	// Speak
	speechSynthesis.speak(parole);
}
 
// Function for Pause
function doPause(textName) {
	// instancier un objet d'énonciation
	let parole = new SpeechSynthesisUtterance();
	// Get the DOM object
	parole.text = document.getElementById(textName).textContent;
	// Pause speaking
	speechSynthesis.pause(parole);
}
 
// Function for Resume
function doReprendre(textName) {
	// instancier un objet d'énonciation
	let parole = new SpeechSynthesisUtterance();
	// Get the DOM object
	parole.text = document.getElementById(textName).textContent;
	// Resume speaking
	speechSynthesis.resume(parole);
}
 
// Function for Stop
function doArret(textName) {
	// instancier un objet d'énonciation
	let parole = new SpeechSynthesisUtterance();
	// Get the DOM object
	parole.text = document.getElementById(textName).textContent;
	// Stop speaking
	speechSynthesis.cancel(parole);
}

**Renerelire** · 26/07/2020, 07h43

Salut NoSmoking.

J'ai essayé d'utiliser le code que tu m'as suggéré pour la création atomique des boutons. Comme je ne sais pas comment ça fonctionne, tout ça, je vais rester avec ce que j'ai réussi à faire jusqu'à maintenant.

Je vais surtout chercher à faire fonctionner cette synthèse avec les navigateurs de mon mobile.

Encore, merci: Je sais que ce site est là pour cela, mais c'est tout de même gentil d'aider les gens dans les domaines où nous avons de l'expérience.

**NoSmoking** · 26/07/2020, 09h32

J'ai essayé d'utiliser le code que tu m'as suggéré pour la création atomique des boutons. Comme je ne sais pas comment ça fonctionne, tout ça, je vais rester avec ce que j'ai réussi à faire jusqu'à maintenant.

Je te mets un petit exemple de ce que l'on peut faire simplement

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Web Speech</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2087084">
<meta name="description" content="Mise en oeuvre simple de l'API Web Speech avec création dynamique des boutons de commande des textes à lire.">
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
}
h1, h2, h3 {
  margin: .25em 0;
  color: #069;
}
time {
  float: right;
  margin: .5em;
  font-size: 0.9em;
  color: #888;
}
main {
  display: block;
  margin: auto;
  max-width: 60em;
}
.container-text {
  margin: 0 0 1em;
  padding: .25em;
  border: 1px solid #CCC;
}
.texte-a-lire {
  margin: 1em 0 .5em;
  padding: 0 .5em;
}
.container-btn-speech {
  display: inline-flex;
  border: 1px solid #CCC;
}
.btn-speech {
  margin: .25em;
  min-width: 4em;
  font: inherit;
  font-size: .8em;
  font-weight: 700;
  line-height: 2;
  cursor: pointer;
}
.btn-speech:hover {
  color: #069;
}
</style>
<body>
<main>
  <header>
    <time datetime="2020-07-26">Juil. 2020</time>
    <h1>API Web Speech</h1>
    <p>Création dynamique des boutons de commande des textes à lire.
  </header>
 
  <div class="container-text">
    <div id="Objectif" class="texte-a-lire">
      <p>L'objectif de ce site est important. </p>
    </div>
  </div>
  <div class="container-text">
    <div id="Pourquoi" class="texte-a-lire">
      <p>Pourquoi est-il important de savoir ?</p>
    </div>
  </div>
  <div class="container-text">
    <div id="fable" class="texte-a-lire">
      <p>Maître Corbeau sur un arbre perché,<br>
      Tenait en son bec un fromage.<br>
      Maître Renard par l’odeur alléché<br>
      Lui tint à peu près ce langage :<br>
      Et bonjour, Monsieur du Corbeau. </p>
    </div>
  </div>
  <footer>
    <p>Voir la <a href="https://www.developpez.net/forums/showthread.php?t=2087084">discussion sur Developpez.com</a>
  </footer>
</main>
<script>
// Fonction pour faire parler
function doLecture(textName) {
  speechSynthesis.cancel();
  let parole = new SpeechSynthesisUtterance();
  parole.lang = 'fr-Fr';  // language, default is 'en-US'
  parole.pitch = 1;       // 0 à 2 = hauteur
  parole.rate = 1;        // 0.1 à 10 = vitesse
  parole.volume = 1;      // 0 à 1 = volume
  parole.text = document.getElementById(textName).textContent;
  speechSynthesis.speak(parole);
}
function doPause() {
  speechSynthesis.pause();
}
function doReprendre() {
  speechSynthesis.resume();
}
function doArret() {
  speechSynthesis.cancel();
}
/*
 * Partie création dynamique
 */
const btnCde = [{
  label: "▶",
  title: "Lecture",
  action: doLecture
}, {
  label: "||",
  title: "Pause",
  action: doPause
}, {
  label: "|▶",
  title: "Reprise",
  action: doReprendre
}, {
  label: "✖&#xFE0E;",
  title: "Arrêt",
  action: doArret
}];
 
const oTextes = document.querySelectorAll(".texte-a-lire");
oTextes.forEach((el) => {
  const refId = el.id;
  const oParent = el.parentNode;
  // création d'un conteneur
  const container = document.createElement("DIV");
  container.className = "container-btn-speech";
  // création et ajout des boutons
  btnCde.forEach((cde) => {
    const btn = document.createElement("BUTTON");
    btn.innerHTML = cde.label;
    btn.title = cde.title;
    btn.className = "btn-speech";
    btn.onclick = function () {
      cde.action(refId);
    };
    container.appendChild(btn);
  });
  // ajout conteneur
  oParent.insertBefore(container, el);
});
</script>
</body>
</html>

avec l'exemple en ligne : API Web Speech

Remarques :
Les méthodes pause, resume et cancel peuvent être grandement simplifiées.
Comme tu travailles avec un même objet speechSynthesis les boutons pause, resume et cancel affecte la lecture en cours et ce quelque soit le paragraphe en cours de lecture.

Sur un des navigateur je peux par exemple écouter la synthèse vocale et l'arrêter, par exemple, sur mon premier texte à faire parler. La pause ne fonctionne pas et je ne peux pas écouter les autres textes. Sur d'autres navigateur, aucun il n'y a aucun son.
...
Je vais surtout chercher à faire fonctionner cette synthèse avec les navigateurs de mon mobile.

Là c'est pas gagné, cette API n'est pas finalisée et il subsiste pas mal de dysfonctionnement dont un notamment sur la mise en pause de la lecture.

Ressources :

**Renerelire** · 26/07/2020, 09h52

Cool, c'est vraiment plus propre et sans risque de mal écrire les éléments de mes tableaux (si ce sont des tableaux, hahaha).

Je refais tout mon site de cette façon...

Un grand merci !

Je ne comprends pas le délais de faire fonctionner la synthèse vocale partout (tous les navigateurs). C'est si compliqué? Ou c'est voulu?

Déjà, il semble que chrome n'affiche pas les choses de la même façon que Firefox, même si j'ai essayé de faire un RESET dans ma feuille de style CSS principale.

**NoSmoking** · 26/07/2020, 17h49

Je ne comprends pas le délais de faire fonctionner la synthèse vocale partout ...

Synthèse vocale silencieuse : Code PHP JavaScript unique pour plusieurs textes à faire parler.

JavaScript

Discussions similaires

Partager

Partager