Mediaelement.js，使用API​​将动画定时到音频

Question

我正在尝试根据我在音轨中的位置播放一些jQuery动画。我需要将许多“飞信”与音频音轨（Flash / Powerpoint风格）相匹配。

我正在使用mediaelement.js：http://mediaelementjs.com/

我如何计时动画到音频？在我的小提琴中，他们都跑了，但他们并没有捆绑在一起。因此，如果音频加载缓慢，动画将不同步。或相反亦然。

小提琴：http://jsfiddle.net/x4t9Z/3/

也许我可以使用来自mediaelement API的currentTime（get）或progress（），但我总是得到未定义的值。

    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

希望我在聚会上不迟到:)，here you go [fiddle]

你能做的是

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