Lier un fichier son à un objet graphique

**dreanlin** · 24/10/2006, 22h07

Bonjour,

Le code ci-joint permet d'afficher sous forme d'applet un certain nombre de rectangles colorés dans une fenêtre. A chaque rectangle doit correspondre un signe (ou lettre) et un son du français. Par exemple, au premier rectangle de la partie supérieure du tableau, de couleur blanche, correspondront le signe et le son "a". Au second rectangle, en rouge, correspondront le signe et le son "o" et au troisième rectangle (en vert), le son et le signe "i". Le cinquième rectangle (en jaune) correspond au son et au signe "r" (et ainsi de suite). Au rectangle de couleur magenta, dans la partie inférieure du tableau, correspondront le signe et le son "m".

En cliquant successivement sur les rectangles blanc, magenta et vert, on obtient le mot "ami". La combination des rectangles magenta, blanc et vert produira le mot "mai". Si l'on introduit la consonne "r" on pourra produire le mot "miroir", et ainsi de suite jusqu'à épuisement des possibilités du tableau.

A titre d'exemple,voici le code qui permet de produire le son "a", également dans un applet (les fichiers .class et .html ne sont pas inclus) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
import java.applet.*;
import java.awt.*;
 
public class aApplet extends Applet {
 
	public void init() { 
 
		AudioClip a=getAudioClip(getDocumentBase(),"a.wav"); 
 
		a.play(); 
	}
}

Première question:

Comment lier chaque rectangle à son fichier son correspondant et activer celui-ci par une action de la souris tout en faisant apparaître le signe "a" à l'intérieur du rectangle?

Deuxième question:

Comment afficher le mot produit par une combinaison particulière des rectangles dans une zone texte au bas du tableau?

Merci d'avance pour toute suggestion de réponse à ces deux questions.

**bouye** · 25/10/2006, 01h54

