Howler.js продолжительность загрузки

Question

У меня есть следующий скрипт, используя howler.js и jquery-ui-1.8.21.custom.min.js:

$(function(){
    var sounduser1 = new Howl({
        urls: ['studio/keysintheair.mp3', 'studio/keysintheair.ogg'],
        buffer:true,
        volume: 1.0,
        onend: function() {
            $('.buttons').fadeIn();
        },
    });
    var sounduser2 = new Howl({
        urls: ['studio/keysintheair-original.mp3'],
        buffer:true,
        volume: 0.1,
    });

    var thisArray = {
        user1: sounduser1,
        user2: sounduser2
    };

    $.each( thisArray, function(key,value) {
        $('.buildplayer .player').clone().attr('id',key).appendTo('#song');
        $('#song .player:last .waveform').css("width", value._duration + "px");
        $('#song .player:last .slider').slider({
            value: value.volume() * 100,
            range: "min",
            animate: true,
            orientation: "horizontal",
            //Slider Event
            slide: function(event, ui) { //When the slider is sliding
                var now_id = $(this).parent().parent('.player').attr('id');
                thisArray[now_id].volume(ui.value/100);
            },
        });
    });

    $('.mainplayer .trackslider').slider({
        value: 0,
        range: "min",
        animate: true,
        orientation: "horizontal",
        //Slider Event
        slide: function trackslider(event, ui) { //When the slider is sliding
            var audiogetlength = Object.keys( thisArray ).map(function ( key ) { return thisArray[key]._duration; });
            var longest = Math.max.apply( null, audiogetlength );
            var dividedlength = 100/ui.value;
            $.each( thisArray, function( key, value ) {
                value.pos(longest/dividedlength);
                if (ui.value > value._duration) {
                    value.stop();
                }
            });
        },
     });

    setInterval(function starttrackslider() {
        var dividedslider = sounduser1._duration/sounduser1.pos();
        $('.trackslider').slider('value', 100/dividedslider);
    },1000);

    //Single Audio Track Player
    $('.ex1-play').on('click', function(){
        var now_id = $(this).parent().parent('.player').attr('id');
        thisArray[now_id].stop().play();
    });
    $('.ex1-stop').on('click', function(){
        var now_id = $(this).parent().parent('.player').attr('id');
        thisArray[now_id].stop();
    });
    $('.ex1-loop').on('click', function(){
        var now_id = $(this).parent().parent('.player').attr('id');
        thisArray[now_id].loop(true);
    });

    //Main All Track Player
    $('.main-play').on('click', function(){
        $.each( thisArray, function( key, value ) {
        value.stop().play();
        $('.buttons').fadeOut();
        });
    });
    $('.main-pause').on('click', function(){
        $.each( thisArray, function( key, value ) {
        value.pause();
        });
    });
    $('.main-stop').on('click', function(){
        $.each( thisArray, function( key, value ) {
        value.stop();
        $('.buttons').fadeIn();
        });
    });
    $('.main-loop').on('click', function(){
        $.each( thisArray, function( key, value ) {
        value.loop(true);
        });
    });

});

В последней части $('.mainplayer .trackslider').slider({ }); ты найдешь if (ui.value > value._duration) {value.stop();}

value равняется вой под названием sounduser2

Обе аудиотреки запускаются одновременно. Использование слайдера заставит меня пропустить звук. Слайдер будет иметь длину самого длинного аудиотрека - который называется Howl sounduser1, Использование ползунка вернет число, которое активирует положение аудио.

Если ползунок возвращает число, превышающее фактическую длину аудиотрека, он должен остановить более короткую аудиотреку.

По какой-то причине он не перестанет играть, хотя ситуация и правильная. Есть кто-нибудь, кто знает, что делать?

Answer 1

$('.mainplayer .trackslider').slider({
        value: 0,
        range: "min",
        animate: true,
        orientation: "horizontal",
        //Slider Event
        slide: function (event, ui) { //When the slider is sliding
            var audiogetlength = Object.keys( thisArray ).map(function ( key ) { return thisArray[key]._duration; });
            var longest = Math.max.apply( null, audiogetlength );
            var dividedlength = 100/ui.value;
            $.each( thisArray, function( key, value ) {
                var percentvalue = (value._duration/longest)*100;
                if (percentvalue > ui.value) {
                    if (value.pos()==0) {
                        value.play().pos(longest/dividedlength);
                    } else {
                        value.pos(longest/dividedlength);
                    } 
                } else {
                        value.stop();
                }

            });
        }
    });

Сделал трюк