如何用js加载我的页面上的所有音频文件

Question

我试图用js生成所有音频文件的文件路径，但我的脚本不像我预期的那样工作。下面是我的文件结构:

- 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

正如你所看到的，只有12个文件名重复，只有文件夹名改变。我收集了这个对象中所有可能的文件名和文件夹名

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'
}

生成如下路径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])
}

但是我收到的只是一个文件夹

的文件名

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

似乎所有的for循环只作用一次，只有notes()函数遍历所有的pth。指出数组。有人能给我解释一下这种行为吗?我愿意听取你的解决方案

Answer 1

您需要在每个函数中分别假定或允许i变量，因为它已被前一个值覆盖。请检查下面的代码或检查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);