Discussion :

[sitalgerie]

Bonjour,

Je préfère vous prévenir avant de poster mon problème, je suis plus un bricoleur de code qu'un programmeur...

Je suis en train de programmer bricoler en prenant du code par-ci, par-là un petit script en javascript qui permet en tapant un mot en français il affiche la traduction en anglais ou vis versa et... ça fonctionne très bien.

Ce que je souhaite rajouter c'est qu'en cliquant sur la traduction on entendra la prononciation du mot en anglais, je précise que c'est moi-même qui enregistrera ces mots en mp3 (pas une voix robotique de IA de Google).

vous trouverez ci-dessous le petit script sans la partie formulaire html.

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
40
41
42
43
44
45
46
47
48
49
var dico=new InitDico();
dico.Add("bonjour","hello");
dico.Add("chaise","chair");
dico.Add("eau","water");
 
function disp(txt) { document.write(txt) }
 
function InitDico() {
 
	this.nb_mot=0;
	this.Add=AddMot;
	this.Traduire=TraduireMot;
	this.Traduirek=TraduireMotk;
}
 
function AddMot(un_mot,traduction) {
 
	var nb = this.nb_mot;
	var mot = new Object;
		mot.txt=un_mot;
		mot.trad=traduction;
	this[nb]=mot;
	this.nb_mot++;
}
 
function TraduireMot(mot) {
	var n=this.nb_mot;
	var indice=-1;
	if (mot!="") {
		for (var i=0; i<n; i++) {
			if (this[i].txt==mot) {indice=i; break;}
		}
		if (indice>=0) {document.forms[0].elements[3].value=this[indice].trad}
		else {document.forms[0].elements[3].value="Mot absent du dictionnaire";}
	}
}
 
function TraduireMotk(mot) {
 
	var n=this.nb_mot;
	var indice=-1;
	if (mot!="") {
		for (var i=0; i<n; i++) {
			if (this[i].trad==mot) {indice=i; break;}
		}
		if (indice>=0) {document.forms[0].elements[3].value=this[indice].txt}
		else {document.forms[0].elements[3].value="Mot absent du dictionnaire";}
	}
}

J'ai essayé de rajouter dans le script un petit code en html5

Code html :

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

<audio controls="controls"><source src="hello.mp3" type="audio/mp3" /></audio>

mais ça ne fonctionne pas

voici comment j'ai fait :

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
40
41
42
43
44
45
46
47
var dico=new InitDico();
 
dico.Add("bonjour","hello, <audio controls="controls"><source src="hello.mp3" type="audio/mp3" /></audio>");
dico.Add("chaise","chair");
dico.Add("eau","water");
 
function disp(txt) { document.write(txt) }
 
function InitDico() {
	this.nb_mot=0;
	this.Add=AddMot;
	this.Traduire=TraduireMot;
	this.Traduirek=TraduireMotk;
}
 
function AddMot(un_mot,traduction) {
	var nb = this.nb_mot;
	var mot = new Object;
		mot.txt=un_mot;
		mot.trad=traduction;
	this[nb]=mot;
	this.nb_mot++;
}
 
function TraduireMot(mot) {
	var n=this.nb_mot;
	var indice=-1;
	if (mot!="") {
		for (var i=0; i<n; i++) {
			if (this[i].txt==mot) {indice=i; break;}
		}
		if (indice>=0) {document.forms[0].elements[3].value=this[indice].trad}
		else {document.forms[0].elements[3].value="Mot absent du dictionnaire";}
	}
}
 
function TraduireMotk(mot) {
	var n=this.nb_mot;
	var indice=-1;
	if (mot!="") {
		for (var i=0; i<n; i++) {
			if (this[i].trad==mot) {indice=i; break;}
		}
		if (indice>=0) {document.forms[0].elements[3].value=this[indice].txt}
		else {document.forms[0].elements[3].value="Mot absent du dictionnaire";}
	}
}

Je vous serais vraiment très reconnaissant si vous m'aider à corriger mon script.

Bien cordialement,

[Watilin]

Bonsoir,

actuellement tu as deux problèmes. Le premier est un problème de guillemets, simple à régler : il suffit de les échapper avec un antislash \…

Code :

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

dico.Add("bonjour", "hello, <audio controls=\"controls\"><source src=\"hello.mp3\" type=\"audio/mp3\" /></audio>");

… Ou bien d’utiliser l’autre type de guillemets :

Code :

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

dico.Add("bonjour", 'hello, <audio controls="controls"><source src="hello.mp3" type="audio/mp3" /></audio>');

Le second problème, c’est qu’on ne peut pas ajouter de HTML dans une page via l’attribut value d’un champ de formulaire. Pour ça il y a plusieurs façons de faire, je te propose d’utiliser insertAdjacentHTML.

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
function TraduireMot(mot) {
  var input = document.forms[0].elements[3];
 
  var n = this.nb_mot;
  var indice = -1;
  if (mot !== "") {
    for (var i = 0; i < n; i++) {
      if (this[i].txt === mot) {
        indice = i;
        break;
      }
    }
 
    if (indice >= 0) {
      input.value = this[indice].trad;
      input.insertAdjacentHTML("afterend", "<audio controls=\"controls\"><source src=\"hello.mp3\" type=\"audio/mp3\" /></audio>");
    }
    else {
      input.value = "Mot absent du dictionnaire";
    }
  }
}

Les choses deviennent un peu plus compliquées quand l’utilisateur ou l’utilisatrice demande plusieurs traductions. C’est une situation qui arrive souvent, il faut en tenir compte.
Il faut détecter si un élément <audio> a déjà été inséré après l’input. Le cas échéant, on le retire avant d’insérer le nouveau.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function TraduireMot(mot) {
  ... // le début de la fonction ne change pas
 
    if (indice >= 0) {
      input.value = this[indice].trad;
      var audio = input.parentElement.querySelector("audio");
      if (audio) {
        audio.remove();
      }
      input.insertAdjacentHTML("afterend", "<audio controls=\"controls\"><source src=\"hello.mp3\" type=\"audio/mp3\" /></audio>");
    }
    else ...

Garde à l’esprit que ces exemples que je te donne ont hello.mp3 codé « en dur », il faudra que tu fasses quelques adaptations pour que l’audio inséré lise le bon fichier. Je ne rentre pas dans les détails car je n’ai pas exactement compris comment tu utilises ta structure dico, mais vu ce que tu es déjà capable de faire, je pense que tu n’auras pas trop de difficultés

Puisque tu aimes bricoler, je te conseille de te munir des bons outils. Le plus important des outils est la console, que tu trouves dans le panneau d’outils de tout bon navigateur, et qui s’ouvre avec la touche F12. La console te permet de voir les messages d’erreurs du script, d’afficher les informations de débogage avec console.log(), ainsi que d’évaluer des bouts de script en direct.