Using FLOD for the first time (Part 1).

Ok, so how do you start using FLOD?

There are two ways to load a module into FLOD:

• Using the FileLoader class
• Using a specific tracker class.

If you already know the format of the module you're going to load, you can save some space by not including the FileLoader class, however in this case you will have to handle the decompression of the file (in case it's a zip archive) and the unpacking of it in the event it's one of the supported Amiga packers format.

If you don't mind a slightly larger file and a small delay before the format is recognized then you can just use the FileLoader class and all of the above will be taken care of.

Files can be loaded from the browser on the local computer or they can be loaded from the server, in both cases FLOD code is the same. The only difference is the code that loads the file.

This article is about how to use FLOD so I won't go into specifics of what a FileReader is or what an event is. I'm assuming a certain proficiency of javascript is already in place.

Loading a module from a local computer with the FileLoader

To load a module you can either use the input file tag or, in browser that supports it, a simple drag and drop.

Let's get started with the input tag; here's a simple HTML code example:

<input type="file" id="browse">

your javascript code will look something like this:

var loader = window.neoart.FileLoader();
var player = loader.player;
var browse = document.getElementById("browse");

browse.addEventListener("change", function(e) {
  load(e.target.files[0]);
});

function load(file) {
  var reader = new FileReader();

  reader.onload = function(e) {
    if (loader.load(e.target.result)) {
      player.play();
    }
  }

  reader.readAsArrayBuffer(file);
}

You can now load and play a module!

Using the "load" function, instead of having the entire code in the "change" event of the input element, allows you to re-use it for loading a module via drag and drop.

In order to accomplish this, you need an HTML element in the page to act as a drop zone (it can be a div or another element).

For example:

<div id="dropzone">Drop your file here.<div>

and the javascript code would be:

var dropzone = document.getElementById("dropzone");

dropzone.addEventListener("dragover", function(e) {
  e.stopPropagation();
  e.preventDefault();
});

dropzone.addEventListener("drop", function(e) {
  load(e.dataTransfer.files[0]);
});

Loading a module from the server with the FileLoader

If instead you want to load a module from the server, you need to do that via ajax; note that some servers will not send files with an unknown extension so your best bet is to rename the module to something like .wav or a similar extension or to use a zip archive.

var loader = window.neoart.FileLoader();
var player = loader.player;
var xmlreq = new XMLHttpRequest();

xmlreq.onload = function(e) {
  if (loader.load(xmlreq.response)) {
    player.play();
  }
}

xmlreq.open("GET", "yourmodule.wav", true);
xmlreq.responseType = "arraybuffer";
xmlreq.send();

This is all you need to load and play a module from the server!

Go on reading part 2  Loading a module without the FileLoader