Accueil | Tutoriaux

Tutoriaux : Lire un son en boucle
 

1. Introduction
 

Message trouvé dans ma boîte mail :

"Je veux pouvoir lancer la lecture (en boucle) d'un son et pouvoir stopper cette lecture à l'aide d'un second bouton. Comment faire ? Amicalement, Thierry".

L'animation ci-contre vous montre que l'on peut aller un peu plus loin en montrant la position de la tête de lecture...
 
2. Sur la scène principale
 

- Vous pouvez créer deux boutons quelconques ou utiliser ceux qui se trouvent dans la bibliothèque commune : dans le menu "fenêtre", sélectionnez successivement "autres panneaux", "bibliothèques communes", "boutons" puis ouvrez le dossier qui se nomme "Playback".
-  Déposez sur la scène une occurrence du bouton "gel Right". Dans le panneau "propriétés", nommez cette occurrence "btn1". Un clic sur ce bouton déclenchera la lecture (en boucle) de notre son.
- Déposez sur la scène une occurrence du bouton "gel Pause". Dans le panneau "propriétés", nommez cette occurrence "btn2". Un clic sur ce bouton immobilisera la tête de lecture.

 
3. Dans la bibliothèque
 
- Il nous faut bien un son ! Pour gagner du temps, je vous en propose un que vous pouvez télécharger en faisant un clic droit sur le lien suivant : bruitdeau.wav.
-  Importez ce son dans votre bibliothèque : dans le menu "fichiers", sélectionnez "importer" puis "importer dans la bibliothèque" puis parcourez votre disque dur à la recherche de votre fichier wav.
- Dans la bibliothèque de l'animation, faites un clic droit sur le fichier wav, puis cliquez sur "liaison". Dans la boite "propriétés de liaison", cliquez sur la case à cocher "exporter pour ActionScript" et dans le champ "identifiant", saisissez le mot "bruitdeau". Tout est en place, nous pouvons passer au code.
 
4. Le code et l'animation obtenue
 
Dans le panneau "action" de l'image clé n°1, placez le code suivant pour obtenir l'animation ci-dessous.
  
son = new Sound();
son.attachSound("bruitdeau");
 
p = 0;
 
this.createEmptyMovieClip("clipvide", 0);
 
function tester() {
if (son.position == son.duration) {son.start(0);}
}
 
btn1.onPress = function() {
if (son.position == son.duration) {p = 0;}
son.start(p/1000);
this.enabled = false;
btn2.enabled = true;
clipvide.onEnterFrame = tester;
}
 
btn2.onPress = function() {
son.stop();
p = son.position;
this.enabled = false;
btn1.enabled = true;
delete clipvide.onEnterFrame;
}

 
 
5. Le code avec ses commentaires
 
On crée un objet son.
son = new Sound();
 
On lie notre objet son au fichier wav qui se trouve dans la bibliothèque et dont l'identifiant de liaison est "bruitdeau".
son.attachSound("bruitdeau");
 
On initialise une variable p qui permettra de définir la position de la tête de lecture (p représente un temps exprimé en millisecondes).
p = 0;
 
On crée sur la scène un clip qui ne contient rien ("empty" = vide in english) et qui s'appelle judicieusement "clipvide". Lorsqu'on débute avec flash, cette fonction semble bien étrange : quel est l'intérêt de créer des clips "vides" ? Et bien cela permet de les remplir par la suite !! Dans notre cas, ce clip restera toujours vide, mais nous l'utiliserons pour rembobiner le son lorsque la tête de lecture sera en fin de piste.
this.createEmptyMovieClip("clipvide", 0);
 
Voici une fonction qui fait un test simple : si la tête de lecture arrive en fin de piste alors je replace la tête en début de piste. Autrement dit cette fonction permet de rembobiner le son.
function tester() {
if (son.position == son.duration) {son.start(0);}
}
 
Le bouton n°1 est le bouton lecture : nous allons définir l'action d'un clic sur ce bouton. Ce bout de code aurait pu être placé (sous une forme légèrement différente) dans le panneau action du bouton mais je pense qu'il vaut mieux placer l'ensemble du code sur une seule et même image...
btn1.onPress = function() {
 
Les objets son possèdent deux propriétés "position" et "duration" qui sont en lecture seule et qui ressemblent aux propriétés "_currentframe" et "_totalframes" des clips. La propriété "duration" représente la durée du son en millisecondes tandis que la propriété "position" représente la position actuelle de la tête de lecture, autrement dit le temps écoulé depuis la position courante. Si la position actuelle de la tête de lecture est égale à la durée du son, ce qui signifie que le son a été intégralement lu alors p prend la valeur 0.
if(son.position == son.duration) {p = 0;}
 
La fonction start() place la tête de lecture à l'instant p/1000 puis déclenche la lecture du son. On divise p par 1000, car la fonction start() attend un argument exprimé en secondes or p est en millisecondes...
son.start(p/1000);
 
Cette ligne permet de rendre inactif le bouton de lecture ! En effet, si j'autorise aux personnes nerveuses de cliquer plusieurs fois, flash va lancer autant de fois la lecture du même son et va produire ainsi une joyeuse cacophonie. Vous pouvez inhiber cette ligne de code (en ajoutant // en début de ligne) et tester l'animation en cliquant plusieurs fois sur le bouton lecture...
this.enabled = false;
 
On rend actif le bouton "pause".
btn2.enabled = true;
 

On demande au clipvide d'exécuter à chaque image la fonction "tester". Ainsi, si le son arrive en fin de piste, la tête de lecture reviendra au début. Attention, la syntaxe doit être rigoureuse : il ne faut pas ajouter de parenthèses pour appeler la fonction tester.
clipvide.onEnterFrame = tester;
 
fin de la fonction
}
 
Le bouton n°2 est le bouton pause : un clic sur ce bouton doit stopper la lecture du son et mémoriser la position actuelle de la tête de lecture.
btn2.onPress = function() {
 
La fonction stop() immobilise la tête de lecture.
son.stop();
 
Cette ligne permet de conserver la position de la tête de lecture au moment du clic sur le bouton pause. Ainsi, en cliquant ensuite sur le bouton n°1, la lecture reprendra à cet endroit...
p = son.position;
 
On rend le bouton pause inactif.
this.enabled = false;
 
On rend le bouton lecture actif.
btn1.enabled = true;
 
Comme la tête de lecture est immobilisée par le clic sur le bouton pause, il est désormais inutile d'appeler la fonction "tester". Cette ligne est facultative, mais moins votre ordinateur en fait, mieux il se porte !!
delete clipvide.onEnterFrame;
 
Fin de la fonction
}
 
Accueil | Tutoriaux