jlangy/2020-04-22-noisemaker

Today's Objective: Noisemaker!

Prize

$25 CAD Amazon gift card + bragging rights.

Tip: Read the General Information Document for more info on how to get started and submit.

Objective

Today's objective is to create a music instrument, audio toy, or noisemaker.

Over the years, audio has fallen out of favour for mainstream web applications and websites for a variety of reasons, including accessibility, design, and user experience.

But rich, interactive web experiences still make full use of Audio APIs. Audio has been a part of browser experiences for decades.

Here are some cool examples of the Web Audio API in action.

• https://keithwhor.com/music/
• https://stuartmemo.com/qwerty-hancock/
• https://stuartmemo.com/smashing-magazine/theremin/

Requirements

Use the Web Audio API (or a library that wraps around it) to make a musical instrument, audio toy, or a noisemaker.

The only hard requirement are these:

1. Sound must be made in response to user interaction. I.e., you cannot create a simple audio player. Your app must respond to user action events.
2. You must use the Web Audio API, either directly or indirectly.

The requirements are intentionally open-ended to allow developers to create an app that suits their skill level.

Here are some examples of applications you might decide to make:

• (Easy ) A button that creates a sound when the user clicks on it
• (Easy ) An area that creates noise as the user drags their mouse over it (see Theremin)
• (Medium) A simple synthesizer
• (Hard ) A drum machine
• (Hard ) A simple game with interesting audio sound effects

If you want to win

Remember: learning is the main reward here. Competing is fun and encouraged, but optional.

However, if you'd like to seriously compete, then keep in mind that more complex and interesting applications will stand a better chance of winning.

Suggested Libraries

ToneJS is a pretty good library that you can use. There are others, but this is one of the simpler ones.

Frameworks:

We recommend you keep it simple and use what you already know. It is completely possible to build this using jQuery. You can use React, Vue, Angular if you wish.

Technology Restrictions

• Your project must use JavaScript in a browser environment.

There are no other restrictions.

Tips for success:

1. The project is intentionally simple so you can focus on code quality.
2. The requirements are intentionally minimalistic so you can get as creative as you'd like.
3. You get a LOT of time for code review comments. So you can win even if you feel your project isn't great, simply on the strength of your code review comments!
4. Keep in mind, 33% of your score is based on aesthetic appeal! So try to make it look nice.