[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Non-Officiels
> Programmation
> ActionScript / Flash / Flex
> Un lecteur Mp3 en flash
> Lecture du tutoriel
Un lecteur Mp3 en flash
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)
Bonjour,
Dans ce tutorial, je vais vous apprendre à créer votre propre lecteur Mp3 exportable en flash.
Vous connaissez sans doute les mini-lecteurs flash souvent utilisés sur les blogs, comme
celui-ci par exemple.
Si vous y arrivez (ceci est au conditionnel
), vous pourrez enfin frimer avec votre jolie petit lecteur !
Let's go !
Théoriquement notre lecteur mp3 doit être exportable pour pouvoir être utilisé sur diverses pages web, nous utiliserons donc le code suivant pour le placer :
Code : HTML1
2
3 | <object type="application/x-shockwave-flash" data="lecteur.swf?fichier=mamusique.mp3" width="LARGEUR" height="LONGUEUR">
<param name="movie" value="lecteur.swf?fichier=mamusique.mp3" />
</object>
|
Pour commencer, nous n'allons utiliser que les boutons play, pause et stop, nous verrons ensuite les possibilités annexes
Commençons. Tout d'abord pour permettre une lecture sonore plus agréable il nous faut des boutons play, pause, et stop. Si vous savez faire par vous mêmes vos boutons, faites-le ; vous aurez un lecteur personnalisé comme vous le souhaitez. Si vous ne savez pas les faire, utilisez les
bibliothèques communes. Où alors, vous pouvez prendre les boutons du fichier source disponible à la fin de ce tuto !
C'est bien, mais c'est quoi les bibliothèques communes ?
Les bibliothèques communes (Fenêtre -> Bibliothèques communes) se divisent en trois catégories : les boutons, les classes et les interactions de formations. Ce sont des composants livrés avec le logiciel que vous possédez et très utiles parfois.
Dans notre cas nous allons nous intéresser aux boutons.
Choisissez les boutons de votre choix. Sur le Calque 1 que vous renommerez "lecteur" vous placerez ces boutons comme vous le souhaitez !
Avant de passer à l'étape suivante nous allons nommer une
occurrence pour chacun de ces boutons qui permettra au code action script de les reconnaître pour les actionner (et c'est le cas de le dire :b).
Donc, nous allons nommer respectivement l'occurrence de nos boutons play, stop et pause ; btnLecture, btnStop, btnPause.
Vous êtes prêt ? Maintenant nous allons passer à la plus grosse partie de ce tutorial : le code (il ne manque plus que la musique de Rocky pour nous mettre dans l'ambiance
).
Maintenant, nous allons placer l'action script.
Rappel : l'action script est un langage de programmation utilisé au sein des applications Flash d'Adobe. Ce langage nous permet d'ajouter de l'intéractivité aux animations flash en répondant aux actions de l'utilisateur.
L'action script ce place dans "Le panneau de programmation action script" (F9).
1 - Introduction des fonctions sur les boutons
Tout d'abord nous allons appeler les
fonctions du mégacodefinale sur nos boutons en modifiant leurs comportement ; sélectionnez un bouton et ouvrez le panneau de programmation, si tout est bon, vous verrez un onglet en bas à gauche du panneau avec le nom de l'occurrence du bouton.
Trêve de bavardages, voici le code :
Code : Autre1
2
3
4
| on (release) //Si l'utilisateur à clique sur le bouton on continue
{
_root.lecture(); //Ici on appelle la fonction
} |
Bien sûr, vous n'allez pas laisser _root.lecture(); sur chaque bouton, par exemple pour stop on va utiliser _root.stop(); et pause _root.pause();.
Ensuite, nous allons créer un nouveau calque que l'on nommera
actions. Je vais fournir bout à bout le code ainsi que les explications pour que ce soit plus clair
Je vous déconseille fortement d'utiliser plusieurs images clefs. Tout au long de ce tuto, nous resterons sur la première image de l'animation.
Ouvrez le panneau de programmation action script sur le calque
actions :
3 - Déclaration des principales variables
Code : Autre1
2
3
4
5
6
7
8
9
10
11
12
| //Tout d'abord, nous déclarons les principales variables
var decalage = 0;
var charge = false;
var temps, si;
//Les proprietes du son joue
chanson = new Sound();
chanson.onSoundComplete = function() {
_root.stop();
}; |
Ici nous avons commencé par déclarer les principales variables.
Decalage et
temps nous servirons principalement pour le bouton pause,
charge nous servira à boucler la musique quand elle sera terminée.
3 - Déclaration des fonctions des différents boutons du lecteur
Code : Autre1
2
3
4
5
6
7
8
| //On declare la fonction stop
function stop()
{
clearInterval(si);
chanson.stop();
decalage = 0;
} |
Voici la fonction pour le bouton
stop, très simple ; on stoppe la chanson puis on la reprend du début au prochain démarrage.
Code : Autre1
2
3
4
5
6
7
8
9
10
11
12
13
14
| //On declare la fonction pause
function pause()
{
clearInterval(si);
chanson.stop();
}
//Puis la fonction memoire liee à celle du dessus
function memoire()
{
decalage = chanson.position/1000;
} |
Ça se complique ; ici nous déclarons la fonction
pause quasiment comme au dessus, puis grâce à la fonction
memoire le lecteur va se souvenir où l'utilisateur a stoppé la musique via
chanson.position et enfin
/1000 signifie que la chanson sera reprise 1 seconde avant qu'elle soit stoppée.
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
| //On declare la fonction lecture
function lecture()
{
if (charge == false) //Si la chanson n'est pas chargee
{
chanson.onLoad = function(ok) //On la charge
{
if (ok=true) //Si elle est chargee
{
charge = true;
temps = Math.round(chanson.duration/1000);
chanson.start(); //On lit la chanson s'il y a plus d'une seconde d'ecart entre le chargement et l'etat de la lecture
si = setInterval(memoire, 1000);
}
};
chanson.loadSound(fichier, true); //Dans le cas contraire on charge la chanson
}
else
{
chanson.start(decalage); //Si la chanson est stopee par l'utilisateur via la fonction pause la variable decalage est prise en compte
si = setInterval(memoire, 1000); //De meme pour memoire
}
} |
Et enfin le gros bloc de code pour conclure
On déclare la fonction
lecture, la plus complexe ; si la chanson n'est pas chargée, on la charge, si elle est chargée et qu'il y a plus d'une seconde d'écart entre le chargement et l'état de la lecture on la lit. Dans le cas contraire on la stoppe jusqu'à ce que ça se produise.
4 - Le code final
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
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
| //Tout d'abord, nous declarons les principales variables
var decalage = 0;
var charge = false;
var temps, si;
//Les proprietes du sond joue
chanson = new Sound();
chanson.onSoundComplete = function() {
_root.stop();
};
//On declare la fonction stop
function stop()
{
clearInterval(si);
chanson.stop();
decalage = 0;
}
//On declare la fonction pause
function pause()
{
clearInterval(si);
chanson.stop();
}
//Puis la fonction memoire liee à celle du dessus
function memoire()
{
decalage = chanson.position/1000;
}
//On declare la fonction lecture
function lecture()
{
if (charge == false) //Si la chanson n'est pas chargee
{
chanson.onLoad = function(ok) //On la charge
{
if (ok=true) //Si elle est chargee
{
charge = true;
temps = Math.round(chanson.duration/1000);
chanson.start(); //On lit la chanson s'il y a plus d'une seconde d'ecart entre le chargement et l'etat de la lecture
si = setInterval(memoire, 1000);
}
};
chanson.loadSound(fichier, true); //Dans le cas contraire on charge la chanson
}
else
{
chanson.start(decalage); //Si la chanson est stopee par l'utilisateur via la fonction pause la variable decalage est prise en compte
si = setInterval(memoire, 1000); //De meme pour memoire
}
} |
Votre lecteur et fin prêt !
Vous pouvez bien sûr le personnaliser à vos envies, ou bien commencer à faire une web-radio
Je vous rappelle quand même le code html à insérer pour pouvoir profiter de votre lecteur (si la flemme s'empare de vous et que votre souris refuse de remonter en tête de page) :
Code : HTML1
2
3 | <object type="application/x-shockwave-flash" data="lecteur.swf?fichier=mamusique.mp3" width="LARGEUR" height="LONGUEUR">
<param name="movie" value="lecteur.swf?fichier=mamusique.mp3" />
</object>
|
Pourquoi la chanson est-elle chargée par la variable fichier (fichier=) ?
Très bonne question, vous souvenez-vous de ce bout de code lorsqu'on déclare la variable
lecture ?
Code : Autre1
2
3
| };
chanson.loadSound(fichier, true); //Dans le cas contraire on charge la chanson
} |
Et bien c'est ceci qui nous permet de définir que la variable
fichier contenue dans le code Html contiendra le mp3 à jouer !
Et puis, vu que je suis de très bon coeur voici l'archive .rar avec le .fla, le .swf, la page html puis une musique libre de droit de
Jenny Gillespie en prime
Faire un lecteur c'est bien, mais l'améliorer c'est mieux !
Oui je sais c'est pas la meilleur des devises mais il suffit d'en comprendre le principe. Maintenant, vous savez faire un lecteur mp3 en flash avec trois fonctionnalitées : la lecture, la pause et l'arrêt.
Pourquoi ne pas en découvrir de nouvelles ?
Dans cette partie du tutorial je ne vais pas vous dire exactement comment faire, mais je vais vous montrer le chemin à suivre.
L'affichage
Si nous affichions quelque chose sur notre lecteur pour le rendre plus interactif, par exemple un
champ de texte dynamique avec des données ou bien des informations.
Imaginons que nous souhaitons afficher un texte pour dire au visiteur ce qu'il fait ou bien ce qu'il doit faire. Par exemple au début quand nous déclarons nos variables vous pouvez ajouter :
Code : Autre1
| txt.affichage = "Cliquez sur le bouton play pour commencer !"; |
Et ceci dans chaque fonction, avec un texte différent et le concernant (par exemple pour stop "Vous avez stoppé la musique) et puis, pourquoi pas le nom de la musique
.
De plus, pourquoi ne pas afficher une barre d'état, c'est à dire un
movie clip qui indiquera l'avancement de la musique.
Secret (cliquez pour afficher)Code : Autre
Ceci sera à placer au début bien sûr lors de la déclaration des variables, ensuite via des calculs vous pourrez indiquer précisément où en est la musique.
Code : Autre1
2
3
4
5
6
7
8
9
10
11
12
13
14
| //Bien sur les bouts de codes donnees ci-dessous sont a placer dans les fonctions adequates
barredetat._width = 0;
function stop()
{
barredetat._width = 0; //La taille de la barre d'etat s'initialise a zero lorsque la musique est stoppee
}
function memoire()
{
etat = Math.round((chanson.position*100)/chanson.duration); //Ici on calcule le temps passe pour ensuite le convertir en pixel pour la taille de la barre d'etat
barredetat._width = etat; //On definie la taille de la barre d'etat
} |
Nous voilà arrivé à la fin de ce tutorial !
Peut être vous demandez-vous pourquoi j'ai rédigé une partie annexes sur ce que l'on pouvait rajouter en gros dans le lecteur ? Et bien, question de logique, personnellement je trouve qu'un tutorial est fait pour apprendre, et non copier bêtement le code que l'on vous donne ; il faut, avant tout, si l'on souhaite apprendre n'importe quel langage de programmation comprendre et analyser ce que l'on fait !
Bref, j'espère que ce tuto vous aura servi, et si vous avez des questions n'hésitez pas, les forums sont là pour ça
A bientôt.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
101 Zéros connectés |
9 requêtes |
0.4878s (0.4776s)
