모두를 jQuery 및 HTML5 오디오로 바꾸기

Question

"투표 패널"에 동적 번호 (활성으로 표시된 많은 데이터베이스)를로드하는 페이지가 있는데 이미지와 광고 및 투표로 투표중인 아티스트의 오디오 클립 특히 잘하는. 일부 jQuery를 함께 사용하여 재생 버튼을 활성화했습니다. 클릭하면 올바른 클립이 시작되고 정지 버튼으로 src.replaced됩니다. 정지 버튼을 클릭하면 클립이 멈추고 재생 버튼이 돌아옵니다. 또한 한 번에 하나의 클립 만 재생되도록 다른 재생 버튼을 클릭하면 재생 클립을 STOP으로 가져올 수있었습니다.

그러나, 내가 알아낼 수없는 것은 재생 중이었고 다른 재생 버튼에 의해 중단 된 정지 버튼을 재생 버튼으로 다시 변경하는 방법입니다.

사이트는 테스트 중이지만 발견되지 않은 예술가와 함께 월요일에 생방송으로 설정됩니다. 그래서 이것을 알아야합니다. 내 딜레마를 http://dev.edrtrust.com/play/index.php/ppm/artist_faceoff에서 볼 수 있습니다. 당신은 단지 '정지'라고 한 번에 하나의 버튼이 필요하면

$("img.btnPlay").live('click', function() { 
    var thisPID = $(this).attr('name'); 
    this.src = this.src.replace("<?= base_url(); ?>assets/images/playThis.png", 
     "<?= base_url(); ?>assets/images/stopThis.png"); 
    $(this).removeClass("btnPlay").addClass("btnStop"); 
    $.ajax({ 
     type: "POST", 
     url: "<?php echo site_url('ppm/getVoteClip'); ?>", 
     data: { 
      id: thisPID 
     }, 
     success: function (msg) { 
      $("#clip").empty().html(msg); 
      var plyr0 = document.getElementById('faceoffAudio0'); 
      plyr0.play(); 
     } // end success 
    }); // end ajax 
}); // end play button 

및

$("img.btnStop").live('click', function() { 
    var plyr0 = document.getElementById('faceoffAudio0'); 
    plyr0.pause(); 
    this.src = this.src.replace("<?= base_url(); ?>assets/images/stopThis.png", 
     "<?= base_url(); ?>assets/images/playThis.png"); 
    $(this).removeClass("btnStop").addClass("btnPlay"); 
}); // end stop button 

Answer 1

, 당신은 단지 어떤 버튼을 확인할 수 있습니다 : 여기

내 jQuery 코드입니다 .btnStop 클래스로 변경하고 재생 버튼으로 변경하십시오.

$("img.btnPlay").live('click', function() { 

    // update buttons on other players 
    $(".btnStop").each(function(index, element){ 
     element.src = element.src.replace("<?= base_url(); ?>assets/images/stopThis.png", 
     "<?= base_url(); ?>assets/images/playThis.png"); 
     $(element).removeClass("btnStop").addClass("btnPlay"); 
    }); 
    // end update buttons on other players 

    var thisPID = $(this).attr('name'); 
    this.src = this.src.replace("<?= base_url(); ?>assets/images/playThis.png", 
     "<?= base_url(); ?>assets/images/stopThis.png"); 
    $(this).removeClass("btnPlay").addClass("btnStop"); 

    $.ajax({ 
     type: "POST", 
     url: "<?php echo site_url('ppm/getVoteClip'); ?>", 
     data: { 
      id: thisPID 
     }, 
     success: function (msg) { 
      $("#clip").empty().html(msg); 
      var plyr0 = document.getElementById('faceoffAudio0'); 
      plyr0.play(); 
     } // end success 
    }); // end ajax 
}); // end play button