Setting the Audio Element, File Input Element and Audio URL

0. Specify which element plays the audio. In your HTML code, specify an audio element with a unique ID.

<audio controls id="soundElement"></audio>

If you don't want to display the controls of the music player before it has started playing, then leave out the controls attribute in the above tag.

Specify the audio element in your JavaScript using its id.

let mV = new MusicVisualiser();
mV.audioPlayer = "audioElementId";

1. Specify which element the user can use to select their own audio file. In your HTML code, specify a input element with a unique ID, and give it a type attribute with value file.

<label for="audioFileInputId" id="audioInputLabel">Load a sound file from your computer.</label>
<input type="file" id="audioFileInputId"/>

The JavaScript consists of two main parts: specifying the element which loads the file, like above, and then listening for when that element changes to start playing the sound file loaded by it.

let mV = new MusicVisualiser();

mV.audioFileInput = "audioFileInputId";

audioFileInputId.onchange = function() { 
  mV.loadAndPlaySoundFile();
};

2. Specify the URL of a sound file to be played by the audio element.

let mV = new MusicVisualiser();

mV.soundFileURL= "URL/toYourSound/fileHere/song.ogg";