Howler.js duration onload - jquery-ui

Question

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?

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();
}
});
}
});
Did the trick