Dans un simple lecteur mp3 jQuery, j'ai un bouton pour charger des fichiers

  <button type="button" class="nes-btn is-primary" onclick="chooseMusic()">Add</button>

Les fonctions jQuery pertinentes sont les suivantes

let songData = {
  path: [],
  title: []
};
let audioPlayer = $("audio").get(0);
let playing = false;
let currentIndex = 0;
let timer = null;

function chooseMusic() {
  $("input").click();
}

function musicSelected() {
  let files = $("input").get(0).files;
  console.log(files);

  for (let i = 0; i < files.length; i++) {
    let {path} = files[i];
    mm.parseFile(path, {
      native: true
    }).then(metadata => {
      songData.path[i] = path;
      songData.title[i] = metadata.common.title;

      let songRow = `
            <tr ondblclick="playSong(${i})">
                <td>${metadata.common.title}</td>
                <td>${metadata.common.artist}</td>
                <td>${secondsToTime(metadata.format.duration)}</td>
            </tr>
            `;

      $("#table-body").append(songRow);
    });
  }
}

Maintenant, si j'ajoute plus de chansons après l'opération d'ajout initiale, elles s'affichent toutes correctement dans le tableau html mais le tableau qui contient les informations de chemin d'accès pour le fichier à charger est écrasé.

Dans l'exemple ci-dessous, vous pouvez voir la console génère 3 opérations d'ajout différentes:

0: File {name: "03 Take My Hand (Freddy@Disco Radio Edit).mp3", path: ".david/musik/mp3/03 Take My Hand (Freddy@Disco Radio Edit).mp3", lastModified: 1573134194616, lastModifiedDate: Thu Nov 07 2019 14:43:14 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
1: File {name: "01 Almeno stavolta.mp3", path: ".david/musik/mp3/01 Almeno stavolta.mp3", lastModified: 1573134333350, lastModifiedDate: Thu Nov 07 2019 14:45:33 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
2: File {name: "01 Dancing Is Like Heaven (Single Mix) [feat. Yas].mp3", path: ".david/musik/…ncing Is Like Heaven (Single Mix) [feat. Yas].mp3", lastModified: 1573134290426, lastModifiedDate: Thu Nov 07 2019 14:44:50 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
3: File {name: "08 Take My Hand (DJ Maraach Remix).mp3", path: ".david/musik/mp3/08 Take My Hand (DJ Maraach Remix).mp3", lastModified: 1573134220015, lastModifiedDate: Thu Nov 07 2019 14:43:40 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
length: 4
__proto__: FileList
29
index.js:102 tick
index.js:18 
FileList {0: File, 1: File, length: 2}
0: File {name: "01 Carry You.m4a", path: ".david/musik/mp3/01 Carry You.m4a", lastModified: 1573133939823, lastModifiedDate: Thu Nov 07 2019 14:38:59 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
1: File {name: "05 Mercury May.mp3", path: ".david/musik/mp3/05 Mercury May.mp3", lastModified: 1573133848536, lastModifiedDate: Thu Nov 07 2019 14:37:28 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
length: 2
__proto__: FileList
231
index.js:102 tick
index.js:67 0
42
index.js:102 tick
index.js:67 1
935
index.js:102 tick
index.js:18 
FileList {0: File, 1: File, 2: File, 3: File, 4: File, 5: File, length: 6}
0: File {name: "01 Mad About You.mp3", path: ".david/musik/mp3/01 Mad About You.mp3", lastModified: 1572570292000, lastModifiedDate: Fri Nov 01 2019 02:04:52 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
1: File {name: "04 Sit and Wait.mp3", path: ".david/musik/mp3/04 Sit and Wait.mp3", lastModified: 1572570182000, lastModifiedDate: Fri Nov 01 2019 02:03:02 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
2: File {name: "01 Wavin' Flag (Coca-Cola Celebration Mix).mp3", path: ".david/musik/mp3/01 Wavin' Flag (Coca-Cola Celebration Mix).mp3", lastModified: 1572487402000, lastModifiedDate: Thu Oct 31 2019 03:03:22 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
3: File {name: "05 Land of Dreaming.mp3", path: ".david/musik/mp3/05 Land of Dreaming.mp3", lastModified: 1572487316000, lastModifiedDate: Thu Oct 31 2019 03:01:56 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
4: File {name: "02 Solo.mp3", path: ".david/musik/mp3/02 Solo.mp3", lastModified: 1572487132000, lastModifiedDate: Thu Oct 31 2019 02:58:52 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
5: File {name: "10 Postcards.mp3", path: ".david/musik/mp3/10 Postcards.mp3", lastModified: 1572486513000, lastModifiedDate: Thu Oct 31 2019 02:48:33 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
length: 6
__proto__: FileList

Maintenant, si je clique par exemple pour "prendre ma main" (le premier fichier que j'ai ajouté), il jouera à la place "Mad about you" car il a repris la position 0 du tableau.

Alors, comment puis-je changer ma fonction jQuery pour m'assurer que lorsque j'ajouterai de nouveaux fichiers, il les ajoutera au même tableau sans écraser la clé?

1
devnull 7 nov. 2019 à 17:14

1 réponse

Je vous suggère de changer un peu votre code.

Au lieu d'avoir un objet avec deux tableaux comme celui-ci:

let songData = {
  path: [],
  title: []
};

vous devriez avoir un tableau d'objets comme celui-ci

let songData = [
  { path: 'Path-1', title: 'Title 1'}, 
  { path: 'Path-2', title: 'Title 3'}, 
  { ... }
];

Ensuite, lorsque vous ajoutez de nouveaux éléments, il vous suffit de push() les nouveaux objets du tableau

for (let i = 0; i < files.length; i++) {
  // ...
  let obj = { 'path' : path, 'title' : metadata.common.title };
  songData.push(obj); // this will add it at the end of the array (like append does for a jQuery element)
  // ...
}

De cette façon, toutes les informations sont stockées dans le même objet et non dans deux tableaux différents. Cela réduit également les risques d'erreurs si les index ne sont plus synchronisés. En outre, il serait beaucoup plus facile de supprimer des éléments ou de les changer si vous en avez besoin.


Si vous insistez pour conserver votre code actuel, le problème est que vous écrasez les index lorsque vous importez de nouveaux fichiers

for (let i = 0; i < files.length; i++) {
  //...
  songData.path[i] = path;
  songData.title[i] = metadata.common.title;

Ici, le [i] remplacera chaque fois que vous ajoutez des fichiers car il sera toujours 0, 1, 2 ... la prochaine fois que vous importerez, ce sera de nouveau 0, 1, etc.

Pour résoudre ce problème, ajoutez simplement l'élément à la fin du tableau en utilisant .push()

for (let i = 0; i < files.length; i++) {
  //...
  songData.path.push(path);
  songData.title.push(metadata.common.title);
  //...
1
VVV 7 nov. 2019 à 15:23