Problem its causing: I have an A/B application on my website that toggles between two players to A/B the audio. Its supposed to toggle at the same playback time and it does this in preview mode, but live it starts the song over whenever I toggle between the two players.
I noticed this after a wix update a couple months back. Does anybody have any thoughts on how to fix this?
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 = "<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 = +($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 = "<span style ='font-size:18px;color:#d1d1d1'>Raw Tracks</span]>";
$w('#text23').html = "<span style ='font-size:18px;color:#00ff00'>Mixed Tracks</span]>";
let sec = $w('#audioPlayer1').currentTime;
console.log(sec);
console.log(sec.toString());
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 = "<span style ='font-size:18px;color:red'>Raw Tracks</span]>";
$w('#text23').html = "<span style ='font-size:18px;color:#d1d1d1'>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(()=>{
});
});
});
});
});
}
}