demande d'explication à propos de "player.src"

Version imprimable

30/08/2026, 17h38
noradan

demande d'explication à propos de "player.src"

Bonjour
Je ne suis même pas débutant en js.
On m'a donné un code que j'essaye de comprendre
il y a dedans

Code:

const player = document.getElementById("audioPlayer");

ça je comprend ce que ça fait : la constante nommée player est identifiée à l'objet du fichier appelant (un html) identifiée par "id=audioPlayer"
Ensuite il y a une liste nommé "playlist" qui contient des chemins vers des mp3. L'indice dans le liste est donné par "currentTracks" jusque là je suit
vient alors ceci

Code:

player.src = playlist[currentTrack];

Même si je comprends ce que cela fait à savoir "écrire src="le chemin" " dans la balise <audio id="audioPlayer"> J'aimerais comprendre un peu mieux.
Je viens de lire pendant une heure et je n'ai pas trouvé de quoi me satisfaire.
La question est : tout ce qu'on peut écrire dans une balise est-il une méthode js?
La méthode "src" est elle une méthode standard de js ou une méthode "à la volée" permettant d'attribuer une valeur à tout ce qu'on peut mettre dans un <audio> ?

Je veux dire par là si j'avais <div id="audioPlayer"> est-ce que je pourrais écrire dans le js
player.style='font-size:20px'
player.width='30rem'
etc
30/08/2026, 18h13
casperweb

Bonjour,

Citation:

Je ne suis même pas débutant en js.

Tu devrais débuter, cela serait plus facile si tu suivais un cours. Par exemple https://fr.javascript.info/

Citation:

On m'a donné un code que j'essaye de comprendre

c'est une très bonne chose que de vouloir comprendre.

Citation:

Je viens de lire pendant une heure et je n'ai pas trouvé de quoi me satisfaire.

Quelles sont tes lectures ?

Citation:

tout ce qu'on peut écrire dans une balise est-il une méthode js?

Attention à ne pas confondre propriété et méthode. Un objet peut avoir les deux. Une méthode est une fonction et possède des parenthèses avec ou sans paramètre.
La propriété scr de l'objet player est effectivement lié à l'attribut du même nom en HTML. De même pour les autres balises HTML.
https://fr.javascript.info/dom-attri...and-properties

Pour voir les attributs et méthodes d'un objet, regarde-le en console.

Code:

console.log(player);

Tu as un petit triangle, tu cliques dessus et tu observes tout ce que contient cet objet.

Pour ta dernière question, oui tu peux écrire player.width='30rem'. Renseigne toi sur le DOM, Document Object Model.
https://www.toutjavascript.com/savoi...tion-dhtml.php
31/08/2026, 14h35
Obsidian

Bonjour à tous,

casperweb a raison, tu devrais suivre un cours en ligne en même temps que pratiquer tes propres exercices sur ton navigateur. Tu pourrais alors progresser très vite. Commence effectivement par voir comment est construit le DOM. En tirant le fil, tu vas rapidement obtenir l'essentiel de ce qu'il faut savoir en Javascript.

Citation:

Envoyé par noradan

La question est : tout ce qu'on peut écrire dans une balise est-il une méthode js?
La méthode "src" est elle une méthode standard de js ou une méthode "à la volée" permettant d'attribuer une valeur à tout ce qu'on peut mettre dans un <audio> ?

Ni l'un ni l'autre. On va y venir.

Citation:

Je veux dire par là si j'avais <div id="audioPlayer"> est-ce que je pourrais écrire dans le js
player.style='font-size:20px'
player.width='30rem'
etc

En fait, « src » est avant tout un attribut HTML, donc une précision apportée au document (et à une balise en particulier) avant même que le Javascript entre en jeu. Cette précision est donc avant tout à l'usage du navigateur. Par exemple :

Code:

<IMG src="image.jpeg" alt="Texte alternatif si l'image ne s'affiche pas">

En principe, on ne peut pas inventer ses propres attributs. Il faut s'en tenir à la liste de ceux qui sont définis par le langage pour une balise donnée si on veut que le document soit valide. Les navigateurs le font quand même et certains sites exploitent cette possibilité mais ce n'est pas un exemple à suivre. HTML5 définit toutefois la possibilité de déclarer des attributs « data-xxxx » si on tient à le faire quand même, pour marquer les éléments d'un document avec ses propres informations.

Côté Javascript, lorsque l'on explore le DOM, chaque balise est matérialisée par un objet propre, qui dérive de HTMLElement. Ça veut dire que chaque instance est déjà dotée de plusieurs dizaines de méthodes différentes, correspondant à tout ce que l'on peut faire avec, et à celles qui ont été héritées des classes parentes.

:fleche: En revanche (et effectivement c'est important) : non, les attributs d'une balise ne sont pas systématiquement associés à une propriété dans l'objet JS qui les représente.

Si tu essaies d'affecter une valeur à une propriété qui n'existe pas (même si l'attribut homonyme existe dans le document HTML), elle sera simplement créée à la volée, associée ton objet et conservera la valeur reçue. Mais il ne se passera rien de plus.

Par contre, la plupart des attributs usuels (id, name, src, href…) le sont quand même. C'est également le cas des écouteurs d'événements tel que « onclick » et autres. En outre, et normalement on ne devrait pas encore évoquer le sujet à ce stade, ces propriétés sont en général des getters/setters.

Les getters (get) et setters (set) sont en fait des fonctions que l'on affecte à une propriété qui, de l'extérieur, semble se comporter comme une variable ordinaire mais qui sont en fait appelées chaque fois qu'on lit cette propriété ou que l'on écrit dedans. L'idée générale étant de « monitorer » les accès à cette propriété et de déclencher automatiquement une action lorsqu'on la modifie. C'est ce qui fait que tu vas pouvoir observer directement le résultat d'une modification lorsque tu changes la couleur, le style, le titre, la taille ou toute autre caractéristique d'un élément donné, alors qu'on s'attendrait à ce qu'il faille ordonner le rafraîchissement de l'affichage, via un appel à une commande dédiée.