Comparative audio player working correctly in preview, but not live.

Ask the community
,
1

Hello,

I have an A/B audio player on my site and it has been working fine until recently. Its was designed to play a song on player A and then at the push of a button stop player A, and start playing Player B at the exact same time location (and visa versa). What happens now is that at the push of a button the players switch, as they are supposed to, but now the song starts over when it begins the play.

any help would be deeply appreciated. Thanks.

website: www. summationmix. com

here is the code:

let cats =;
let chk = false ;
$w.onReady( function () {
if (chk){ return ;}
chk = true ;
$w( ‘#audioPlayer2’ ).hide();
cats = wixData.query( “Choices” ).find().then((cat)=>{
let dbCats =;
cats = cat.items;
for ( let i= 0 ;i<cats.length;i++){
dbCats.push({
label: cats[i].name + " - " +cats[i].artist,
value: i + “” ,
});
}
$w( “#cat” ).options = dbCats;
$w( ‘#cat’ ).selectedIndex = 0 ;

    $w( '#mixer' ).checked =  **false** ; 
    $w( '#text22' ).html =  "<span style ='font-size:18px;color:red'>Raw Tracks</span]>" ; 
    $w( '#text23' ).html =  "<span style ='font-size:18px;color:#d1d1d1'>Mixed Tracks</span]>" ;

let i = 0 ;
$w( ‘#audioPlayer1’ ).src = cats[i].before;
$w( ‘#audioPlayer1’ ).artistName = cats[i].artist;
$w( ‘#audioPlayer1’ ).trackName = cats[i].name;
$w( ‘#audioPlayer1’ ).coverImage = cats[i].image
$w( ‘#audioPlayer2’ ).src = cats[i].after;
$w( ‘#audioPlayer2’ ).artistName = cats[i].artist;
$w( ‘#audioPlayer2’ ).trackName = cats[i].name;
$w( ‘#audioPlayer2’ ).coverImage = cats[i].image
$w( ‘#audioPlayer1’ ).seek( 0 ).then(()=>{
$w( ‘#audioPlayer2’ ).seek( 0 ).then(()=>{
});
});

});

});

export function cat_change(event) {

////Song selection change tracking////
wixWindow.trackEvent( “CustomEvent” , {
“event” : “Song Selection Change” ,
“eventCategory” : “Media Player” ,
“eventAction” : “Click - New Song Selection” ,
“eventLabel” : “New Song Selected”
} );
//////

if ($w( ‘#audioPlayer1’ ).hidden){
$w( ‘#audioPlayer2’ ).hide().then(()=>{
$w( ‘#audioPlayer1’ ).show();
});
$w( ‘#mixer’ ).checked = false ;
$w( ‘#text22’ ).html = “Raw Tracks</span]>” ;
$w( ‘#text23’ ).html = “Mixed Tracks</span]>” ;
}
let i = +($w( ‘#cat’ ).value);
$w( ‘#audioPlayer1’ ).src = cats[i].before;
$w( ‘#audioPlayer1’ ).artistName = cats[i].artist;
$w( ‘#audioPlayer1’ ).trackName = cats[i].name;
$w( ‘#audioPlayer1’ ).coverImage = cats[i].image
$w( ‘#audioPlayer2’ ).src = cats[i].after;
$w( ‘#audioPlayer2’ ).artistName = cats[i].artist;
$w( ‘#audioPlayer2’ ).trackName = cats[i].name;
$w( ‘#audioPlayer2’ ).coverImage = cats[i].image
$w( ‘#audioPlayer1’ ).seek( 0 ).then(()=>{
$w( ‘#audioPlayer2’ ).seek( 0 ).then(()=>{
});
});

}

export function mixer_change(event) {
if ($w( ‘#mixer’ ).checked){
$w( ‘#text22’ ).html = “Raw Tracks</span]>” ;
$w( ‘#text23’ ).html = “Mixed Tracks</span]>” ;
let sec = $w( ‘#audioPlayer1’ ).currentTime;
if (!($w( ‘#audioPlayer1’ ).isPlaying)){
$w( ‘#audioPlayer1’ ).hide().then(()=>{
$w( ‘#audioPlayer2’ ).show().then(()=>{
$w( ‘#audioPlayer2’ ).play().then(()=>{
$w( ‘#audioPlayer2’ ).seek(sec).then(()=>{
});
});
});
});
}
else {
$w( ‘#audioPlayer1’ ).stop().then(()=>{
$w( ‘#audioPlayer1’ ).hide().then(()=>{
$w( ‘#audioPlayer2’ ).show().then(()=>{
$w( ‘#audioPlayer2’ ).play().then(()=>{
$w( ‘#audioPlayer2’ ).seek(sec).then(()=>{
});
});
});
});
});
}
}
else {
$w( ‘#text22’ ).html = “Raw Tracks</span]>” ;
$w( ‘#text23’ ).html = “Mixed Tracks</span]>” ;
let sec = $w( ‘#audioPlayer2’ ).currentTime;
if (!($w( ‘#audioPlayer2’ ).isPlaying)){
$w( ‘#audioPlayer2’ ).hide().then(()=>{
$w( ‘#audioPlayer1’ ).show().then(()=>{
$w( ‘#audioPlayer1’ ).play().then(()=>{
$w( ‘#audioPlayer1’ ).seek(sec).then(()=>{
});
});
});
});
}
$w( ‘#audioPlayer2’ ).stop().then(()=>{
$w( ‘#audioPlayer2’ ).hide().then(()=>{
$w( ‘#audioPlayer1’ ).show().then(()=>{
$w( ‘#audioPlayer1’ ).play().then(()=>{
$w( ‘#audioPlayer1’ ).seek(sec).then(()=>{
});
});
});
});
});
}
}