[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Non-Officiels
> Programmation
> ActionScript / Flash / Flex
> Lecture du tutoriel
Musique !
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
On sait charger des images, des animations et des variables. Maintenant, nous allons apprendre à lire des sons, puis à charger des musiques au format mp3.
Flash possède la classe
sound (son en français), qui permet une gestion simple des effets sonores en ActionScript.
Import statique
Avant de commencer à charger dynamiquement des sons, nous allons les charger dans Flash. Pour cela, cliquez sur
Fichier -> Importer -> Importer dans la bibliothèque.
Puis choisissez la musique que vous désirez.
Votre son apparaît ensuite dans la bibliothèque : vous pouvez même l'écouter en utilisant les deux petits boutons,
stop et
lecture, dans la fenêtre de prévisualisation de la bibliothèque. (Le premier qui dit que j'ai des goûts de chio**e, je le sors.
)
Qualité et compression
En sélectionnant votre son dans la bibliothèque, puis en cliquant sur
Propriétés, vous pouvez modifier sa compression.
Vous pouvez conserver la compression originale du fichier importé, ou alors en décochant la case
Utiliser la qualité mp3 importée, vous pourrez utiliser vos propres paramètres. Flash recompressera le son automatiquement lors de la compilation de l'animation, qui pourra durer alors très longtemps, pour peu que votre fichier son soit lourd.
En général, il est intéressant de convertir le son en
Mono, puisque de toute façon sur le Web, on se fiche un peu que le son sortant de chaque baffle soit différent. De même, une vitesse de transmission de 64 kbits/s est dans la plupart des cas largement suffisante.
L'option
Qualité vous permet de préciser la "qualité" de l'encodage subi par votre son. Plus la qualité sera haute, plus le temps mis lors de la publication sera long, et plus la qualité propre du son sera bonne. Attention, la qualité de l'encodage n'influe pas sur la taille du fichier audio.
En dessous, Flash vous indique en temps réel une estimation du poids de votre fichier son une fois compressé. Pour être sûr que la musique ne soit pas trop dégradée avec vos paramètres, vous pouvez cliquer sur le bouton
Tester, en haut de la fenêtre.
Nom de liaison
Et comme pour tous les objets qui sont dans la bibliothèque, et que nous devons utiliser dans ActionScript, il va falloir lui donner un nom de liaison.
Il suffit de sélectionner le son, et de cliquer sur
Liaison...
Vous atterrissez sur la plus-que-connue fenêtre de liaison ActionScript. Vous devez donc cocher
Exporter pour ActionScript, puis donner un nom de liaison pour votre fichier audio dans
Identifiant
B.A. BA
Il nous faut donc déjà créer un nouvel objet
Sound qui va "porter" notre fichier son. C'est le rôle du script ci-dessous qui, après avoir initialisé l'instance
musique de la classe
Sound, va utiliser la méthode
attachSound() pour "attacher" une musique de la bibliothèque à notre nouvel objet.
Code : Autre1
2
| var musique:Sound = new Sound();
musique.attachSound("Hallelujah"); // Faites gaffe aux majuscules dans votre nom de liaison |
Ensuite, il ne reste plus qu'à lancer la musique :
Code : Autre1
2
3
| var musique:Sound = new Sound();
musique.attachSound("Hallelujah");
musique.start(); |
start() et stop() => et la pause ?
La méthode
start() permet de lancer la lecture de notre son, elle possède deux arguments : le premier correspond à la position en secondes où Flash doit commencer la lecture du son, et le deuxième correspond au nombre de fois que le son doit être lu.
Nous voulons lire une musique de plusieurs minutes, nous n'utiliserons donc pas le second argument, car la lecture en boucle ne nous est pas utile.
Créez donc trois boutons sur votre scène :
arret,
pause et
lecture (je sais que le mot
pause se colore en bleu dans le panneau action, signifiant qu'il est utilisé par une autre classe, mais je vous assure qu'il n'y aura pas de conflit.
)
On écrit le code ci-dessous, qui permet de contrôler la lecture et l'arrêt de notre musique.
Code : Autre1
2
3
4
5
6
7
8
| var musique:Sound = new Sound();
musique.attachSound("Hallelujah");
arret.onRelease = function() {
musique.stop();
};
lecture.onRelease = function() {
musique.start();
}; |
Maintenant, un problème se pose : quid du bouton
pause ? Il n'existe pas de méthode
pause() pour l'objet
Sound.
Par contre, il existe une propriété
position qui permet de connaître en millisecondes la position actuelle du curseur de lecture ! D'ailleurs,
stop() ne remet pas la musique à zéro, il ne fait que la mettre en pause : si la musique recommence du début, c'est qu'on ne transmet pas d'argument à
start(), qui va donc commencer la lecture du départ.
Maintenant, c'est à vous de bosser pour me rajouter le code qu'il faut pour faire fonctionner ce bouton pause ! Quand on clique dessus : la chanson s'arrête. Quand on clique sur lecture : la chanson reprend là où elle était.
Correction possible :
Secret (cliquez pour afficher)Code : Autre1
2
3
4
5
6
7
8
9
10
11
12
13
14
| var musique:Sound = new Sound();
musique.attachSound("Hallelujah");
var vraie_position:Number = 0; // On crée une variable pour conserver la "vraie" position
arret.onRelease = function() {
vraie_position = 0; // Quand on stoppe, on la met à zéro
musique.stop(); // Et on la stoppe tout de suite après
};
pause.onRelease = function() {
vraie_position = musique.position; // Quand on pause, on la met à la dernière position connue.
musique.stop();
};
lecture.onRelease = function() {
musique.start(vraie_position/1000); // Il faut diviser par mille, car start() demande la position en secondes, pas en millisecondes !
}; |
Vous l'aurez compris, la seule difficulté était de bien penser à la conversion des millisecondes en secondes, avec une bête division par 1000.
Affichage
Dessinez maintenant un rectangle gris foncé à bords noirs allongé horizontalement sur votre scène.
Transformez
seulement l'intérieur du rectangle en clip que vous nommerez
curseur (il s'agit du nom d'occurrence bien sûr). Surtout mettez bien le centre du clip en haut à gauche de votre rectangle !
C'est ce clip qui va afficher de façon continue la position de lecture actuelle de la musique.
Pour faire cela, je vais vous donner plusieurs indices :
- utiliser un
onEnterFrame
- utiliser
musique.position
- utiliser
musique.duration (temps total de la musique en millisecondes)
- utiliser
_xscale
Tous les indices que je vous ai donnés, prennent déjà plus de place que le script que vous allez écrire maintenant, et qui va permettre de faire fonctionner ce curseur.
Secret (cliquez pour afficher)Code : Autre1
2
3
| curseur.onEnterFrame = function() {
this._xscale =(musique.position/musique.duration)*100;
} |
C'est une bête règle de trois
(ou règle de proportionnalité si vous préférez).
Interactivité
Reste le problème de l'interactivité : on voit la position de la musique, mais on ne peut pas naviguer !
Il va donc falloir
inverser le processus.
Créez déjà un nouveau clip, exacte copie de
curseur : même position, même taille, même centre en haut à gauche du rectangle. Mais il faut que ce clip soit en-dessous de
curseur et de couleur gris clair. Nommez-le :
selecteur.
On va capter la position de la souris quand elle cliquera sur
selecteur, et à partir de là, trouver la position à laquelle on doit mettre la musique.
On va travailler dans ce bloc :
Code : Autre1
2
3
| selecteur.onRelease = function() {
//-- Code à écrire
} |
On peut déjà y mettre que la musique doit être stoppée. Car la propriété
position est en
lecture seule, c'est-à-dire qu'on ne peut pas la modifier. Il faut donc arrêter et relancer la chanson en indiquant la position de départ.
Code : Autre1
2
3
| selecteur.onRelease = function() {
musique.stop();
} |
Maintenant, il faut faire une règle de trois dans le sens inverse.
On a la position de la souris par rapport au centre de
selecteur grâce à
this._xmouse.
On connaît la taille totale du clip grâce à
selecteur._width.
Et on connaît même la durée totale de la musique :
musique.duration.
Notre inconnue est donc la position que l'on doit donner à la musique. Une bête règle de trois nous donnera ce code (à condition de ne pas oublier la conversion des millisecondes en secondes) :
Code : Autre1
| musique.start((this._xmouse*musique.duration)/(this._width*1000)); |
Pour l'instant, voilà notre script dans sa totalité :
Code : Autre1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| var musique:Sound = new Sound();
musique.attachSound("Hallelujah");
var vraie_position:Number = 0;
arret.onRelease = function() {
vraie_position = 0;
musique.stop();
};
pause.onRelease = function() {
musique.stop();
};
lecture.onRelease = function() {
musique.start(vraie_position/1000);
};
curseur.onEnterFrame = function() {
this._xscale = (musique.position/musique.duration)*100;
};
selecteur.onRelease = function() {
musique.stop();
musique.start((this._xmouse*musique.duration)/(this._width*1000));
}; |
Conservez toute votre animation, mais supprimez votre musique de la bibliothèque.
Vous allez voir toute la simplicité de Flash sous vos yeux ébahis
: nous allons modifier une seule et unique ligne de code, et le chargement va devenir dynamique.
Supprimez :
Code : Autre1
| musique.attachSound("Hallelujah"); |
:
Code : Autre1
| musique.loadSound("Hallelujah.mp3", true); |
Et ça fonctionne déjà.
Le second argument de
loadsound() permet de définir si la lecture peut se faire en streaming ou non. En clair, si vous mettez
false, il faudra attendre que la musique soit entièrement chargée avant de pouvoir l'écouter...
Mais quand je charge une grosse musique, et que l'animation est sur internet, le curseur de lecture devient complètement fou ! Qu'est-ce qui se passe ?
Ça aurait été trop facile, aussi
! En fait, le problème vient de la propriété
duration, qui ne correspond pas à la durée totale de la musique, mais à la durée qui a été chargée dans le lecteur Flash...
En fait, il n'y a
aucun moyen de connaître avec exactitude la durée totale de votre fichier audio, tant qu'il ne sera pas chargé complètement. Si vous regardez dans l'aide, vous verrez qu'il est possible de récupérer les tags
id3 des musiques que l'on charge. Ces tags incorporent ce qu'on appelle des méta-données sur la musique : son titre, le compositeur ... Il existe même un tag qui indique la durée de la musique. Mais voilà le problème : on trouvera le tag
TIME, qui correspond au temps total, sur très très peu de musiques.
Il va donc falloir faire fonctionner les méninges.
Si on ne peut connaître exactement la durée de la musique, on peut au moins l'approximer.
Barre de chargement
On va utiliser
selecteur comme barre de chargement. Puisque sa taille va changer au cours du temps, nos règles de trois ne seront plus valables. Il va donc falloir enregistrer au début de l'animation la taille maximale de la barre pour l'utiliser dans nos calculs.
On va donc avoir avec cette modification :
Code : Autre1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| var musique:Sound = new Sound();
musique.loadSound("Hallelujah.mp3", true);
var position_pause:Number = 0;
var largeur:Number = selecteur._width; // On stocke la largeur maximale de la barre
arret.onRelease = function() {
musique.start(0);
musique.stop();
};
pause.onRelease = function() {
musique.stop();
};
lecture.onRelease = function() {
musique.start(musique.position/1000);
};
curseur.onEnterFrame = function() {
this._alpha = 0;
this._xscale = (musique.position/musique.duration)*100;
};
selecteur.onRelease = function() {
musique.stop();
musique.start((this._xmouse*musique.duration)/(largeur*1000)); // Pour pouvoir l'utiliser dans les calculs
}; |
Vous remarquerez, que j'ai effectué une autre petite modification : j'ai enlevé la variable
vraie_position. Quand on utilise
attachSound(), elle est indispensable, mais quand on charge le son dynamiquement, écrire
start(0) remet réellement la position à zéro, ce qui n'est pas le cas avec la méthode statique (bug ?).
Il ne reste plus qu'à modifier la largeur de
selecteur selon le pourcentage correspondant au chargement de notre musique. Pour ça : pas de problème, on retrouve les mêmes méthodes que pour les images et les animations. On peut donc rajouter à la fin de notre code :
Code : Autre1
2
3
4
5
6
| selecteur.onEnterFrame = function() {
this._xscale = (musique.getBytesLoaded()/musique.getBytesTotal())*100;
if (this._xscale == 100) { // Une fois la musique complètement chargée
delete this.onEnterFrame; // On supprime le onEnterFrame
}
}; |
Si vous désactivez le curseur qui vous cache la barre de chargement, vous pourrez voir
selecteur qui grandit au fur et à mesure du chargement de votre musique.
Approximation de la durée totale
On connaît maintenant suffisamment de données pour pouvoir calculer une approximation de la durée totale, en considérant que le poids de la chanson est proportionnelle à sa durée.
On va donc introduire la variable
tduration, qui correspondra à la durée approximative totale de la musique.
Pour trouver la valeur de cette variable, c'est toujours et encore une bête règle de trois, il faut diviser la durée chargée par le pourcentage de chargement.
Code : Autre1
| tduration = (musique.getBytesTotal()*musique.duration)/musique.getBytesLoaded(); |
On placera ce code dans
selecteur.onEnterFrame, car ce dernier se détruit de lui-même une fois que la musique est complètement chargée.
Ensuite, il ne reste plus qu'à modifier l'affichage de
curseur pour qu'il se base sur
tduration, et non plus sur
musique.duration, qui est faussé.
Notre code complet :
Code : Autre1
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
| var musique:Sound = new Sound();
musique.loadSound("Hallelujah.mp3", true);
var largeur:Number = selecteur._width;
arret.onRelease = function() {
musique.start(0);
musique.stop();
};
pause.onRelease = function() {
musique.stop();
};
lecture.onRelease = function() {
musique.start(musique.position/1000);
};
curseur.onEnterFrame = function() {
this._xscale = (musique.position/tduration)*100;
};
selecteur.onRelease = function() {
musique.stop();
musique.start((this._xmouse*musique.duration)/(largeur*1000));
};
selecteur.onEnterFrame = function() {
this._xscale = (musique.getBytesLoaded()/musique.getBytesTotal())*100;
if (this._xscale == 100) {
delete this.onEnterFrame;
}
tduration = (musique.getBytesTotal()*musique.duration)/musique.getBytesLoaded();
}; |
Vous savez tout sur les sons et le chargement dynamique de musique.
Vous êtes maintenant aptes à créer une "radio-blog", comme on en trouve un peu partout sur le web. Ça sera d'ailleurs le sujet de notre prochain fil rouge : la création d'une radio-blog complète.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
293 Zéros connectés |
10 requêtes |
0.067s (0.0537s)
