2
votes

comment obtenir le src de l'élément audio de la liste en javascript

Comment puis-je obtenir le src d'une balise audio lorsque je clique sur le bouton qui la lit?

J'ai de nombreuses balises li , chacune li contient trois balises:

Une balise a qui prend la source de la piste qui sera jouée. => terminé
Une balise audio qui ressemble à l'élément précédent; Je l'utilise juste pour prendre le src et le préparer pour l'obtenir avec l'élément 3. => pas encore terminé
Une balise button qui récupère le src de la balise audio à laquelle elle se rapporte.

Lorsque je clique sur chaque bouton, je souhaite que la fonction me renvoie le src de la balise audio ou une qui lui correspond dans le même balise li .

Voici mon code:

<ul id="playList">
  <li>
    <a href="audio/track1.mp3">track1</a>
    <audio src="audio/track1.mp3" id="aud"></audio>
    <button onclick="getTrack()">get this track src</button>
  </li>
  <li>
    <a href="audio/track2.mp3">track2</a>
    <audio src="audio/track2.mp3" id="aud"></audio>
    <button onclick="getTrack()">get this track src</button>
  </li>
  <li>
    <a href="audio/track3.mp3">track3</a>
    <audio src="audio/track3.mp3" id="aud"></audio>
    <button onclick="getTrack()">get this track src</button>
  </li>
</ul>

javascript jquery html audio

0 commentaires

4 Réponses :

1
votes

onclick peut prendre un argument représentant l'événement "click" (comme onclick = "getTrack (event)" ). À l'intérieur de la fonction, cet événement de clic a une propriété .target que vous pouvez utiliser pour accéder au DOM et obtenir l'élément bouton lui-même. Ensuite, vous pouvez "parcourir" l'arborescence DOM et choisir un élément différent, comme:

function getTrack(event){
  const btn = event.target;
  const li = btn.parentElement;
  const audio = li.children[1];
  const src = audio.getAttribute("src");
  console.log(src);
}

0 commentaires

0
votes

Utilisez toujours un identifiant unique pour les éléments. Passez l'élément lors de l'appel de fonction et récupérez l'attribut href à partir de celui-ci

<ul id="playList">
  <li>
    <a href="audio/track1.mp3" >track1</a>
    <audio src="audio/track1.mp3" id="aud1"></audio>
    <button onclick="getTrack(aud1)">get this track src</button>
  </li>
  <li>
    <a href="audio/track2.mp3" >track2</a>
    <audio src="audio/track2.mp3" id="aud2"></audio>
    <button onclick="getTrack(aud2)">get this track src</button>
  </li>
  <li>
    <a href="audio/track3.mp3"  >track3</a>
    <audio src="audio/track3.mp3" id="aud3"></audio>
    <button onclick="getTrack(aud3)">get this track src</button>
  </li>
</ul>

function getTrack(id)
{

console.log(id.getAttribute("src"))
}

0 commentaires

1
votes

Je pense que frères et sœurs est ce que vous recherchez. Vous pouvez l'utiliser comme suit:

console.log($aud.attr("src"));

let $aud = $(elm).siblings( "audio" ).first();

Édition: Explication du code:

Au départ, dans le clic du bouton code > s, vous devez passer ce mot-clé afin de pouvoir récupérer l'élément bouton à l'intérieur de votre fonction de rappel:

<button onclick="getTrack(this)">get this track src</button>

Après cela à l'intérieur de votre fonction de rappel onclick , l'argument elm est l'élément button sur lequel on clique et nous le convertirons en élément jquery en utilisant $ (elm) pour utiliser sa fonction frères qui renvoient les éléments frères du bouton. Ici, nous utilisons le sélecteur "audio" parce que nous voulons juste récupérer le frère audio du bouton et aussi first () est parce que le siblings renvoie la liste des éléments correspondants alors que nous voulons juste le premier élément.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="playList">
  <li>
    <a href="audio/track1.mp3">track1</a>
    <audio src="audio/track1.mp3" id="aud"></audio>
    <button onclick="getTrack(this)">get this track src</button>
  </li>
  <li>
    <a href="audio/track2.mp3">track2</a>
    <audio src="audio/track2.mp3" id="aud"></audio>
    <button onclick="getTrack(this)">get this track src</button>
  </li>
  <li>
    <a href="audio/track3.mp3">track3</a>
    <audio src="audio/track3.mp3" id="aud"></audio>
    <button onclick="getTrack(this)">get this track src</button>
  </li>
</ul>

Alors maintenant, $ aud est le audio associé au bouton poussé et nous devrions obtenir son attribut src en utilisant la fonction attr .

function getTrack(elm){
let $aud = $(elm).siblings( "audio" ).first();
console.log($aud.attr("src"));
}

2 commentaires

Je ne comprends pas le code mais ça marche merci mon frère

@salah, voyez ma modification et j'espère que vous la comprendrez maintenant.

0
votes

Sans jQuery, vous pouvez utiliser previousElementSibling code> pour saisir l'élément audio correspondant du bouton et obtenir sa valeur src .

Ici, j'ai également supprimé le JS en ligne et utilisé addEventListener après avoir sélectionné les boutons depuis le DOM avec querySelectorAll a> qui est la manière moderne de coder JS et rend votre balisage plus léger. J'ai utilisé affectation de déstructuration pour obtenir le previousElementSibling de l'élément cliqué et l'a renommé comme "audio".

<ul id="playList">
  <li>
    <a href="audio/track1.mp3">track1</a>
    <audio src="audio/track1.mp3" id="aud"></audio>
    <button>get this track src</button>
  </li>
  <li>
    <a href="audio/track2.mp3">track2</a>
    <audio src="audio/track2.mp3" id="aud"></audio>
    <button>get this track src</button>
  </li>
  <li>
    <a href="audio/track3.mp3">track3</a>
    <audio src="audio/track3.mp3" id="aud"></audio>
    <button>get this track src</button>
  </li>
</ul>

const buttons = document.querySelectorAll('#playList button');
[...buttons].forEach(button => button.addEventListener('click', getTrack, false));

function getTrack() {
  const { previousElementSibling: audio } = this;
  console.log(audio.src);
}

0 commentaires