Creating a simple synth

  • Revision slug: Creating_a_simple_synth
  • Revision title: Creating a simple synth
  • Revision id: 95518
  • Created:
  • Creator: quinnirill
  • Is current revision? No
  • Comment one or more formatting changes

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.

<!DOCTYPE html>
<html>
	<head>
		<title>Simple synth using the audio api</title>
		<script src="audiodevice.js"></script>
		<script src="osc.js"></script>
		<script src="simplesynth.js"></script>
		<link rel="stylesheet" href="simplesynth.css" />
	</head>
	<body>
		<label for="waveshape">Waveshape</label><br />
		<select id="waveshape">
			<option value="0" selected="selected">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>
	</body>
</html>

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>
<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;Simple synth using the audio api&lt;/title&gt;
		&lt;script src="audiodevice.js"&gt;&lt;/script&gt;
		&lt;script src="osc.js"&gt;&lt;/script&gt;
		&lt;script src="simplesynth.js"&gt;&lt;/script&gt;
		&lt;link rel="stylesheet" href="simplesynth.css" /&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;label for="waveshape"&gt;Waveshape&lt;/label&gt;&lt;br /&gt;
		&lt;select id="waveshape"&gt;
			&lt;option value="0" selected="selected"&gt;Sine&lt;/option&gt;
			&lt;option value="1"&gt;Triangle&lt;/option&gt;
			&lt;option value="2"&gt;Pulse&lt;/option&gt;
			&lt;option value="3"&gt;Sawtooth&lt;/option&gt;
			&lt;option value="4"&gt;Invert Sawtooth&lt;/option&gt;
			&lt;option value="5"&gt;Square&lt;/option&gt;
		&lt;/select&gt;
		&lt;iframe id="keyboard" src="virtualmidikb/index.html"&gt;&lt;/iframe&gt;
	&lt;/body&gt;
&lt;/html&gt;
</pre>
Revert to this revision