2024-08-03

Le « musique » « player », disponible à cette adresse https://belisssle.ca/cahier/mus/music_player.php , offre une sélection de pièces musicales de ma composition. Attendez-vous à quelque chose d’ « ambient » ou expérimental, selon votre inclinaison.

Pour l’instant le « musique » « player » propose une liste statique de pièces qui peuvent être écoutées en mode séquentiel.

Le code vient principalement de cette vidéo : https://www.youtube.com/watch?v=QTHRWGn_sJw

La modification la plus importante que j’ai apportée est l’utilisation d’un fichier JSON permettant de facilement éditer la liste des pièces musicales : pour chacune, il fallait aussi associer le titre de la pièce et le nom d’un fichier image pour décorer l’animation pendant que la pièce joue dans le « player ».

Le code fait appel à un volumineux fichier CSS dont seulement quelques éléments sont effectivement utilisés dans le code HTML.

Le fichier d’origine est : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css . Selon la vidéo on peut référencer le fichier CSS en consultant le site http://cdnjs.com et copier le lien « font-awesome ». À titre complémentaire, vous pouvez aussi visiter le site https://fontawesome.com .

Pour retirer les éléments non utilisés du fichier CSS de Font Awesome, j’ai copié en premier le fichier dans un répertoire local et je l’ai reformaté grossièrement afin de mieux identifier les composantes.

En utilisant le fichier CSS en entier, le « musique » « player » ressemble à ceci :

En retirant le fichier CSS, il ne reste que ceci; les boutons ont disparu :

Le formatage restant provient d’un autre fichier CSS spécifiquement construit pour cette page, en suivant les instructions de la vidéo mentionnée plus tôt.

Quatre classes du fichier CSS de Font-Awesome sont facilement identifiables, soit :

• fas fa-backward

• fas fa-play

• fas fa-forward

• fas fa-pause (utilisé programmatiquement)

En rajoutant uniquement ces classes dans le fichier, on obtient :

On remarque que les symboles ne sont plus là. Il m’a fallu chercher un temps pour réaliser que le fichier d’origine fait appel à une série de polices de caractères que j’ai dû importer tout en rectifiant l’URL :

J’ai ajouté la référence à « Font Awesome 5 Free » aux classes de style des images pour les boutons de contrôle. J’ai aussi simplifié la hiérarchie des classes pour ces mêmes boutons.

Ce qui a mené à modifier le HTML :

À ce moment-ci, le visuel est rétabli mais le code JavaScript ne fonctionne plus.

Je me rends compte que même s’il s’agit d’un projet tout simple, je pourrais mieux compartimenter les opérations JavaScript. Ayant découvert ce code sur Stack Overflow ( https://stackoverflow.com/questions/502366/structs-in-javascript ) je l’utilise pour créer une « struct », qu’il sera facile de modifier ultérieurement, pour stocker les valeurs relatives à une pièce musicale : « title », « src », « cover » (selon le modèle initial trouvé dans la vidéo).

Toutes les pièces musicales sont définies dans un fichier JSON.

Le code HTML/script ci-dessous résume les étapes de création des objets JavaScript selon la liste JSON :

• référence au script qui permet de définir une structure de données (struct.js)

• référence au script qui contient les fonctionnalités relatives au « musique » « player »

• script local qui déclare la variable « songItem » et la fonction d’initialisation loadSongs() qui sera appelée une fois la page chargée document.body.onload = (event)…

• la fonction loadSongs() est partiellement construite avec PHP chargée du découpage (parsing) du fichier JSON et d’une itération qui permet de générer le code JavaScript pour déclarer chaque objet musical (voir exemple plus bas extrait du débogueur du navigateur)

Dans le fichier JavaScript « music_player.js » il ne reste qu’une déclaration à l’array « songArray » qui contient toutes les pièces musicales. Il y a donc séparation entre la définition des données et les fonctionnalités du « musique » « player ».

Je veux séparer davantage le code du « musique » « player » de sorte que le code qui donne les instructions (jouer, arrêter, pièce suivante, pièce précédente, etc.) soit distinct du code visuel. Éventuellement, changer le visuel aura un faible d’impact sur le code d’opération et vice versa.

J’ai pensé créer deux classes, une pour le code d’opération PlayerCode et une pour les interactions visuelles PlayerUI.

M’inspirant de ce que je sais faire en C#, j’ai pensé relier les fonctionnalités des deux classes en utilisant des « delegates » : des propriétés qui reçoivent comme valeurs des fonctions. On appelle par la suite ces propriétés de la même manière que les fonctions qu’elles représentent.

Dans la classe PlayerCode, suffit de créer des membres privés :

Plus loin dans le code, on définit les « setters » :

Utiliser ce code se résume à manipuler par code uniquement l’instance « codePlayer » de la classe PlayerCode :

Pour l’instant le code complet de la classe PlayerUI :

Je devrais retirer les appels audio.play() et audio.pause() et les placer dans PlayerCode.

J’ai aussi à intégrer les « event listeners » dans PlayerUI. Ce faisant, les appels à codePlayer que l’on peut voir dans le code ci-dessous devront être remaniés de sorte que la classe PlayerUI soit réellement distincte de PlayerCode. Ça sera pour une prochaine fois.

À bientôt pour la suite.