Lire et mettre en pause un élément HTML5 audio à un moment via jQuery

J'ai plusieurs HTML5 audio des éléments sur une page et je suis en utilisant jQuery pour jouer et de les mettre en veille. La lecture et pause fonctions fonctionnent correctement, mais les pistes peuvent être joués en même temps.

Comment puis-je réécrire ce code, de sorte que seulement un seul morceau peut être joué à la fois? C'est.. si l'on joue et que vous cliquez sur une autre, de mettre en pause la précédente et de jouer le plus récent, cliquez sur.

Merci!

HTML:

<div id="music_right">
        <div class="thumbnail" id="paparazzi">
            <a class="playback">
                <img class="play" src="http://www.lucisz.com/imgs/play.png" />
            </a>
            <audio>
             <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
                <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
                Your browser does not support HTML5 audio.
            </audio>
        </div>
        <div class="thumbnail" id="danceinthedark">
            <a class="playback">
                <img class="play" src="http://www.lucisz.com/imgs/play.png" />
            </a>
            <audio>
             <source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
                <source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
                Your browser does not support HTML5 audio.
            </audio>
        </div>
        <div class="thumbnail" id="bornthisway">
            <a class="playback">
                <img class="play" src="http://www.lucisz.com/imgs/play.png" />
            </a>
            <audio>
             <source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
                <source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
                Your browser does not support HTML5 audio.
            </audio>
        </div>
    </div>

JavaScript: (qui fonctionne, mais joue/pause individuellement)

$(function() {
    $(".playback").click(function(e) {
        e.preventDefault();
        var song = $(this).next('audio').get(0);
        if (song.paused)
            song.play();
        else
            song.pause();
    });
});

JavaScript: (laid concept de la mine)

$(function() {
    $(".playback").click(function(e) {
        e.preventDefault();
        var song = $(this).next('audio').get(0);
        if (song.paused)
            song.play();
            song.not($(this).pause();
        else
            song.pause();
    });
});
  • Qu'avez-vous essayé?...personne ne va l'écrire pour vous. Eh bien, la plupart des gens, ce qui est.
  • Je vous entends. Essayé des trucs un peu différents, tous avec brut de la syntaxe. If/then sont difficiles pour moi à envelopper ma tête autour de. Je vais ajouter mon concept à la question
InformationsquelleAutor technopeasant | 2011-04-19
  1. 6
    var curPlaying;

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

    Qui devrait fonctionner.

    EDIT:

    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;
    });
});
    • et je vous aime pour cela. Votre fonction joue les chansons tout en arrêtant les autres chansons parfaitement.. mais ce n'est plus interrompt la chanson qui joue, si vous cliquez sur nouveau.
    • Mon erreur, permettez-moi de clarifier. Le chargement de la page et tous les joueurs sont silencieuses, comme elles devraient l'être. En cliquant sur l'un joue de manière appropriée, et en cliquant sur un autre lors de sa lecture, pause de la première et de la joue de la nouvelle (parfait!). Le seul problème, c'est qu'en cliquant sur celui qui est en cours de lecture n'est plus la mettre en pause.
    • Je devine ici, mais essayez de le modifier à ma réponse que je viens de faire.
    InformationsquelleAutor mattsven
  2. 3

    Cette petite fonction qui fonctionne pour moi. Il arrête tous les autres éléments audio en jouant sur la page et permet à celui qui a été commencé à continuer à jouer. Ici est un violon.

     $("audio").on("play", function (me) {
         jQuery('audio').each(function (i,e) {
              if (e != me.currentTarget)
              { 
                  this.pause(); 
              }
         });
 });
    • Cela fonctionne parfaitement pour moi sur mon site web nallikayi.com. Cela peut être fait en javascript?
    InformationsquelleAutor Hagbourne