Mediaelement.js, using API to time animation to audio

Question

I'm trying to play some jQuery animations based on where I am in the audio track. I need to match lots of 'flying letters' to audio voice tracks (sort of Flash/Powerpoint style).

I am using mediaelement.js: http://mediaelementjs.com/

How would I go about timing animation to audio? In my Fiddle, they both run, but they aren't tied together. Thus if the audio loads slowly, the animation will be out of sync. Or vice versa.

Fiddle: http://jsfiddle.net/x4t9Z/3/

Maybe I could use currentTime (get) or progress() from the mediaelement API, but I always get undefined for value.

    function fadein() {

    //var audiotime = player.currentTime(get);
    //alert (audiotime);

    var t = $('.activeslide').find('.animated').data('times');
    if (t) {
        $('.animated').find('.fadein').hide();
        var anima = $('.activeslide').find('.animated').find('.fadein');
            var i;
            for (i = 0; i < t.length; i++) {
                 anima.eq(i).delay(t[i]).fadeIn(220);
            }
    }
}

Answer 1

hope I'm not late at the party :) , here you go [fiddle]

What you can do is

(function ($) {
    $('.fadein').hide();

    //player
    var player = new MediaElementPlayer('#player', {
        pauseOtherPlayers: true,
        success: function (mediaElement, domObject) {
            var lastUpdatedT = 0;
            mediaElement.addEventListener('pause', function (e) {
            }, false);

            mediaElement.addEventListener('timeupdate', function (e) {

                if (mediaElement.paused) return;

                if (typeof fadein == "function") {
                    var currentT = Math.floor(mediaElement.currentTime);

                    if (!(currentT == lastUpdatedT)) {
                        fadein(currentT);
                        lastUpdatedT = currentT;
                    }
                }
            }, false);

            // call the play method
            mediaElement.play();
        },
        error: function () {}
    });
    player.pause();
    player.play();


    //animation
    function fadein(time) {
        var t = $('.activeslide').find('.animated').data('times');
        var cIndex = $.inArray(time, t);

        if (cIndex >= 0) {
            //Uncomment below if you want to show animation in same single line or you can also have a fade out time array
            //$('.animated').find('.fadein').hide();
            var anima = $('.activeslide').find('.animated').find('.fadein');
            anima.eq(cIndex).show();
        }
    }

})(jQuery);