複数のインスタンス

Question

私はここで見つけるガイドに従ってのjQueryを使用して、カスタムHTML5オーディオプレーヤーを構築しました：次のようhttp://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/

私のスクリプトは次のとおりです。

jQuery(document).ready(function() { 

     audio = jQuery('div#artificial-brothers audio').get(0); 
     loadingIndicator = jQuery('div#artificial-brothers #loading'); 
     positionIndicator = jQuery('div#artificial-brothers #handle'); 
     timeleft = jQuery('div#artificial-brothers #timeleft'); 

     if ((audio.buffered != undefined) && (audio.buffered.length != 0)) { 
      jQuery(audio).bind('progress', function() { 
       var loaded = parseInt(((audio.buffered.end(0)/audio.duration) * 100), 10); 
       loadingIndicator.css({width: loaded + '%'}); 
      }); 
     } else { 
      loadingIndicator.remove(); 
     } 

     jQuery(audio).bind('timeupdate', function() { 

      var rem = parseInt(audio.duration - audio.currentTime, 10), 
        pos = (audio.currentTime/audio.duration) * 100, 
        mins = Math.floor(rem/60,10), 
        secs = rem - mins*60; 

      timeleft.text('-' + mins + ':' + (secs < 10 ? '0' + secs : secs)); 
      //if (!manualSeek) { 
       positionIndicator.css({width: pos + '%'}); 
      // } 
      //if (!loaded) { 
      // loaded = true; 

      jQuery('div#artificial-brothers #gutter').slider({ 
       value: 0, 
       step: 0.01, 
       orientation: "horizontal", 
       range: "min", 
       max: audio.duration, 
       animate: true,   
       slide: function() {    
        manualSeek = true; 
       }, 
       stop:function(e,ui) { 
        manualSeek = false;   
        audio.currentTime = ui.value; 
       } 
      }); 

     }).bind('play',function(){ 
      jQuery('div#artificial-brothers #playtoggle').addClass('playing');  
     }).bind('pause ended', function() { 
      jQuery('div#artificial-brothers #playtoggle').removeClass('playing');  
     });  

     jQuery('div#artificial-brothers #playtoggle').click(function() {    
      if (audio.paused) { audio.play(); } 
      else { audio.pause(); }   
     }); 

     jQuery('div#artificial-brothers #stoptoggle').click(function() {    
      if (audio.play) { audio.pause(); } 
      audio.currentTime = 0;  
     }); 
}); 

私の問題は、ということです私は同じページ上で前記のプレーヤーの複数のインスタンスを実行する必要があり、私はこれを達成するように見えません。スクリプトのコピー/貼り付けとid（人工兄弟）の変更を試みましたが、最後に書き込まれたスクリプトのみが実際に動作します。どのようにプレイヤーをページ上で複数回呼び出すかについてのアイデアは素晴らしいでしょう！

//カスパー

EDIT：@charlieftlによって与えられた情報によると、私のコードは次のようになります。

私はあなたが要素のIDを繰り返している疑いがあるjQueryのセレクターの使用によって判断

jQuery(document).ready(function() { 

    jQuery('.player').each(function(){ 

     var container = jQuery(this); 
     var audio = container.find('audio').get(0); 
     var loadingIndicator = container.find('.loading'); 
     var positionIndicator = container.find('.handle'); 
     var slider = container.find('.gutter'); 
     var timeleft = container.find('.timeleft'); 

     if ((audio.buffered != undefined) && (audio.buffered.length != 0)) { 
      jQuery(audio).bind('progress', function() { 
       var loaded = parseInt(((audio.buffered.end(0)/audio.duration) * 100), 10); 
       loadingIndicator.css({width: loaded + '%'}); 
      }); 
     } else { 
      loadingIndicator.remove(); 
     } 

     jQuery(audio).bind('timeupdate', function() { 

      var rem = parseInt(audio.duration - audio.currentTime, 10), 
        pos = (audio.currentTime/audio.duration) * 100, 
        mins = Math.floor(rem/60,10), 
        secs = rem - mins*60; 

      timeleft.text('-' + mins + ':' + (secs < 10 ? '0' + secs : secs)); 
      //if (!manualSeek) { 
       positionIndicator.css({width: pos + '%'}); 
      // } 
      //if (!loaded) { 
      // loaded = true; 

      slider.slider({ 
       value: 0, 
       step: 0.01, 
       orientation: "horizontal", 
       range: "min", 
       max: audio.duration, 
       animate: true,   
       slide: function() {    
        manualSeek = true; 
       }, 
       stop:function(e,ui) { 
        manualSeek = false;   
        audio.currentTime = ui.value; 
       } 
      }); 
     }); 

     container.find('.playtoggle').click(function() {    
      if (audio.paused) { audio.play(); } 
      else { audio.pause(); }   
     }); 

     container.find('.stoptoggle').click(function() {    
      if (audio.play) { audio.pause(); } 
      audio.currentTime = 0;  
     }); 

     jQuery(audio).bind('play',function(){ 
      container.find('.playtoggle').addClass('playing');  
     }); 

     jQuery(audio).bind('pause ended', function() { 
      container.find('.playtoggle').removeClass('playing');  
     }); 
    }); 

}); 

Answer 1

あなたのページにIDは一意でなければならないので、ほとんどのセレクタは要素の実際のIDのみを反映する必要があります。要素がIDを持っている場合には、より高いレベルでのセレクタを起動する理由は決してありません... ID自体は、あなたのコードから、最も効率的なセレクタ利用可能

Eaxmpleです：

jQuery('div#artificial-brothers #loading'); 

はする必要があります：

jQuery('#loading'); 

問題を回避するには、繰り返しIDをクラスに変更する必要があります。今、あなたは$.eachを使用してこれらのインスタンスのすべてをループをすることができます

<div class="audio_wrap"> 
     <!--All html associated with a single audio--> 
    </div> 

共通クラスをコンテナにオーディオ用のHTMLインスタンスのそれぞれを包みます。ループ内では、常にそのインスタンス内の要素のみを検索します。

後は、すべてのコードの完全な書き直しではありませんが、あなたがこのおよびそれに応じて変更された私のコードを互いに

$('.audio_wrap').each(function(){ 

      /* cache the container instance in a variable*/ 
      var $container=$(this); 
      /* searching within the container instance for each 
      component insulates multiple instances on page*/ 

      var $audio= $container.find('audio'); 
      var $slider=$container.find('.sliderClass'); 

      /*now events will only be bound to this instance*/ 
      $audio.bind('play',function(){ 
       /* within event callbacks keep searches within the main container element*/      
       $container.find('.playtoggleClass').addClass('playing'); 

      }); 
    });