Gérer les paramétres d'un audio en Javascript

Résolu
BabaProg Messages postés 71 Date d'inscription   Statut Membre Dernière intervention   -  
BabaProg Messages postés 71 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour j'ai plusieurs balises audio dans mon fichier HTML et je voudrais qu'une balise puisse contrôler le son de toutes les autres et pour activer cela je voudrai qu'on clique sur une image et que ça affiche le "contrôleur audio" je vous mais le code html et le code javascript : 
  <audio id="controleur" controls>  <!--  Je l'ai mis en display none dans le css et il faudra le réafficher sur le clique de l'image  -->
        <audio id="reacteur" src="reacteurIronMan.mp3"></audio>
        <audio id="sonDeplacement" src="deplacementIronMan.mp3"></audio>
        <audio id="sonNiveau" src="musiqueLevel.mp3"></audio>
    </audio>




let paramImg = document.getElementById('paramImg'), // l'image à cliquer
    parametre = document.getElementById('parametre'),//la ou on affiche la gestion du son
    controleur = document.getElementById('controleur') // la balise audio globale

paramImg.addEventListener("click", function () {
    paramImg.innerHTML = controleur
})
A voir également:

3 réponses

Réponse 1 / 3
Rodabla
 
Bonjour,
votre HTML est faux et la logique qui va avec aussi.
En réalité vous n'avez besoin que d'une balise audio et de changer le contenu qui est lu par le lecteur.

Imbriquer des balises audio est complétement hors de propos c'est comme si vous utilisiez une balise image pour y mettre plusieurs images. Une seule s'affichera à la fois et encore si elle s'affiche, une balise n'étant pas faite pour être utilisée comme vous le faites vous marquez un code faux ça à peu de chance d'aboutir...
Vous devez donc faire une liste de lecture et changer celle ci par script éventuellement.
  • L'indication de plusieurs contenus pour une balise audio(qui apporte donc un lecteur dans le navigateur) est utile pour faire plusieurs fichiers pour un même son à lire en différents formats utilisés pour les différentes compatibilités des navigateurs.

détails ici:
https://www.w3schools.com/html/html5_audio.asp

Remarquez l'attribut source en double dans l'exemple, c'est lui qui indique le fichier à lire , la balise audio étant le lecteur.

Donc c'est cet attribut source(imbriqué au lecteur) que vous devez changer dans le cadre d'une liste de lecture.
Vous pouvez soit écrire vous même le programme pour le faire soit utiliser un script open source qui le fait.

https://www.qwant.com/?q=HTML+AUDIO+player+avec+playlist

Quant à la présence de boutons de menus ils sont affichés par l'attribut "controls".
C'est donc celui ci que vous devez changer pour afficher ou masquer ces menus comme indiqué dans le lien que je vous ait fournit.
0
Rodabla
 
Exemple de code sans Interface: 

 <audio id=lecteuraudio controls>
  <source id=fichierogg src="horse.ogg" type="audio/ogg">
  <source id=fichiermpeg src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> 



let lecteur=document.getElementById('lecteuraudio');
let ogg=document.getElementById('fichierogg');
let mpeg=document.getElementById('fichiermpeg');

function masquerControls(){
lecteur.setAttribute('controls','false');
//-- peut aussi s'écrire comme ça en notation raccourcie:
//-- lecteur.controls=false;
}
function afficherControls(){
lecteur.setAttribute('controls','true');
//-- peut aussi s'écrire comme ça en notation raccourcie:
//-- lecteur.controls=true;
}

function changerSourceAudio(srcOgg, srcMpg){
ogg.src=srcOgg;
mpeg.src=srcMpg;

}

//-- exemple avec vos fichiers pour charger le premier son
changerSourceAudio(null, 'reacteurIronMan.mp3');
//-- notez que pour lire directement le fichier vous avez la méthode .play() ou l'attribut autoplay
//-- un autre son
changerSourceAudio(null, 'musiqueLevel.mp3');

/*
Bien sûr il est très recommandé d'utiliser la source en double ou triples formats de fichiers pour pallier aux problèmes de compatibilité des navigateurs sinon le son ne pourra pas être lu sur l'un ou l'autre.
*/
0
Réponse 2 / 3
Rodabla
 
"Donc c'est cet attribut source(imbriqué au lecteur) que vous devez changer dans le cadre d'une liste de lecture. "

Évidemment je voulais dire l'attribut "src" de la balise SOURCE qui doit changer comme dans mon code.
Il est encore mieux de changer carrément les balises source indiquant le fichier à lire par exemple en utilisant removeElement et createElement ce qui permet aisément de ne pas avoir une balise vide et inutile dans le code comme celui que je vous ai montré pour l'exemple.

Tout ça pour dire que ce n'est pas compliqué vu qu'il y a une API fournie avec, encore faut-il l'utiliser correctement ce que votre script ne fait pas ne serait qu'au niveau de son HTML qui est dans les choux:
ne veut rien dire et comporte plusieurs erreurs que vous pouvez éviter simplement en lisant le manuel de la balise audio ou n'importe quel tuto pour comprendre 'comment ça marche' plutôt qu'improviser ce qui conduit inévitablement à des erreurs.
0
Réponse 3 / 3
BabaProg Messages postés 71 Date d'inscription   Statut Membre Dernière intervention   6
 
D'accord merci beaucoup !
0