jquery - 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 (artificial-brothers)，但只有最后编写的脚本才能真正起作用。任何有关如何在页面上多次调用玩家的想法都很棒!

//卡斯帕

编辑:根据@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 必须是唯一的，因此大多数选择器应该只反射(reflect)元素的实际 ID。当一个元素有一个 ID 时，就没有任何理由在更高级别启动选择器...ID 本身是可用的最有效的选择器

您的代码示例:

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

应该是:

    jQuery('#loading');

要解决您的问题，您需要将重复 ID 更改为类。将音频的每个 html 实例包装在具有公共(public)类的容器中

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

            });
    });