How to load all audio files on my page with js

i am trying to generate file paths to all audio files with js, but my script isn’t work as i expected. Here is my file structure:

- audio/
   - 36/
      - 3/
         - maj/
            - c.mp3
            - cis.mp3
            - d.mp3
            - dis.mp3
            - e.mp3
            - f.mp3
            - fis.mp3
            - g.mp3
            - gis.mp3
            - a.mp3
            - b.mp3
            - h.mp3
         - min/
            - c.mp3
            - cis.mp3
            - d.mp3
            - dis.mp3
            - e.mp3
            - f.mp3
            - fis.mp3
            - g.mp3
            - gis.mp3
            - a.mp3
            - b.mp3
            - h.mp3
      - 6/
         - maj/
            - c.mp3
            - cis.mp3
            - d.mp3
            - dis.mp3
            - e.mp3
            - f.mp3
            - fis.mp3
            - g.mp3
            - gis.mp3
            - a.mp3
            - b.mp3
            - h.mp3
         - min/
            - c.mp3
            - cis.mp3
            - d.mp3
            - dis.mp3
            - e.mp3
            - f.mp3
            - fis.mp3
            - g.mp3
            - gis.mp3
            - a.mp3
            - b.mp3
            - h.mp3

https://github.com/TonnyHawk/solfege/tree/main/%23src/audio/36

As you can see there are only 12 filenames that repeated and only folder names change. i collected all posible file and folder names in this object

   let pth = {
      audioFolder: 'audio',
      section: ['36'],
      interval: ['3','6'],
      type: ['maj','min'],
      bassNote: [
         'c',
         'cis',
         'd',
         'dis',
         'e',
         'f',
         'fis',
         'g',
         'gis',
         'a',
         'b',
         'h',
      ],
      octave: [1],
      ext: '.mp3'
   }

and supposed to generate paths like this audio / 36 / 3 / maj / octaves / 1 / a.mp3

     let paths = [];
     let it = 0;

     sections(audioFolder + '/');

     function sections(path){// should recieve audio/
        let str;
        for(i = 0; i < pth.section.length; i++){
           str = path;
           str += pth.section[i];
           str += '/';
           console.log('sections')
           intervals(str);
        }
     }

     function intervals(path){// should recieve audio/36
        let str;
        for(i = 0; i < pth.interval.length; i++){
           str = path;
           str += pth.interval[i];
           str += '/';
           console.log('intervals')
           types(str);
        }
     }

     function types(path){// should recieve audio/36/3/
        let str;
        for(i = 0; i < pth.type.length; i++){
           str = path;
           str += pth.type[i];
           str += '/';
           console.log('types')
           octaves(str)
        }
     }
     

     function octaves(path=path+'octaves/'){// should recieve audio/36/3/maj/
        let str;
        for(i = 0; i < pth.octave.length; i++){
           str = path;
           str += pth.octave[i];
           str += '/';
           console.log('octaves')
           notes(str);
        }
     }

     function notes(path){// should recieve audio/36/3/maj/octaves/1/
        let str;
        for(i = 0; i < bassNote.length; i++){
           str = path;
           str += pth.bassNote[i];
           str += ext;

           console.log('notes')

           paths[it] = str;
           it = it + 1;
        }  
     }

     for(i = 0; i < paths.length; i++){
        console.log(paths[i])
     }

but all that i recieving is just filenames for only one folder

audio/36/3/maj/1/c.mp3
audio/36/3/maj/1/cis.mp3
audio/36/3/maj/1/d.mp3
audio/36/3/maj/1/dis.mp3
audio/36/3/maj/1/e.mp3
audio/36/3/maj/1/f.mp3
audio/36/3/maj/1/fis.mp3
audio/36/3/maj/1/g.mp3
audio/36/3/maj/1/gis.mp3
audio/36/3/maj/1/a.mp3
audio/36/3/maj/1/b.mp3

seems like all for loops acting just one time and only notes() function goes through all pth.notes array. Can someone explain me this behaviour? I am open to hear your solutions

Answer

You need to assume or let the i variable in each function separately because it’s overridden by the previous value. Please check the below code or check js fiddle

let pth = {
      audioFolder: 'audio',
      section: ['36'],
      interval: ['3','6'],
      type: ['maj','min'],
      bassNote: [
         'c','cis','d','dis','e','f','fis',
         'g','gis','a','b','h',
      ],
      octave: [1,2],
      ext: '.mp3'
   }
   
   let paths = [];

     sections(pth.audioFolder + '/');

     function sections(path){// should recieve audio/
        let str, i;
        for(i = 0; i < pth.section.length; i++){
           str = path;
           str += pth.section[i];
           str += '/';
           intervals(str);
        }
     }

     function intervals(path){// should recieve audio/36
        let str, i;
        for(i = 0; i < pth.interval.length; i++){
           str = path;
           str += pth.interval[i];
           str += '/';
           types(str);
        }
     }

     function types(path){// should recieve audio/36/3/
        let str, i;
        for(i = 0; i < pth.type.length; i++){
           str = path;
           str += pth.type[i];
           str += '/';
           octaves(str)
        }
     }
     

     function octaves(path){// should recieve audio/36/3/maj/
        let str, i;
        for(i = 0; i < pth.octave.length; i++){
           str = path;
           str += 'octaves/';
           str += pth.octave[i]+'/';
           notes(str);
        }
     }

     function notes(path){// should recieve audio/36/3/maj/octaves/1/
        let str, i;
        for(i = 0; i < pth.bassNote.length; i++){
           str = path;
           str += pth.bassNote[i];
           str += pth.ext;
           paths.push(str);
        }  
     }
         
     for(i = 0; i < paths.length; i++){
        console.log(paths[i])
     }
     console.log('Total Path: ' + paths.length);