jQuery

Question

के माध्यम से एक समय में एक HTML5 ऑडियो तत्व को चलाएं और रोकें मेरे पास एक पृष्ठ पर कई HTML5 ऑडियो तत्व हैं और मैं उन्हें चलाने और रोकने के लिए jQuery का उपयोग कर रहा हूं। नाटक और विराम कार्य उचित रूप से काम करते हैं, लेकिन ट्रैक एक ही समय में खेला जा सकता है।

मैं इस कोड को फिर से लिख सकता हूं ताकि एक समय में केवल एक ही गीत खेला जा सके? यही है .. अगर कोई खेल रहा है और आप दूसरे पर क्लिक करते हैं, तो पिछले को रोकें और सबसे हालिया क्लिक चलाएं।

धन्यवाद!

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> 

जावास्क्रिप्ट: (कि काम करता है, लेकिन निभाता है/व्यक्तिगत रूप से रुक जाता है)

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

जावास्क्रिप्ट: (मेरा बदसूरत अवधारणा)

$(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(); 
    }); 
}); 

Answer 1

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; 
    }); 
}); 

यह काम करना चाहिए।

संपादित करें:

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; 
    }); 
}); 

Answer 2

इस छोटे समारोह मेरे लिए काम करता है। यह पृष्ठ पर चल रहे सभी अन्य ऑडियो तत्वों को रोकता है और जो शुरू किया गया है उसे खेलने देता है। Here एक पहेली है।

$("audio").on("play", function (me) { 
     jQuery('audio').each(function (i,e) { 
       if (e != me.currentTarget) 
       { 
        this.pause(); 
       } 
     }); 
});