Medialement.js，使用API将时间动画与音频进行

Question

我正在尝试根据音轨中的位置播放一些jQuery动画。我需要将许多"飞行字母"与音轨（类似于闪存/PowerPoint样式）匹配。

我正在使用Medialement.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

希望我不会在聚会上迟到:)，你去[小提琴]

您可以做的是

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