jQuery HTML5音頻播放器的多個實例

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（人工兄弟），但只有最后編寫的腳本才會真正起作用。 關於如何在頁面上多次調用播放器的任何想法都會很棒！

//卡斯帕

編輯：根據@charlieftl給出的信息，我的代碼現在看起來像這樣：

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

通過使用jQuery選擇器判斷我懷疑你在頁面中重復元素ID。 ID必須是唯一的，因此大多數選擇器應該只反映元素的實際ID。 當元素具有ID時，從來沒有任何理由在更高級別啟動選擇器... ID本身是最有效的選擇器

從您的代碼Eaxmple：

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

應該：

    jQuery('#loading');

要解決您的問題，您需要將重復ID更改為類。 將音頻的每個html實例包含在具有公共類的容器中

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

現在，您可以使用$.each所有這些實例。 在循環內，您始終只搜索該實例中的元素。

以下不是對所有代碼的完全重寫，但足以設置一個模式，允許您保持實例彼此隔離

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

            });
    });