Lecteur audio avec barre de progression

[TRANSCRIPT EN FRANCAIS]

Bonjour,

Dans cette vidéo, nous allons voir comment créer un lecteur audio personnalisé. Ce lecteur audio est composé d'un bouton Play/Pause et d'une barre de progression qui montre la progression de la chanson.

Tout d'abord, ajoutons le fichier audio. Vous pouvez faire glisser ce fichier directement depuis le média dans votre écran ou vous pouvez ajouter un composant Audio dans lequel vous ajouterez un fichier audio : dans tous les cas, le composant Audio est un composant non graphique disponible dans la liste des objets. Il possède des propriétés, des événements déclencheurs et des actions. 

Maintenant, créons ce bouton Play / Pause. Insérez un bouton Play : vous pouvez utiliser une image, un SVG ou créer votre bouton dans PandaSuite Studio en utilisant des formes. 

Sélectionnez ce bouton et, à l'aide du menu supérieur, ajoutez-le à un composant multi-états. Renommez ce composant "bouton Play/Pause" pour plus de clarté. 

Cliquez sur le bouton dans la liste des objets pour modifier son contenu. Le premier état de ce composant sera PLAY. 

Créez un nouvel état lié pour PAUSE dans lequel vous ajoutez le bouton Pause. Supprimez le bouton Play qui a été ajouté automatiquement à partir de l'état initial.

Pour commencer à lire l'audio, quittez et sélectionnez le multi-état qui contient le bouton. Ajoutez une action, choisissez l'événement Single tap / Click > Interact with a component > Audio et l'action Play/Pause. 

Selon que l'audio est en cours de lecture ou non, changeons l'état du bouton : affichez le bouton Pause lorsque l'audio est en cours de lecture, et le bouton Lecture lorsqu'il est en pause. Pour cela, sélectionnez le composant Audio et choisissez d'abord l'événement Démarrage de la lecture. Choisissez Interagir avec un composant > Multi-état > Sélectionner l'état > Pause. Faites de même avec l'événement Pause de la lecture et l'action Interagir avec un composant > Multi-état > Sélectionner l'état > Lecture. 

Félicitations ! Le bouton Lecture/Pause fonctionne maintenant.

Maintenant, créons la barre de progression. Nous allons synchroniser un composant de zone de défilement avec l'audio.

Insérez une barre statique sur laquelle la barre de progression sera placée. Celle-ci a une largeur de 300 pixels.

Au-dessus d'elle, insérez un composant de zone de défilement de la même largeur. Dans les propriétés, activez le défilement horizontal, cachez la barre de défilement et choisissez comme taille de son contenu le double de cette largeur, donc 600 pixels. Insérez une barre de progression d'une largeur de 300 pixels, ainsi qu'un curseur. Pour obtenir l'effet désiré, cette barre de progression doit se trouver à l'extrémité gauche de la zone. Le défilement doit commencer à l'opposé et de droite à gauche pour apparaître progressivement.  Positionnons la zone de défilement à cet endroit, créons un marqueur et faisons-en le marqueur par défaut. 

La barre de défilement est prête à être synchronisée avec le fichier audio. Ajoutons un composant de synchronisation. Dans les propriétés, choisissez les composants que vous voulez synchroniser ensemble : le fichier audio et la zone de défilement. 

Cochez les propriétés qui sont synchronisées par défaut. Lorsque la barre de défilement défile de droite à gauche, cliquez sur le bouton Inverser. 

Et voilà ! La barre de défilement affiche la progression de la chanson ! J'espère que vous avez apprécié, c'était un excellent exemple combinant Multi-état et synchronisation.