Downloading the audio
So it looks like this is possible if you put it into the Jquery $(document).ready() function (when the page loads). Original code thanks to this SO post. More info on this other SO post.
// Hide the page until the audio has loaded.
// You might want to display some kind of preloader graphic
// while the user waits.
var $body = $('body').css('display', 'none');
$(document).ready(function () {
var player = new Audio();
// canplaythrough event is fired when enough of the audio has downloaded
// to play it through at the current download rate
player.addEventListener('canplaythrough', audioLoadedHandler);
function audioLoadedHandler(e) {
// Audio has loaded, show the page
$body.css('display', 'block');
// And start the audio
player.play(); // Or do whatever now that you have the audio
}
player.src = 'https://example.com/folder/file.wav';
});
When the player.src is set, the audio will attempt to be loaded.
So what you will need to do is create an array of players, and array of their source locations (i.e. some audio hosting website/service - maybe dropbox if you aren't using anything else) and simply iterate through when the page loads. This way your users could upload to the hosting service manually, or your website could take care of this using an API for the hosting service (saving to dropbox from js).
Keeping track of your audio
Since you will be using multiple files and the user will be uploading more im guessing, it's probably a good idea to keep a list of all of the website source locations for each file (since otherwise you won't know which src locations / file name(s) to load).
One solution to do this would be store your php server side and use a AJAX request to get a global object containing whatever info you need about your audio files, when the webpage loads (before you load the audio).
One example could be:
$.ajax({
type: "POST",
url: 'server.php',
dataType: 'json',
data: {"data":"check"},
success: function(data){
var audioPlayersMetadata = $.parseJSON(data);
for(var i = 0; i < audioPlayersMetadata.nPlayers; i++){
audioPlayers[i].src = audioPlayersMetadata.playerSrc[i];
}
}
});
Assuming in your PHP code you created a JSON object with a nPlayers parameter, and a playerSrc array parameter.
The same would have to be carried out in a similar fasion every time you wanted to load a new audio file, for example. But this time send a request to add to the playerSrc array and increment the nPlayers by 1.
These are just my suggestions but hopefully it gets you closer to your goal; the downloading audio before playback should be sorted now though!
PS. If it's only one guy using this maybe it's more worthwhile building a compiled app? You could even use electron,js to write it in JS/HTML/CSS, which would let you could store files completely locally.