Par exemple en utilisant une Map<Rectangle, AudioClip> et une Map<Rectange, Character> (ou une Map qui contient un Rectangle en cle et une structure de stockage simple en valeur referencant l'AudioClip et le char associe histoire d'eviter d'avoir trop de Map differentes dans ton code).

Pour jouer le son il suffit dans le MouseListener qui recupere les evenements de click de verifier si le curseur est dans un Rectangle donne (via sa methode contains()), puis quand tu as trouve le bon Rectangle de recupere l'AudioClip via la Map et de joueur le son.

Pour la chaine de texte, il te suffit de conserver tous les Rectangle precedement cliques dans une java.util.List<Rectangle>, de rajoute le nouveau rectangle clique dans cette liste et de recreer la chaine associee puis de l'afficher dans un TextField (note que cette methode te permet de facilement rejouer le morceaux compose).
Sinon tu peux ne pas conserver la liste des formes mais ajouter directement le character dans un StringBuilder/StringBuffer dont tu conserve la reference et que tu affiche dans le TextField.

**dreanlin** · 27/10/2006, 16h59

Débutant en Java, après avoir consulté la documentation, le forum et les FAQ disponibles en ligne je ne suis toujours pas certain d'avoir bien compris comment écrire un "MAP". Je serais donc heureux de recevoir quelques instructions à ce sujet. En particulier, comment instancier la clé "Rectangle" et la valeur "AudioClip"?

Merci d'avance.

**bouye** · 29/10/2006, 23h46

Facile :

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
import java.util.*
import java.awt.*
import java.awt.event.*
import java.awt.geom.*
 
public class MyApplet extends Applet implements MouseListener{
...
  /** Map that indexes clips by shapes.
  */
  private Map<Rectangle, AudioClip> rectSoundMap = new HashMap<Rectangle, AudioClip>();
 
  /** Creates a new instance.
  */
  public MyApplet() {
    super();
    addMouseListener(this);
  }
 
...
  // Creates a rectangle.
  Rectangle rect = new Rectangle(0, 0, 100, 50);
  // Gets a clip. See Applet documentation for parameter info.
  AudioClip clip = getAudioClip(.......);
  // Associate the rectangle to the map.
  rectSoundMap.put(rect, sound);
 
...
 
 /** @inheritDoc
 */
 public void mouseClicked(MouseEvent event) {
   // Iterate through all available rectangles.
   for (Rectangle rect : rectSoundMap.keys()) {
     // Verify we're inside.
     if (rect.contains(event.getX(), event.getY()) {
       // Get clip associated to this rectagle.
       AudioClip clip = rectSoundMap.get(rect);
       // And play it.
       clip.play();
       // Exit loop.
       break;
     }
   }
 }
}

**dreanlin** · 30/10/2006, 23h47

Merci. Malheureusement, le code génère une vingtaine d'erreurs, dont je n'ai réussi à éliminer qu'un tiers environ. Voici les messages d'erreurs restant:

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
 
MyApplet.java:12: <identifier> expected
  private Map<Rectangle, AudioClip> rectSoundMap = new HashMap<Rectangle, AudioC
lip>();
             ^
MyApplet.java:28: <identifier> expected
    rectSoundMap.put(rect, sound);
                    ^
MyApplet.java:35: ';' expected
        for (Rectangle rect : rectSoundMap.keys()) {
                            ^
MyApplet.java:46: illegal start of expression
    }
    ^
MyApplet.java:45: ';' expected
        }
         ^
MyApplet.java:6: cannot resolve symbol
symbol  : class Applet
location: class MyApplet
public class MyApplet extends Applet implements MouseListener {
                              ^
MyApplet.java:26: cannot resolve symbol
symbol  : class AudioClip
location: class MyApplet
    AudioClip clip = getAudioClip("a.wav");
    ^
MyApplet.java:28: cannot resolve symbol
symbol  : class put
location: package rectSoundMap
    rectSoundMap.put(rect, sound);
                ^
MyApplet.java:6: MyApplet should be declared abstract; it does not define mouseP
ressed(java.awt.event.MouseEvent) in MyApplet
public class MyApplet extends Applet implements MouseListener {
       ^
MyApplet.java:20: cannot resolve symbol
symbol  : method addMouseListener  (MyApplet)
location: class MyApplet
      addMouseListener(this);
      ^
MyApplet.java:26: cannot resolve symbol
symbol  : method getAudioClip  (java.lang.String)
location: class MyApplet
    AudioClip clip = getAudioClip("a.wav");
                     ^
11 errors

Merci d'avance de bien vouloir m'aider à éliminer ces erreurs.

**sinok** · 31/10/2006, 00h57

C'est simple remplace ton java 1.4 par une version 1.5 au minimum

**bouye** · 31/10/2006, 01h02

Ou n'utilise pas les Generics (a remplacer par des cast) et le foreach (a remplacer par un for normal ou une boucle sur un Iterator).

**dreanlin** · 31/10/2006, 13h07

Même avec la version 1.5.0 de jdk je reçois encore le message d'erreur suivant:

Code :

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

1
2
3
4
 
MyApplet.java:28: <identifier> expected
   rectSoundMap.put(rect, sound);
                   ^

N. B. L'accent circonflexe ('^') pointe vers la parenthèse d'ouverture ('(') de "rectSoundMap.put(rec, sound)" (au cas où il s'afficherait sous un autre signe dans la fenêtre de lecture).

Est-il possible d'éliminer cette erreur?

Merci d'avance.

**bouye** · 01/11/2006, 23h24

Peux-tu nous poster ton code complet s'il te plait ?

**dreanlin** · 02/11/2006, 01h06

Voici le code complet de "MyApplet.java":

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
 
import java.util.*; 
import java.awt.*; 
import java.awt.event.*; 
import java.awt.geom.*;   
 
public class MyApplet extends Applet implements MouseListener {  
 
 
  /** Map that indexes clips by shapes. 
   */  
 
  private Map<Rectangle, AudioClip> rectSoundMap = new HashMap<Rectangle, AudioClip>();   
 
/** Creates a new instance. 
 
*/
 
public MyApplet() {
      super();
      addMouseListener(this);
   }   
 
    // Creates a rectangle.  
    Rectangle rect = new Rectangle(0, 0, 100, 50); 
    // Gets a clip. See Applet documentation for parameter info.  
    AudioClip clip = getAudioClip("a.wav"); 
    // Associate the rectangle to the map.  
    rectSoundMap.put(rect, sound);   
 
 
/** @inheritDoc 
 */  
    public void mouseClicked(MouseEvent event) {  
      // Iterate through all available rectangles.  
        for (Rectangle rect : rectSoundMap.keys()) {  
          // Verify we're inside.  
          if (rect.contains(event.getX(), event.getY())) {  
             // Get clip associated to this rectagle.  
             AudioClip clip = rectSoundMap.get(rect); 
             // And play it.  
             clip.play(); 
             // Exit loop.  
             break; 
          }  
        } 
     } 
}

Merci d'avance pour votre aide.

**bouye** · 02/11/2006, 02h28

Les lignes de code d'initialisation de la map ne sont pas dans une methode !!! Tu peux donc les deplacer dans le constructeur ou dans la methode init() de ton Applet.

Les 2 premiere lignes pouvaient passer pour des initialisations de membres de la classe aupres du compilateur mais pas l'instruction qui met les variables locales dans la map.

**Jense** · 02/11/2006, 11h40

De plus la variable sound n'existe pas...
C'est plutot clip qu'il faut mettre dans la map:

Code :

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

1
2
3
4
// Gets a clip. See Applet documentation for parameter info.  
    AudioClip clip = getAudioClip("a.wav"); 
    // Associate the rectangle to the map.  
    rectSoundMap.put(rect, sound);

**dreanlin** · 02/11/2006, 22h31

Mon premier problème (comment activer le son correspondant à un rectangle donné) est résolu. Merci pour votre aide à tous.

Je m'attaque maintenant au second problème: comment afficher un mot composé à l'aide des rectangles dans une zone texte au bas du tableau, le garder en mémoire, l'effacer et écrire d'autres mots?

Merci d'avance pour toute suggestion de réponse.

**bouye** · 02/11/2006, 23h15

Je dirai garder une StringBuilder en memoire et faire :

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
private Map<Rectangle, Character> rectCharMap = new HashMap<Rectangle, Character>();
private StringBuilder sentenceBuilder = new StringBuilder();
private TextField textField = ...
 
  ...
  rectCharMap.put(rect, 'a');
  ...
 
  public void mouseClicked(MouseEvent event) {  
    ...
    // Verify we're inside.  
    if (rect.contains(event.getX(), event.getY())) {  
      // Get the char associated to this rectangle.
      char c = rectCharMap.get(rect);
      // Append it to the sentence.
      sentenceBuilder.append(c);
      // Display the sentence onscreen.
      textField.setText(sentenceBuilder.toString());
      // Get clip associated to this rectagle.  
      AudioClip clip = rectSoundMap.get(rect); 
      ...

Mais bon on t'as deja montre comment faire pour le son ; ce n'est pas trop dur d'extrapoler pour les characteres.

Sinon je t'ai donne des suggestion alternatives au debut et nottament celle-ci pour eviter de creer trop de maps :

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
...
   private class RectInfoStrut {
     public char c;
     public AudioClip clip;
   }
 
  private Map<Rectangle, RectInfoStrut > rectInfoMap = new HashMap<Rectangle, RectInfoStrut >();
 
 // Creates a rectangle.  
    Rectangle rect = new Rectangle(0, 0, 100, 50); 
    RectInfoStrut info = new RectInfoStrut();
    // Gets a clip. See Applet documentation for parameter info.  
    info.clip = getAudioClip("a.wav"); 
    into.c = 'a';
    rectInfoMap.put(rect, info);
 
....

**dreanlin** · 06/11/2006, 08h00

Merci pour ces pistes. J'ai bien essayé d'intégrer votre code pour l'affichage des caractères et des mots dans une zone texte mais, comme vous pourrez le constater d'après le nouveau code de mon programme, ci-joint, je suis encore loin d'avoir trouvé la bonne procédure.

Je vous serai donc reconnaissant de bien vouloir m'indiquer ce que je dois faire pour me corriger. En particulier, "rectCharMap.put(rect, 'a');" ne devrait-il pas être placé dans la procédure init() (problème d'"<identifier> expected") ? Et les deux appels à "mouseClicked(MouseEvent event)" - le premier pour le son et le second pour les caractères - ne sont-ils pas conflictuels?

Enfin, pour l'instant le son ne peut être activé que pour un seul rectangle, celui qui correspond au son "a" (en blanc). De plus, le signe (ou la lettre) "a" devrait apparaître à l'intérieur du rectangle. Comment faire pour activer les autres rectangles avec leur son et leur signe correspondant?

Merci d'avance pour votre aide.

**bouye** · 07/11/2006, 00h04

Envoyé par dreanlin

En particulier, "rectCharMap.put(rect, 'a');" ne devrait-il pas être placé dans la procédure init() (problème d'"<identifier> expected") ?

Je pense que tu n'as pas encore une pratique assez reguliere du language. Quand on a une bonne idee et qu'on estime qu'elle peut resoudre le probleme, il ne faut pas hesiter a la tester pour voir si elle fonctionne...

Envoyé par dreanlin

Et les deux appels à "mouseClicked(MouseEvent event)" - le premier pour le son et le second pour les caractères - ne sont-ils pas conflictuels?

Quels deux appels ? Moi je vois deux version differentes (dans le temps) du meme code. Le second etant une extension du premier pour gerer les characters en supplement du son. Ensuite... il faut adapter, reflechir et prendre des initiatives.

Envoyé par dreanlin

Enfin, pour l'instant le son ne peut être activé que pour un seul rectangle, celui qui correspond au son "a" (en blanc). De plus, le signe (ou la lettre) "a" devrait apparaître à l'intérieur du rectangle. Comment faire pour activer les autres rectangles avec leur son et leur signe correspondant?

Ben, tout simplement en en creant d'autres et en leur associant du son et des lettre de maniere similaire au premier...

Pour faire apparaitre les lettres : par exemple en dessinant la lettre 'a' au milieu du rectangle avec la methode drawString() de l'objet graphics dans la methode d'affichage de l'Applet. Et nous obtenons cette lettre... grace a la map bien sur !
Les coordonnees du centre du rectangle sont facilement calculables en fonction des coordonnees (x,y) de son coin superieur gauche et de sa largeur et hauteur. Faire un dessin sur papier peut aider...

Il faut egalement penser a affecter une couleur avant de peindre la lettre car avec du blanc peint sur du blanc tu ne verras pas grand chose s'afficher.

Enfin tu notteras que la lettre n'est pas completement 100% centree sur le rectangle... cela vient de la maniere dont on rend du texte qui est defini a partir d'une ligne de base/baseLine (la ligne sur laquelle on ecrit dans un cahier). Apres pour faire plus correct il faudrai generer d'autres informations a partir de la police de charactere courante comme la hauteur de la ligne de base du et la largeur du glyphe (la forme du charactere pour une police donnee) pour effectuer un centrage correct mais cette partie est probablement un poil trop avancee pour l'aborder dans l'immediat.

Lier un fichier son à un objet graphique

Multimédia Java

Discussions similaires

Partager

Partager