11548 sujets

JavaScript, DOM et API Web HTML5

Changement d'un src d'une balise <audio> onclick

Bonjour à tous,

Cela fait longtemps que je me casse la tête à essayer de créer un code (qui ne marche jamais). Je voudrais que le src de ma balise <audio> se modifier et donc que la musique change lorsque je clique sur un lien. Voici mon code (vide) :


<div id="myAudio">

  <audio controls="controls" style="width: 500px;">
    <source [#red]src="fichier.mp3"[/#] type="audio/mp3" />
    Votre navigateur ne prend pas en charge le lecteur !
  </audio>
  
</div>

<a href="#">Musique 1</a>
<a href="#">Musique 2</a>
<a href="#">Musique 3</a>


Si vous pouviez m'aider je vous en serais très reconnaissant. Merci ! Smiley biggrin
Modifié par castle (19 Mar 2012 - 17:42)
Salut,

En utilisant attr(), tu devrais y arriver


$('a').click(function() {
$('#myAudio source').attr('src','nouveaufichier.mp3');
});
Il faut dans un premier temps que dans ta page, tu appelles une librairie comme jquery (par exemple)

<script type="text/javascript" src="Chemin vers jquery.js"></script>


Et ensuite tu places ce code :

<script type="text/javascript">
$(document).ready(function() {
        $('a').click(function() {
                $('#myAudio source').attr('src','nouveaufichier.mp3');
        });
});
</script>


Il faudra sans doute être plus spécifique quant aux liens (en rajoutant un identifiant à ton sélecteur $('a') => $('#mesChansons a')).

Tu peux même récupérer l'adresse de ton fichier mp3 grâce au href :

<script type="text/javascript">
$(document).ready(function() {
        $('a').click(function() {
var nouveauFichier = $(this).attr('href'); 
                $('#myAudio source').attr('src',nouveauFichier);
return false;
        });
});
</script>

Modifié par Xulu (19 Mar 2012 - 18:27)
Merci de ton aide. Cependant, cela ne marche toujours pas ! Smiley ohwell Est-ce que j'ai fait le bon code ?



<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function() {

        $('a').click(function() {

                $('#myAudio source').attr('src','http://siteofsound.com/wp-content/uploads/2010/11/Derezzed.mp3');

        });

});

</script>
<div id="myAudio">

  <audio controls="controls" style="width: 500px;">
    <source src="#.mp3" type="audio/mp3" id="test" />
    OUPS ! Votre navigateur ne prend pas en charge le lecteur !
  </audio>
  
</div>

<a href="#" id="a">Musique 1</a>
<a href="#">Musique 2</a>
<a href="#">Musique 3</a>
Salut

En fait pour ce problème, si tu veux le résoudre à l'aide du changement de l'attribut src="", tu devras le faire au niveau de la balise <audio> dans ce cas là ça va être pris en considération, si non pour la balise <source> ça ne marcherai pas (Je n'ai pas de raison ou d'explication officielle, mais d'après ce comportement je suppose que les <source> tags sont lues une seul fois à l'initialisation).

Je vois donc sur ton cas que tu fait usage à une seule source tag, alors c'est préférable de mettre ta source sur l'audio tag, si non si tu es intéressé par plusieurs navigateurs par conséquent tu voudras mettre des source tag, dans ce cas il va falloir que tu supprimes ton <audio> du DOM et de le remettre à nouveau avec les nouvelles sources configurées, ou bien (comme le préfèrent quelques intégrateurs Smiley smile ) de mettre tes <audio> à la fois bien configurées, et d'afficher celui que tu souhaites et cacher les autres selon ta conception. Et chaque méthode à ses avantages et ses inconvénients et à toi de choisir qu'est ce que tu préfères.
Sujet clos
Aller à