Music loop sequencer

How do I...?
1

Hi, i want to create a music loop sequence machine .is there a simpler way to create a sequencer (looping function) using JUST conditions and actions or will javascript be needed. If so, how would the code be added to Gdevelop? Thanks so much !!

function track() {
    //instruments and their sounds
    const kick = new Tone.Player('./Samples/kick-tape.wav').toMaster();
    const snare = new Tone.Player('./Samples/snare-tape.wav').toMaster();
    const hihat = new Tone.Player('./Samples/hihat-808.wav').toMaster();
    const clap = new Tone.Player('./Samples/clap-tape.wav').toMaster();

    let index = 0; //counter
    
    //play/pause button
    const pow = document.querySelector('.powerButton').addEventListener('click', playpause);
    Tone.Transport.scheduleRepeat(rep, '8n');

    function playpause() {
        Tone.Transport.toggle();
        event.target.classList.toggle('powerPush');
    }


    //clear button
    var actButs = document.getElementsByClassName('allButs');
    const clr = document.querySelector('.clearButton').addEventListener('click', clear);

    function clear() {
        [].forEach.call(actButs, function(e) {
            e.classList.remove('active');
        });

        event.target.classList.toggle('clearPush');
    }


    //drum selection
    const buts = document.querySelectorAll('.allButs');
    for (i = 0; i < buts.length; ++i) {
        buts[i].addEventListener('click', toggle);
    }

    function toggle() {
        event.target.classList.toggle('active');
    }

    
    //looping function
    function rep(){
        let step = (index % 8) + 1;
        console.log(step);
        let kickIn = document.querySelector(`.kickButs input:nth-child(${step})`);
        if (kickIn.classList.contains('active')) {
            kick.start();

        }

        let snareIn = document.querySelector(`.snareButs input:nth-child(${step})`);
        if (snareIn.classList.contains('active')) {
            snare.start();
        }
        
        let hihatIn = document.querySelector(`.hihatButs input:nth-child(${step})`);
        if (hihatIn.classList.contains('active')) {
            hihat.start();
        }
        
        let clapIn = document.querySelector(`.clapButs input:nth-child(${step})`);
        if (clapIn.classList.contains('active')) {
            clap.start();
        }

        //dot counter functionality
        let dotCounter = document.querySelector(`.dot:nth-child(${step})`); //light up counter when beat is on it
        dotCounter.classList.add('dotOn');

        if (step != 1) {
            dotKill = document.querySelector(`.dot:nth-child(${step - 1})`); //remove class of previously lit button
            
            dotKill.classList.remove('dotOn');
        } else {
            dotCounter = document.querySelector(`.dot:nth-child(${8})`); //if first button is lit, dim the last button
            dotCounter.classList.remove('dotOn');
        }

        console.log(step);

        index++;
    }

    //tempo
    const tempoSlider = document.querySelector('.tempoSlide');
    const tempoTrack = document.querySelector('.tempoNum');
    
    tempoSlider.addEventListener('input', tempoOut);
    function tempoOut() {
        tempoTrack.innerHTML = tempoSlider.value;
        Tone.Transport.bpm.value = tempoSlider.value;
    }

    //volume
    const volSlide = document.querySelector('.volumeSlide');
    const volTrack = document.querySelector('.volumeNum');
    volSlide.addEventListener('input', volOut);
    
    function volOut() {
        volTrack.innerHTML = `${volSlide.value} dB`;
        Tone.Master.volume.value = volSlide.value;
    }
}

track();
2

Hi,
Make a variable beat, play the sounds activated for first beat, increase beat by one, play the sounds, increase beat, etc… and when beat = 15, make beat =0, and you have a loop.

3

Thanks for the reply Gruk !
I made a test version.
The red active circle are hidden at the beginning. Left click on the black squares will show red active circle, Right click will hide red active circle.
Blue square plays the audio. Each red active circle is meant to play the same sound, in this case a kick drum. I tried to set up a beat variable but all the sounds play at once. I am pretty new to this…any suggestions what i should do or change ?

Thanks !!!

14
143354×756 301 KB

4

27
273330×1688 504 KB

5

43

6

There are several problems here, among which:

  • each sound needs a separate beat number, or they’ll all play together.
  • you need to add 1 to the variable for each beat, so the value goes 1,2,3,4.
  • if an object is hidden, you can still put your cursor on it. it’s not visible, but still there.

I would advise you to test each and every change you make to your game to avoid multiple bugs which are hard to solve.

Also, I’d like to note that you are doing things in a very inefficient manner. Several identical events usually means there’s a better way to proceed.
There are tools that are meant to avoid these repetitive events, among which: object groups, “for each” events, “create objects from a name”, and object variables.
I recommend you to read the wiki page of each. When you understand what they do and how to use them, you will have new building blocks to make a much bigger and sturdier castle :slight_smile: Imagine when you’ll want to have 16 or 32 beats. :blush:

7

After reading the docs I made a simpler version and I tried to set the variables you mentioned but I kept getting no sound.
Could you show me a quick example of what conditions and action to use for this example. I know im missing something and once I figure this out, 32 bars here we come !!!

Thanks Gruk, appreciate all your help !!!

20
203066×1848 515 KB