Player audio

Déclenche un évènement utilisé dans le player audio sur les inputs de type range (dans notre cas). Lorsqu’on saisit le bouton/curseur de l’input range, les effets du changement de paramètres se font sentir, alors qu’avec un évènement de type 'click’, c’est lorsqu’on relâche le curseur que les paramètres s’adaptent, pas au déplacement. Exemple : pour un input range pour régler le volume, lorsqu’on déplace le bouton, le volume change alors même qu’on n’a pas lâché le curseur.

Extrait de Mozilla (mieux expliqué) : est déclenché de façon synchrone quand la valeur d'un élément <input> (entrée), <select> (sélection) ou <textarea> (zone de texte) est modifiée

Syntaxe type: monInput.addEventListener ('input’, fonction);

currentTime et duration sont deux propriétés de l’HTML audio. currentTime renvoie une valeur qui correspond à un instant T sur la durée totale de la chanson (duration).

L’évènement se produit quand currentTime est mis à jour (à une fréquence située entre 4 et 66Hz). Dans le cadre du player audio, on peut utiliser cet type d’évènement pour mettre à jour la barre de progression de la chanson (input de type range).

Exemple :

La méthode forEach() permet d’effectuer une ou des actions sur chaque élément d’un tableau (array).

Syntaxe type:
monTableau.forEach(élément => {action qui va s’exécuter pour chaque élément de monTableau});

Note : 'élément’ constitue un callback, c’est-à-dire qu’on appelle la fonction à l’intérieur d’elle-même, puisque forEach est le raccourci de « pour chaque ELEMENT » et qu’on rappelle chaque élément. Dans mon cas, j’ai utilisé forEach pour place chaque chanson de mon tableau de chanson dans un tableau HTML

Méthode qui renvoie un tableau contenant les valeurs des clés d’un objet.

Exemple de syntaxe :

Le i est là car il s’agit d’une boucle for.

Partons de la fin : trackListInfo[i].source correspond à la valeur de la clé source (chemin de l’audio) de chacune de mes chansons (qui sont des objets JavaScript).

source.includes(trackListInfo[i].source) : Le premier ‘source’ est une variable correspondant au .src de l’audio. Cet audio.src renvoie à l’adresse complète de la source de l’audio. En l’occurrence, j’ai demandé au lecteur de lire une chanson avec la [source] d’une de mes {chansons}, par exemple ‘musique/rickroll.mp3’, mais lorsque je demande la valeur d’audio.src, la console renvoie https://monsite.com/musique/rickroll.mp3 par exemple.

Impossible donc, de savoir quelle chanson est jouée dans le lecteur.

Pour savoir quelle {chanson} joue, je dois demander à la machine de voir si la [source] d’une de mes {chansons} fait partie de audio.src.

« Traduite » en français, ce morceau de ligne de code pourrait se dire : « est-ce que la source contient/inclut le [chemin] d’une de mes {chansons} ? »

On sait que le Obj.values(trackListInfo[i]) nous retourne un [tableau] des valeurs d’une {chanson} i.
Le tableauChanson.some(s=>source) signifie : est-ce qu’il y a des valeurs dans ma chanson qui sont audio.src ? En ajoutant le .includes comme dans le morceau de code, on ne vérifie qu’une partie de audio.src.

Pour résumer, on peut traduire ce morceau entier de code par :
Est-ce qu’une valeur dans ma {chanson} i correspond à un segment de ma source audio ?

Puis avec la boucle for (d’où le i), on demande de regarder pour toutes les chansons. Lorsqu’une chanson vérifie cette condition, on sait que i est le numéro de la chanson jouée, ce que l’on cherchait.

Cette propriété renvoie le premier nœud enfant d’un élément, elle est en lecture seule.

Exemple de syntaxe :

ATTENTION

Ne pas confondre avec firstChild : firstChild fonctionne presque comme firstElementChild, sauf que firstChild va renvoyer ce qui suit l’élément ciblé dans l’HTML. firstChild va prendre en compte l’indentation, les espaces, les tabulations, etc, situés de l’HTML. Dans ce cas, firstChild renvoie #text. Assez peu utile à priori.