Receiving callbacks on a page with multiple audio instances

[di5ko]

Hi kolber,

Is it possible to bind events to multiple instances? I have an overview page of audio resources that I load correctly by just inserting some elements in the HTML. So far so good. I listen to events from the elements with some jQuery:

$("audio").bind("play", function(){
        console.log('Audio play');
        var mixtitle = $(this).attr('title');
        _gaq.push(['_trackEvent', 'Mixes', 'Play', mixtitle ]);
});

That works perfectly for a single page with 1 audio element. However on the overview page with more than 1 element, no events are triggered. Any hints/tips? Is it supported at all?

Thanks!

[di5ko]

Is this repo still being maintained?

[andymoyle]

I know this is old, but it may help you and or others! .ca_podcast_file is my class name for the wrapper of each audio instance. I've got soem ajax code to count plays in there too!

audiojs.events.ready(function() {
       var as = audiojs.createAll();

    jQuery(as).ready(function($) {
        $('.ca_podcast_file').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');

            /*now events will only be bound to this instance*/ 
            $audio.on('playing',function(){
                /* within event callbacks keep searches within the main container element*/                     
                var fileID=$audio.attr('id');
                var data = {file_id: fileID ,security:ChurchAdminAjax.security};

                jQuery.post(ChurchAdminAjax.ajaxurl, { 'action': 'ca_mp3_action','data':   data }, 
                    function(response){

                        $('.plays'+fileID).html(response);
                    }
                );

            });



        });

    });
});