Bonjour,
Dans mon site web je vais faire jouer de la musique. Pour éviter que plusieurs tune juent en même temps. Je fait une vérification sur la div parent a une classe.
Par exemple quand je clique sur un bouton play sur ma page j'ajoute une classe "is_playing".
Attention c'est seulement une div à la foi qui peut avoir cette classe.
Voici mon code js.
// single track
$('#app').on('click','#play-single-track',function(event){
event.preventDefault();
$id = $(this).data('track-id');
$name = $(this).data('track-name');
// je met dans une variable le click parent
var $this = $(this);
// je trouve la div parent où le bouton à été cliqué
var parentDiv = $this.parents('article');
// si une autre div avait djà la classe "is_playing" je l'enlève
if ($('body').find('article').hasClass('is_playing')) {
$('body article').removeClass('is_playing');
// J'arrête de jouer la tune
}
// si la div parent n'a pas la classe '"is_playing" je cache le bouton pause.
if (parentDiv.not(".is_playing")) {
$this.next().hide();
};
parentDiv.addClass('is_playing');
// je vais jouer la tune où sa div a la classe "is_playing"
});
Dans mes page où il va avoir un contenue de musique j'ai cette structure html :
<article class=" article-item" id="article-1">
<div class="l-lastarticle">
<div class="l-lastarticle_thumb">
<div class="player-single-btn">
<a href="#" class="player-single-play" id="play-single-track" data-track-id="123" data-track-name="<?= $track['Track']['name']; ?>"><span class="glyphicon glyphicon-play-circle"></span></a>
<a href="#" class="player-single-pause" style="display:none;" id="pause-single-track"><span class="glyphicon glyphicon-pause"></span></a>
</div>
<div class="l-lastarcle-content">
<h3 class="l-lastarcle-title">Un titre</h3>
<p>Du texte</p>
</div>
</div>
</article>
Merci de votre aide.