Untitled

let progressInput = document.querySelector("#master-progress");
let timeElapsed = document.querySelector(".timeElapsed");
let timeLeft = document.querySelector(".timeLeft");

function addMasterControls() {
    // master volume
    setupRadialSlider(document.querySelector(`#master .volumeContainer`),
        // volume is 0-11, map 0-1
        value =>  { Sonorous.masterVolume = value/11 });

    setupRadialSlider(document.querySelector(`#master .rateContainer`),

        value =>  {
            Sonorous.sonors.forEach(sonor =>  sonor.playbackRate = value);    <-------
        });

    // play
    document.getElementById('play-btn').addEventListener('click', e => {
        let isPlaying = e.currentTarget.classList.contains('active');
        if (isPlaying) {
            e.currentTarget.classList.remove('active');
            Sonorous.sonors.forEach(sonor => {                                <-------
                p5.pause();
            });
        } else {
            e.currentTarget.classList.add('active');
            Sonorous.sonors.forEach(sonor => {                                <-------
                p5.play();
                sonor.volume = parseFloat(document.getElementById(`${sonor.id}-volume`).value) / 11;
            });
        }
    });

    // stop
    document.getElementById('stop-btn').addEventListener('click', () => {
        document.querySelector("#play-btn").classList.remove('active');
        Sonorous.sonors.forEach( sonor => {
            p5.stop();
        });
    });

    // loop
    document.getElementById(`master-loop`).addEventListener('click', e => {
        Sonorous.sonors.forEach(sonor => sonor.loop = !sonor.loop);
        e.currentTarget .classList.toggle('active');
    });


    document.getElementById('master-mute').addEventListener('click', () => {
      console.log(Sonorous.muteAll);
        Sonorous.muteAll = !Sonorous.muteAll;
    });

    let progressSonor = Sonorous.get('track-vocals');

    setInterval(()=>{
        if (progressSonor.isPlaying && progressSonor.duration !== 0) {
            let currentTime = progressSonor.playbackPosition;
            let percentComplete = currentTime / progressSonor.duration;
            updateProgressUI(percentComplete, progressSonor.duration);
        } else {
            updateProgressUI(0, null);
        }
    }, 100);


    progressInput.addEventListener('change', e=>{
        let newValue = e.currentTarget.value;
        if (progressSonor.isPlaying) {
            Sonorous.sonors.forEach(sonor => {
                sonor.seek(sonor.duration * newValue / 100)
            })
        }
    });

}

function setupTrackControls(sonor, trackId) {

    setupRadialSlider(document.getElementById(`${trackId}`),

        value =>  { sonor.volume = value/11 });


    document.getElementById(`${trackId}-mute`).addEventListener('click', () => {

        if (getSoloToggles().length == 0) {
            sonor.muted = !sonor.muted;
        }
    });


    document.getElementById(`${trackId}-solo`).addEventListener('click', () => {

        let soloToggles = getSoloToggles();


        if (soloToggles.length > 0){
            Sonorous.sonors.forEach(sonor => sonor.muted = !soloToggles.includes(sonor.id));
        } else {

            Sonorous.sonors.forEach(
                sonor => sonor.muted = document.querySelector(`#${sonor.id}-mute:checked`) !== null
            );
        }
    });



    document.getElementById(`${trackId}-fadeIn`).addEventListener('click', () => {
        let volumeInput = document.getElementById(`${trackId}-volume`);
        let fadeStartTime = Date.now();
        let fadeStartVolume = sonor.volume;

        let fadeInterval = setInterval(()=>{
            let volumePercent = (Date.now() - fadeStartTime) / 1000;
            if(volumePercent >= 0 && volumePercent <= 1){
                volumeInput.value = fadeStartVolume * 11 + volumePercent * ( 10 - fadeStartVolume * 11);
                volumeInput.dispatchEvent(new Event('change'));
            } else if (volumePercent >= 0) {
                volumeInput.value = 10;
                volumeInput.dispatchEvent(new Event('change'));
                clearInterval(fadeInterval)
            }

        }, 30);

        sonor.fade(10/11, 1);
    });


    document.getElementById(`${trackId}-fadeOut`).addEventListener('click', () => {
        let volumeInput = document.getElementById(`${trackId}-volume`);
        let fadeStartTime = Date.now();
        let fadeStartVolume = sonor.volume;

        let fadeInterval = setInterval(()=>{
            let volumePercent = 1 - (Date.now() - fadeStartTime) / 1000;
            if(volumePercent >= 0 && volumePercent <= 1){
                volumeInput.value = volumePercent * fadeStartVolume * 11;
                volumeInput.dispatchEvent(new Event('change'));
            } else if (volumePercent < 0) {
                volumeInput.value = 0;
                volumeInput.dispatchEvent(new Event('change'));
                clearInterval(fadeInterval)
            }

        }, 30);
    });

    sonor.fade(0, 1);
}

function setupRadialSlider(parentElement, onChange) {
    let input = parentElement.querySelector('input[type=range]');
    let knobJog = parentElement.querySelector('.jogContainer');
    let barActive = parentElement.querySelector('.barActive');
    let text = parentElement.querySelector('.dotDisplay');

    let rangeStart = parseFloat(input.getAttribute("min"));
    let rangeEnd = parseFloat(input.getAttribute("max"));

    knob(input, knobJog, {
        rangeInDegrees: 270,
        rangeStartDegree: 220,
        onUpdate: value => {
            let progress = (value - rangeStart) / (rangeEnd - rangeStart);
            let degrees = progress * 270 + 220;
            knobJog.style.transform = `rotate(${degrees}deg)`;
            barActive.style.strokeDashoffset = (1 - progress) * 191;
            text.innerHTML = value.toFixed(1);
            onChange(value);
        }
    });
}



function updateProgressUI(percentComplete, duration){
    let timeElapsedNumber;
    let timeLeftNumber;
    if (duration) {
        timeElapsedNumber = String(parseInt(percentComplete * duration)).padStart(2, '0');
        timeLeftNumber = String(parseInt(duration - duration * percentComplete)).padStart(2, '0');
        timeElapsed.innerHTML = `00:${timeElapsedNumber}`;
        timeLeft.innerHTML = `-00:${timeLeftNumber}`;
    } else {
        timeElapsed.innerHTML  = '--:--';
        timeLeft.innerHTML = '--:--';
    }

    progressInput.style.setProperty('--progress-percent', `${percentComplete*100}%`);
}

function getSoloToggles(){
    return Array.from(document.querySelectorAll('input[id$="solo"]:checked'))
        .map(el => el.id.substring(0, el.id.length-5));
}

if (Sonorous && Sonorous.isSupported()) {
    let trackMap = {
        'track-vocals': 'http://localhost:5500/audio per canal/Insert 1.wav',
        'track-guitars': 'http://localhost:5500/audio per canal/Insert 2.wav',
        'track-keys': 'http://localhost:5500/audio per canal/Insert 3.wav',
        'track-cello': 'http://localhost:5500/audio per canal/Insert 4.wav',
        'track-drums': 'http://localhost:5500/audio per canal/Insert 5.wav',
    };

    Object.keys(trackMap).forEach((trackId) => {
        let sonor = Sonorous.addSonor(trackMap[trackId], { id: trackId });
        setupTrackControls(sonor, trackId);
    });

    addMasterControls();
}