0

I have the following script, using howler.js and 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);
        });
    });

});

At the last part of $('.mainplayer .trackslider').slider({ }); you will find if (ui.value > value._duration) {value.stop();}

value equals the Howl called sounduser2

Both audiotracks start at the same time. Using a slider will make me skip through the audio. The slider will have the length of the longest audiotrack - which is Howl called sounduser1. Using the slider will return a number which will activate the position of the audio.

If the slider returns a number bigger then the actual length of the audiotrack it should stop the shorter audiotrack.

For some reason it won't stop playing, eventhough the situation is right. Is there anybody who knows what to do?

1 Answer 1

0
$('.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();
                }

            });
        }
    });

Did the trick

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.