Les boutons
Reprenez le code source de notre première version. Une fois chargé dans l'outil Flash MX, ajoutez-y les boutons playback-xxx que l'on peut trouver dans "Fenêtre/Bibliothèque commune/Boutons/Playback"; vous devez maintenant avoir sur l'interface, idéalement côte à côte, des occurrences de playback - go to end, playback - loop, playback - play, playback - rewind, playback - step back, playback - step forward et playback - stop. Nommez-les respectivement "boutonSuivant", "boutonRelance", "boutonJouer", "boutonPrecedent", "boutonRecule", "boutonAvance" et "boutonPause". Comme vous l'aurez compris, nous gardons notre gros bouton Stop de l'ancienne interface (et sa fonction) pour faire du bouton playback - stop un bouton de pause, nous permettant de relancer la lecture avec playback - play. De même, nous ne définirons pas de boucle avec playback - loop, mais redémarrons le son.
Voici pour les seules modifications de l'interface...

Le coeur du code
Ce coeur, à savoir la gestion du fichier XML (le bloc playlist_xml.onLoad) et la gestion du son (le bloc chanson.onLoad), reste globalement inchangé. Nous ne modifierons qu'une chose dans la gestion du son : l'affichage. Dans le bloc chanson.onLoad, modifiez la ligne
_root.ecranTitre = "Lecture de "+liste.getSelectedItem().data;
en
_root.ecranTitre = "[0%]:" + liste.getSelectedItem().label;
Deux choses sont donc modifiées (hors le texte) : nous affichons maintenant le pourcentage de son lu (et non chargé...), et nous affichons le nom de la chanson tel que défini dans le fichier XML (et affiché dans la liste), plutôt que le nom du fichier, ce qui est tout de même plus propre...

Le timer
Cet affichage du pourcentage se fera avec un "timer", créé grâce aux propriétés duration et position du son, dans la fonction suivante :

function afficheTimer() {
  if (chanson.duration > 0) {
    chansonPourcent = Math.round((chanson.position * 100) / chanson.duration);
    _root.ecranTitre = "[" + chansonPourcent + "%]:" + liste.getSelectedItem().label;
    }
  }

Mais le pourcentage resterait constamment à zéro : il nous faut le mettre à jour à intervalle régulier, et pour cela, rien de mieux que le couple de fonctions setInterval() et clearInterval() - la première nous permet de créer cet intervalle (quand on (re)lance la lecture d'une chanson), la seconde de l'annuler (quand la chanson se termine).
La première utilisation de notre intervalle se fait dans la gestion de la ListBox, avec les fonctions userClic() et deselection() (en gras, les changements/ajouts par rapport à la version précédente):

liste.setSelectMultiple(false);
liste.setChangeHandler("userClic");
function userClic() {
  fichierEnCours = liste.getSelectedItem().data;
  chanson.loadSound(fichierEnCours, true);
  chansonIntervale = setInterval(afficheTimer, 1000);
  }
function deselection() {
  clearInterval(chansonIntervale);
  _root.ecranTitre = "Musique stoppée.";
  liste.setSelectedIndices(null);
  }

La mise à jour se fait ici toute les secondes (tous les 1000 millièmes de secondes), mais rien n'empêche de raccourcir l'intervalle pour être au plus proche de la réalité.

Les boutons
Le code attaché au bouton Stop (la fonction arreterTout()) est modifié de manière mineure (la ligne _root.ecranTitre... a été bougée dans deselection()).

Les boutons Jouer et Pause doivent agir de concert. Pour pouvoir reprendre le son à l'endroit où nous l'avons arrêté, il nous faut utiliser la fonction start() avec son argument indiquant le nombre de secondes de décalage (en secondes, et non en millièmes de seconde cette fois - mais les nombres à virgule sont acceptés, donc on ne perd pas en précision). Ce décalage est créé par le bouton Pause, à l'aide de la propriété position...

boutonPause.onRelease = function() {
  chansonPosition = Math.round(chanson.position / 1000);
  clearInterval(chansonIntervale);
  _root.ecranTitre = "[pause]:" + liste.getSelectedItem().label;
  chanson.stop();
  };
boutonJouer.onRelease = function() {
  chanson.start(chansonPosition, 1);
  chansonIntervale = setInterval(afficheTimer, 1000);
  };

Les boutons Suivant et Précédent ne sont guère plus compliqués : à partir du moment où l'on est assuré que le son en cours n'est pas au tout début ou à la toute fin de la liste, on peut sans problème passer au son précédent/suivant, en utilisant les méthode appropriées de ListBox, à savoir getSelectedIndex(), setSelectedIndex() (qui lance automatiquement la lecture du son grâce à notre évènement setChangeHandler(userClic) décrit plus haut) et getLength() (qui nous renvoi le nombre d'éléments dans la liste, le premier étant à 0 et le dernier à getLength() - 1).

boutonPrecedent.onRelease = function() {
  if (liste.getSelectedIndex() > 0) {
    liste.setSelectedIndex(liste.getSelectedIndex() - 1);
    }
  };
boutonSuivant.onRelease = function() {
  if (liste.getSelectedIndex() < liste.getLength() - 1) {
    liste.setSelectedIndex(liste.getSelectedIndex() + 1);
    }
  };

Les boutons Recule et Avance sont eux aussi simples à implémenter, en utilisant start() avec une modification de la dernier valeur de position connue :

boutonRecule.onRelease = function() {
  chansonPosition = Math.round(chanson.position / 1000) - 5;
  if (chansonPosition > 0) {
    chanson.start(chansonPosition, 1);
    }
  };
boutonAvance.onRelease = function() {
  chansonPosition = Math.round(chanson.position / 1000) + 5;
  if (chansonPosition < chanson.duration) {
    chanson.start(chansonPosition, 1);
    }
  };

Nous décalons ici le son de 5 secondes...

Enfin, le bouton Relance est des plus triviaux : on utilise simplement start(0). On prendra soin néanmoins de mettre également à zéro notre intervalle et, pour la forme, le contenu de l'affichage...

boutonRelance.onRelease = function() {
  clearInterval(chansonIntervale);
  _root.ecranTitre = "[0%]:" + liste.getSelectedItem().label;
  chanson.start(0, 1);
  chansonIntervale = setInterval(afficheTimer, 1000);
  };

Forum

Réagissez dans les forums de JDN Développeurs