12
votes

Jouer un élément audio HTML à la fois

J'ai beaucoup audio code> sur une seule page et je veux jouer un seul élément à la fois. C'est-à-dire que si un audio code> est en cours de lecture et je clique sur la lecture sur un autre élément, l'élément précédent audio code> doit faire une pause.

J'ai trouvé un code JQuery d'une autre question à Faites cela mais qui utilise une image comme des contrôles de lecture / pause. J'utilise l'attribut Inbuilt Controls = 'Commandes' Code> pour l'élément code> audio code> à la place. Est-il possible d'utiliser jQuery pour contrôler la fonction de lecture / pause pour l'élément code> audio de code> dans mon cas? P>

Voici mon code HTML P>

$(document).ready(function() {
    var curPlaying;

    $(function() {
        $(".playback").click(function(e) {
            e.preventDefault();
            var song = $(this).next('audio')[0];
            if(song.paused){
                song.play();
                if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
            } else { song.pause(); }
            curPlaying = $(this).parent()[0].id;
        });
    });
});


3 commentaires

Les utilisateurs peuvent-ils jouer n'importe quel élément audio de la page au hasard? Si oui, ce que seul l'audio précédent ne fonctionnera pas.


Oui, les utilisateurs peuvent jouer n'importe quel élément au hasard.


Ici, tu vas github.com/rhroyston/mdl-audio


6 Réponses :


0
votes

En supposant que votre syntaxe pour arrêter et mettre en pause des pistes est correcte (je ne sais rien sur l'élément code> audio code>), vous devriez être capable de faire quelque chose comme ceci:

$(".playback").click(function(e) {

  // pause all other tracks
  $('.audio').each(function () {
    var song = this;
    if (!song.paused) { song.pause(); }
  });

  // play the audio associated with this element
  this.play();

});


0 commentaires

25
votes
$(function(){
    $("audio").on("play", function() {
        $("audio").not(this).each(function(index, audio) {
            audio.pause();
        });
    });
});
See sample at JSFiddle

1 commentaires

Dans mon cas, l'exemple de Jsfiddle n'a travaillé qu'une seule fois: # 1 (OK) -> # 2 (OK, arrête # 1) -> # 1 (ne joue pas, ne peut pas arrêter # 2).



11
votes

Vanilla JS Solution

Voici une solution qui ne nécessite pas de jQuery. xxx

Certaines choses à noter:


0 commentaires

1
votes

Peu de modification à la réponse de LostComputer

dans votre code HTML écrit: p> xxx pré>

dans js écrit: p>

function pauseOthers(ele) {
                $("audio").not(ele).each(function (index, audio) {
                    audio.pause();
                });
            }


1 commentaires

Pour une raison quelconque, la réponse @LostComputer ne fonctionne pas pour moi, l'événement de jeu n'a jamais tiré, alors travaillez de cette manière.



0
votes
<script>
function controlplay(e) {
  document.querySelectorAll('.playback').forEach(item => { if(item.id != e.target.id) item.pause(); });
}
</script>

<script>
document.querySelectorAll('.').forEach(item => { item.addEventListener("play", event => { controlplay(event) })});
</script>

0 commentaires

0
votes

angulaire: xxx

}


0 commentaires