You have an introduction to what we're going to build, and you've thought through some of the features, so you have a pretty good idea of the goal. Let's get a game plan together for how we're going to tackle the task of building it.
Notice that conceptual structure similar to a well-known design pattern: the model-view-controller (MVC for short). In this project, our model is an array holding audio samples, which is created and loaded by the code in BufferLoader.js, and then used by the code in Audio.js. The view is our HTML, CSS, and canvas, and primarily it's the canvas. All the code to manage the view is in View.js. Our controller is a bit more spread out: we'll have some code in musicbox.js to define how we'll handle clicks, but the rest of the controller code will be in a method in the View. We'll point out these components as we get to them.
We're going to use a couple of different techniques in this project for "modularizing" code. That just means we're going to build the code so that all the related functions are grouped together into objects. So, all the view code is grouped into a View object, all the sample loading code is grouped together into a BufferLoader object, and all the audio playing code is grouped together into an Audio object. As you can see these modules also correspond to the files we're creating.
We'll use two techniques to do this: one is to create an object using an object literal, with properties and methods in the object all related to a particular function of the code. The second technique is to use a constructor function that will create an object, again, with properties and methods related to a particular function of the code. We'll dig into the details of why we choose one or the other as we get to each object.
Okay, that's the plan! Let's get going.