如何使用 JavaScript 处理一个文件夹中的多个值？

Question

I want to add random music player on my page.
And found random music player source. But it has just 2 musics.

If I have many music file over 100 in 'audio' folder, are there some tips dealing with many music files?

And this is my JavaScirpt code.

var lastSong = null;
var selection = null;
var playlist = ["audio/Boy with luv.mp3", "audio/Mikrokosmos.mp3"]; // List of Songs

var player = document.getElementById("audioplayer"); // Get Audio Element
player.autoplay = true;
player.addEventListener("ended", selectRandom); // Run function when song ends

function selectRandom() {
  while (selection == lastSong) {
    // Repeat until different song is selected
    selection = Math.floor(Math.random() * playlist.length);
  }
  lastSong = selection; // Remember last song
  player.src = playlist[selection]; // Tell HTML the location of the new Song
}

selectRandom(); // Select initial song
player.play(); // Start Song

Above code

var playlist = ["audio/Boy with luv.mp3", "audio/Mikrokosmos.mp3"];

If playlist has many music files, I want to add music file using like for function and so on.

Answer 1

Have a php or some other script generate a JSON with the list of all the songs for you, fetch it with some AJAX, and populate your playlist array from there.

like:

{
[
 {"title" : "something.mp3"},
 {"title" : "something_else.mp3"}
]
}

as your json, that you leave in a specific folder. Then:

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     populatePlaylist(this.responseText);
    }
  };
  xhttp.open("GET", "songs.json", true);
  xhttp.send();
}

function populatePlaylist(songsJSON){
 var songs = [];

 var obj = JSON.parse(songsJSON);

 obj.forEach(songs.push(obj["title"]));

 return songs;

}

And you set songs as your playlist, that's it.

(PS: this code shouldn't work out of the box)

Answer 2

you can do this

const fs = require('fs'); // file handling module
const files = fs.readdirSync('.'); // use to read all avaliable file in the current directory
const extname = '.mp3'; // audio file extension
const playlist = files.filter(file => file.endsWith(extname)); // filter out all the files which have `.mp3` extension 

add these lines above the below line

var lastSong = null;

and remove your declared playlist cause we have now one that comes from this const playlist = files.filter(file => file.endsWith(extname));

note: make sure you have you code and mp3 file in same directory.