Creating a simple synth

  • Revision slug: Creating_a_simple_synth
  • Revision title: Creating a simple synth
  • Revision id: 95519
  • Created:
  • Creator: quinnirill
  • Is current revision? No
  • Comment 224 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.

The code, HTML

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>

CSS

Then we'll drop in a little css to attach the keyboard to the bottom: (simplesynth.css)

iframe
{
	position: absolute;
	bottom: 0px;
	width: 100%;
	left: 0px;
	border-width: 0px;
}

JavaScript

Now we need a plan for the script. We don't really need to do much, we mush instantiate an AudioDevice with a callback that fill the buffer with data from the Oscillator. Then we need to bind the midi data to control the frequency of the oscillator, bind an event listener to the select to change the waveform and that's pretty much it.

First, let's define some variables.

var	samplerate	= 22050,
		oscillator	= new Oscillator(samplerate), // Creates an instance of an oscillator.
		audiodev,
		pressedKeys	= [];

	oscillator.frequency = 0;

Then define a function we'll use as the callback for the AudioDevice. In it, we iterate through the buffer given and fill it with data from the oscillator, modulated with some random noise.

	function processAudio(buffer){
		var i, l = buffer.length;
		for (i=0; i

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>
<h2>The code, HTML</h2>
<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>
<h2>CSS</h2>
<p>Then we'll drop in a little css to attach the keyboard to the bottom: (simplesynth.css)</p>
<pre class="brush: css">iframe
{
	position: absolute;
	bottom: 0px;
	width: 100%;
	left: 0px;
	border-width: 0px;
}
</pre>
<h2>JavaScript</h2>
<p>Now we need a plan for the script. We don't really need to do much, we mush instantiate an AudioDevice with a callback that fill the buffer with data from the Oscillator. Then we need to bind the midi data to control the frequency of the oscillator, bind an event listener to the select to change the waveform and that's pretty much it.</p>
<p>First, let's define some variables.</p>
<pre class="brush: js">var	samplerate	= 22050,
		oscillator	= new Oscillator(samplerate), // Creates an instance of an oscillator.
		audiodev,
		pressedKeys	= [];

	oscillator.frequency = 0;
</pre>
<p>Then define a function we'll use as the callback for the AudioDevice. In it, we iterate through the buffer given and fill it with data from the oscillator, modulated with some random noise.</p>
<pre class="brush: js">	function processAudio(buffer){
		var i, l = buffer.length;
		for (i=0; i</pre>
Revert to this revision