HW 3 - Your Own Custom Instrument
In this third assignment you will be creating your own Web Audio musical instrument that allows the user of your site to play music. But we're not talking any regular old instrument, but rather your own strange instrument. Your site will be named after your instrument, which should be based on a sound making object of your choice. For example, goats make noise, so you might name your instrument The Goatsicord. In addition to being named after your sound making thing, it should look like your sound making thing. So The Goatsicord would look like a goat. And finally, playing notes on The Goatsicord would play goat samples in different notes. Your instrument must have at least 24 notes to play, which can be arranged as you like as long as it is somewhat logical. Note that the notes need not be according to a piano as different instruments are able to play different notes. But, your instrument should be logically arranged so as to be learnable and playable for constructing music. Playing a note should be controlled via the mouse. You may use mouse clicks, presses, and movements to control notes. Note that again, a note means playing a sample of your instrument object scaled to its proper pitch.
Note that if you are unfamiliar with HTML5's Canvas and with responding to mouse click and such, to start, download, open and examine the Kilt Pattern Generator example. It demonstrates how to do a number of things, including how to tie Web pages to JavaScript functions, and how to render to a canvas.
So how should you do this? Well, first you'll need to render your instrument to an HTML canvas. Your instrument can be rendered in a creative fashion to fit your purposes, but it must look like the object theme you've chosen and the means to play it should be recognizable. So, after you've rendered your instrument, you'll need to map mouse button interactions on different parts of your instrument to your notes. This is where Web Audio comes in. With Web Audio you'll want to preload your notes as recordings when the Web page first loads and then play the mapped note upon request. In addition to basic note playing your instrument should also provide a selection of 4 filters to use for processing the instrument's sound, a beat generator with three different rhythms that can be turned on or off, and volume controls for both the instrument and beat generator.
Requirements - again note that you must document all sounds that you use. All samples, generated sounds, and effects used must be specified in a file to show how you assembled your work.
- Web Page Heading - your page should look nice and should have a header declaring your instrument (i.e. The Goatsicord). You should also include your name. Note that I will be placing all your instruments online for the world to play, so choose your colors and fonts wisely.
- Canvas Rendered Instrument - your instrument should look good. And again, while you may take creative license with your creation, the person playing it should be able to figure out which notes are which.
- Recorded Notes - upon playing a key, your instrument should play that note as a recorded sound that you have provided. Note that your recorded sounds may be a voice singing, or some sound that you've fixed to a specific key (i.e. autotuned).
- Note Playing Feedback - when the user plays a note your program should provide visual feedback to enhance the player's experience. This can be done simply by rendering an outline around the note pressed to give the impression it's being pressed or by some other visual technique that suits the event.
- 4 Filters - provide controls to optionally use four different filters as provided by Web Audio. Clearly label what types of filters these are and provide appropriate controls such that the user may customize their use as needed. These filters must affect noticable change.
- 3 Beat Generators - provide three optional beat generators which when selected, play different prebuilt rhythms. These beats should be carefully labeled.
- 2 Volume Controls - provide two volume controls. One for the instrument, and one for the beats currently being played (which may be none).
That's it! You are about to create your very first digital musical instrument.
Web page created and maintained
by Richard McKenna