Revision 95514 of Creating a simple synth

  • Revision slug: Creating_a_simple_synth
  • Revision title: Creating a simple synth
  • Revision id: 95514
  • Created:
  • Creator: quinnirill
  • Is current revision? No
  • Comment 293 words added

Revision Content

This article describes the creation of a simple synth, using existing tools, such as the Audio API, HTML5 Virtual MIDI Keyboard and some additional javascript libraries (osc.js, audiodevice.js). Osc.js is a library that describes a class for an oscillator, and audiodevice.js describes a class that interacts with the mozAudio API in a way that allows for using callbacks to write the audio.

Let's start with a plan, and go with as simple as it gets: a synth with a virtual midi keyboard, waveshape options and maybe some noise modulation for an extra spicyness.

So the html (simplesynth.html) should include all our scripts, an iframe for the keyboard, and an option tag to change the waveform.

{{ syntax.html{code: " <title>Simple synth using the audio api</title> <script src="\"audiodevice.js\""></script> <script src="\"osc.js\""></script> <script src="\"simplesynth.js\""></script> <link href="\"simplesynth.css\"" rel="\"stylesheet\"">
"} }}

Revision Source

<p>This article describes the creation of a simple synth, using existing tools, such as the Audio API, HTML5 Virtual MIDI Keyboard and some additional javascript libraries (osc.js, audiodevice.js). Osc.js is a library that describes a class for an oscillator, and audiodevice.js describes a class that interacts with the mozAudio API in a way that allows for using callbacks to write the audio.</p>
<p>Let's start with a plan, and go with as simple as it gets: a synth with a virtual midi keyboard, waveshape options and maybe some noise modulation for an extra spicyness.</p>
<p>So the html (simplesynth.html) should include all our scripts, an iframe for the keyboard, and an option tag to change the waveform.</p>
<p>{{ syntax.html{code: "   <title>Simple synth using the audio api</title> <script src='\"audiodevice.js\"'></script> <script src='\"osc.js\"'></script> <script src='\"simplesynth.js\"'></script> <link href='\"simplesynth.css\"' rel='\"stylesheet\"'>   <label for='\"waveshape\"'>Waveshape</label><br> <select id='\"waveshape\"'> <option selected value='\"0\"'>Sine</option> <option value='\"1\"'>Triangle</option> <option value='\"2\"'>Pulse</option> <option value='\"3\"'>Sawtooth</option> <option value='\"4\"'>Invert Sawtooth</option> <option value='\"5\"'>Square</option> </select> <iframe id='\"keyboard\"' src='\"../virtualmidikb/index.html\"'></iframe>  "} }}</p>
Revert to this revision