Sound: Advanced Topics II (GR6611, Fall 2018) week 3

basic synthesis with Tone.js

After finishing up some more html work and going through a bit of basic javascript, we got to make some sound with Tone.js. Yay!

Links

Tone.js download -- ok, this is where you can easily access the link for downloading the Tone.js file. Option-click (in Safari, not sure what it is for Chrome or Firefox) to download the file, not just view it in your browser. NOTE: Where you put this file will need to be referenced properly in the Tone.js html documents you create (see source code below).
basic list of Tone.js elements -- the essential javascript objects and functions for "doing" Tone.js work
basic HTML -- this is the resource to use for HTML docs. Scroll down for the "tags" section to see individual HTML tag documentation (or click here).

Class Downloads

week3-html-files.zip -- all the html/javascript files we created in class (they are also listed on this web page below).

Here is a tour through the web pages we built in class:

The first thing we did was to show three different methods for printing text after clicking a button.

method 1: send up an alert

<!DOCTYPE html>
<head>
	<title>button1</title>
</head>
<html>
<body>

<!-- this makes an "alert" window when the 'fun fun fun!' button is clicked -->
<button type="button" onclick="alert('and a WHOLE LOTTA fun!')">fun fun fun!</button>

</body>
</html>

click here to run the above html

method 2: print to the javascript console


<!DOCTYPE html>
<head>
	<title>button1a</title>
</head>
<html>
<body>

<button type="button" onclick="alert('and a WHOLE LOTTA fun!')">fun fun fun!</button>

<!-- this message will appear in the "console" window (you will need to open
	it for your particular browser).  This is important for seeing a lot
	of javascript messages, especially when you look for debugging errors -->
<button type="button" onclick="console.log('here tis!')">where will this one be?</button>

</body>
</html>

click here to run the above html
NOTE: the printing in the Safari console is at the bottom of the console web page

method 3: print to the main web page

<!DOCTYPE html>
<head>
	<title>button1b</title>
</head>
<html>
<body>

<!-- the buttonfunction() is a javascript function that will print to the
	"innerHTML" part of the "output" tag on your main web page -->
<button onclick="buttonfunction()">hey hey hey!</button>
<br>
<br>

<!-- this is where it will print (id="output") -- getElementById will
	find this on your web page -->
<output id="output"></output>


<!-- <script> and </script> define where your javascript code lives -->
<script>
	function buttonfunction() {
  		document.getElementById('output').innerHTML = "I was CLICKED!"
	}
</script>

</body>
</html>

click here to run the above code

Next we covered a few aspects of javascript that we will encounter when employing Tone.js for web sound. A good general javascript tutorial is here.
We used this HTML as a very simple example of a javascript function and variable:

<!DOCTYPE html>
<head>
	<title>buttonjs</title>
</head>
<html>
<body>
<button onclick="buttonfunction()">count them clicks</button>
<br>
<br>
<output id="output"></output>

<script>
	// declare the variable outside the function so it will be 'scoped' throh
	// the entire script (and not just 'inside' the function)
	var clicktimes = 0;

	function buttonfunction() {
		clicktimes++;  // same as clicktimes = clicktimes + 1;
		documentetElementById('output').innerHTML = "I was CLICKED this many times: " + clicktimes;
	}
</script>

</body>
</html>

click here to run the above code

Next we actually made some sound with Tone.js. Yay! Here is the code:

<!DOCTYPE HTML>
<html>
<head>
   <titletosc1</title>

   <script src="../Tone.js"</script>
	<!-- ok, this is tricky.  the "src=" has to designate where, relative to
		this web page, the Tone.js file is located.  The "../" means it is
		one directory *above* the directory where this file is located.
		"../../Tone.js" would put it TWO directories above.  Just plain
		src="Tone.js" means it is in the same directory as this file.  Why
		not just do that always?  Because you may want to reference it from
		many pages, and you would want to locate it in a place reasonably
		accessible from those other directories -->
</head>
<body>

<script>
	var osc = new Tone.Oscillator(); // create a new Oscillator 'object'
	osc.frequency.value = 478.0;  // set this way because it is a signal
					// you can't say osc.frequency = 478.0;
	osc.toMaster(); // connect it to the main audio output
	osc.start();  // START ME UP!
</script>

</body>
</html>

click here to run the above code

Cool! Sound! But it doesn't... stop. The following implements a 'start' and 'stop' button to call the start() and stop() methods on the Tone.js Oscillator object:

<!DOCTYPE HTML>
<html>
<head>
   <title>osc2</title>

   <script src="../Tone.js"></script>
</head>
<body>

<!-- what these buttons do should be obvious -->
<button onclick="startbuttonfunction()">start me up!</button>
<br>
<br>
<button onclick="stopbuttonfunction()">STOPIT!</button>

<script>
	var osc = new Tone.Oscillator(378);
	osc.toMaster();

	function startbuttonfunction() {
		osc.start();
	}

	function stopbuttonfunction() {
		osc.stop();
	}
</script>
</body>
</html>

click here to run the above code

As much fun as starting and stopping a 378 Hz tone can be, it might be even more fun to change the pitch. We already know how to address the frequency value for our oscillator ("osc.frequency.value = 378"... and remember that we need to use the ".value" because it is a Tone,js signal, not a parameter). All we have to do is to connect it to an HTML interface object (hint: an HTML slider is an 'input range' DOM object). Here's the code that does that:

<!DOCTYPE HTML>
<html>
<head>
   <title>osc3</title>

   <script src="../Tone.js"></script>
</head>
<body>

<button onclick="startbuttonfunction()">start me up!</button>
<br>
<br>
<button onclick="stopbuttonfunction()">STOPIT!</button>
<br>
<br>
<br>
<!-- call the "set_freq()" function with "this.value" when the slide is moved -->
<input type="range" oninput="set_freq(this.value)">
<output id="output"></output>


<script>
	var osc = new Tone.Oscillator(378);
	osc.toMaster();

	function startbuttonfunction() {
		osc.start();
	}

	function stopbuttonfunction() {
		osc.stop();
	}

	function set_freq(val) {
		// multiply the value by 10 because the range slider goes from 0-100
		document.getElementById('output').innerHTML = val*10;
		osc.frequency.value = val*10;
	}
</script>
</body>
</html>

click here to run the above code

It's also easy to add a range control for the volume of the volume of the oscillator, so long as we remember that Tone.js specifies the volume in decibels from unity gain. The range slider should be set to generate a maximum value of 0 and a minimum value of -100 (or so) to do this. The code:

<!DOCTYPE HTML>
<html>
<head>
   <title>osc3a</title>

   <script src="../Tone.js"></script>
</head>
<body>

<button onclick="startbuttonfunction()">start me up!</button>
<br>
<br>
<button onclick="stopbuttonfunction()">STOPIT!</button>
<br>
<br>
<br>
<input type="range" oninput="set_freq(this.value)">
<output id="output"></output>
<br>
<br>

<!-- here's where we set the max and min of the range slider -->
<input type="range" oninput="set_amp(this.value)" max="0" min="-100">
<output id="output1"></output>
<!-- note that we label this with id 'output1, so we can print to it
	from the set_amp() function -->


<script>
	var osc = new Tone.Oscillator(378);
	osc.toMaster();

	function startbuttonfunction() {
		osc.start();
	}

	function stopbuttonfunction() {
		osc.stop();
	}

	function set_freq(val) {
		document.getElementById('output').innerHTML = val*10;
		osc.frequency.value = val*10;
	}

	function set_amp(val) {
		// don't need to multiply val by anything becuase the range slider
		//		was already set with the range from -100 to 0
		document.getElementById('output1').innerHTML = val;
		osc.volume.value = val;
	}
</script>
</body>
</html>

click here to run the above code

We can fade the oscillator up and down, but if we want to make discrete notes, it would be much easier to automate that fadeup/fadedown (i.e. apply an amplitude envelope to the oscillator). There are three obvious ways to do this. The first is to apply a control envelope to the osc.volume input of our oscillator. Given what we know about the range of volume values (-100 to 0), we would need for the envelope to generate values in that range. The basic Tone.Envelope component will only generate values from 0.0 to 1.0. We would have to do some math with the various Tone.Multiply and whatnot, which seems like a lot of work. Blearg. Looking through the Tone.js docs, there is also a Tone.Scaled envelope which would do the trick.

Alternatively, we could multiply the output of our oscillator by one of the Tone.Envelope or Tone.ScaledEnvelope components (the second way to do amplitude enveloping). However, there is a highly suggestively-named component in Tone.js called Tone.AmplitudeEnvelope. This is the third method for doing amplitude control, and it is the preferred method. Tone.AmplitudeEnvelope is set up to accept a signal input (like from our oscillator) and it will apply the envelope to that signal given an appropriate trigger (the triggerAttackRelease() method, for example). This is the code to do this:

<!DOCTYPE HTML>
<html>
<head>
   <title>osc4</title>

   <script src="../Tone.js"></script>
</head>
<body>

<button onclick="startbuttonfunction()">start me up!</button>
<br>
<br>
<button onclick="stopbuttonfunction()">STOPIT!</button>
<br>
<br>
<br>
<input type="range" oninput="set_freq(this.value)">
<output id="output"></output>
<br>
<br>
<!-- we can still set the amp of the basic oscillator; the AmplitudeEnvelope
	will work upon that base amp -->
<input type="range" oninput="set_amp(this.value)" max="0" min="-100">
<output id="output1"></output>
<br>
<br>
<br>
<br>
<!-- this will trigger the AmplitudeEnevelope -->
<button onclick="triggerbuttonfunction()">GO!</button>

<script>
	var osc = new Tone.Oscillator(378);

	// the params are attack time, initial decay time, sustain level (0-1), release time
	var ampenv = new Tone.AmplitudeEnvelope(0.01, 0.0, 1.0, 0.1);

	// connect the oscillator to the input of the ampenv
	osc.connect(ampenv)

	// and then the ampenv goes out to the Master
	ampenv.toMaster();


	function startbuttonfunction() {
		osc.start();
	}

	function stopbuttonfunction() {
		osc.stop();
	}

	function set_freq(val) {
		document.getElementById('output').innerHTML = val*10;
		osc.frequency.value = val*10;
	}

	function set_amp(val) {
		document.getElementById('output1').innerHTML = val;
		osc.volume.value = val;
	}

	function triggerbuttonfunction() {
		// 0.5 is how long the note will last (at the sustain level)
		ampenv.triggerAttackRelease(0.5);
	}
</script>
</body>
</html>

click here to run the above code

Because we are now controlling the output of our oscillator with the AmplitudeEnvelope, we don't really need to have separate start() and stop() functions. We can simply turn on the oscillator when the page loads and trigger the envelope whenever we want sound. Note that this will place a load on the CPU even when the oscillator is not 'sounding', though, and you may need to manage the starting and stopping of various Tone.js components with more complex web pages. The simplified code:

<!DOCTYPE HTML>
<html>
<head>
   <title>osc4a</title>

   <script src="../Tone.js"></script>
</head>
<body>

<br>
<input type="range" oninput="set_freq(this.value)">
<output id="output"></output>
<br>
<br>
<input type="range" oninput="set_amp(this.value)" max="0" min="-100">
<output id="output1"></output>
<br>
<br>
<br>
<br>
<button onclick="triggerbuttonfunction()">GO!</button>

<script>
	var osc = new Tone.Oscillator(378);
	var ampenv = new Tone.AmplitudeEnvelope(0.01, 0.0, 1.0, 0.1);
	osc.connect(ampenv)
	ampenv.toMaster();
	// start the oscillator immediately
	osc.start();

	function set_freq(val) {
		document.getElementById('output').innerHTML = val*10;
		osc.frequency.value = val*10;
	}

	function set_amp(val) {
		document.getElementById('output1').innerHTML = val;
		osc.volume.value = val;
	}

	function triggerbuttonfunction() {
		// shorter duration just for fun
		ampenv.triggerAttackRelease(0.1);
	}
</script>
</body>
</html>

click here to run the above code

Because we were having so much fun dynamically modifying the amplitude envelope of our oscillator output, it seemed a logical thing to try doing some modulation of the oscillator frequency. The Tone.LFO (low-frequency oscillator) component might be just the ticket to produce frequency vibrato. In this case, we will apply the output of the LFO directly to the oscillator frequency input; the approach we imagined for the oscillator amplitude in the first and second ideas above:

<!DOCTYPE HTML>
<html>
<head>
   <title>osc5</title>

   <script src="../Tone.js"></script>
</head>
<body>

<br>
<input type="range" oninput="set_freq(this.value)">
<output id="output"></output>
<br>
<br>
<input type="range" oninput="set_amp(this.value)" max="0" min="-100">
<output id="output1"></output>
<br>
<br>
<br>
<br>
<button onclick="triggerbuttonfunction()">GO!</button>

<script>
	var osc = new Tone.Oscillator(378);

	// set our LFO to 3.5 Hz, with a range from 0 to 30 (this will be added
	//		to the frequency set by the range slider)
	var LFO = new Tone.LFO(3.4, 0, 30);

	// connect the LFO to the oscillator frequency input and start it up
	LFO.connect(osc.frequency);
	LFO.start();

	var ampenv = new Tone.AmplitudeEnvelope(0.01, 0.0, 1.0, 0.1);
	osc.connect(ampenv)
	ampenv.toMaster();
	osc.start();

	function set_freq(val) {
		document.getElementById('output').innerHTML = val*10;
		osc.frequency.value = val*10;
	}

	function set_amp(val) {
		document.getElementById('output1').innerHTML = val;
		osc.volume.value = val;
	}

	function triggerbuttonfunction() {
		ampenv.triggerAttackRelease(3.5);
	}
</script>
</body>
</html>

click here to run the above code

Next we began to explore other oscillator/sources provided by Tone.js. The simplest thing (and going back to a very simple start/stop oscillator web page) to do is change the waveform used by Tone.Oscillator:

<!DOCTYPE HTML>
<html>
<head>
   <title>oscwaves</title>

   <script src="../Tone.js"></script>
</head>
<body>

<button onclick="startbuttonfunction()">start me up!</button>
<br>
<br>
<button onclick="stopbuttonfunction()">STOPIT!</button>

<script>
	// this will use a square wave.  See the Tone.js documentation for others
	var osc = new Tone.Oscillator(378, "square");
	osc.toMaster();

	function startbuttonfunction() {
		osc.start();
	}

	function stopbuttonfunction() {
		osc.stop();
	}
</script>
</body>
</html>

click here to run the above code

The last thing we were able to do in the class was look at the FMOscillator. We used the Tone.js 'object-oriented' method for initializing values, and connected the modulationIndex and the harmonicity to sliders so we could experiment with different FM sounds:

<!DOCTYPE HTML>
<html>
<head>
   <title>fmosc1</title>

   <script src="../Tone.js"></script>
</head>
<body>

<button onclick="startbuttonfunction()">ho ho!</button>
<br>
<br>
<button onclick="stopbuttonfunction()">ha ha!</button>
<br>
<br>
<br>

<!-- we're using a range of 100 for the slider to give us finer 'gradations'
	in the index value.  We scale this to 0-10 by divding by 10 in the
	set_index() function below -->
<input type="range" oninput="set_index(this.value)" min="0" max="100">
<output id="output"></output>

<br>
<br>
<!-- we're doing the same kind of scaling here for the harmonicity.
	the harmonicity is a multipler of the base (carrier) frequency to get
	the modulation frequency.  Non-integer multiples will produce
	non-harmonic sidebands -->
<input type="range" oninput="set_harmonicity(this.value)" min="1" max="50">
<output id="output1"></output>


<script>
	// here is the 'object-oriented' way of initializing values when
	// we create the FMOscillator
	var fmosc = new Tone.FMOscillator ( {
		frequency  : 314,
		modulationIndex  : 2,
		modulationType  : "sine",
		harmonicity  : 1
	} );
	fmosc.toMaster();

	function startbuttonfunction() {
		fmosc.start();
	}

	function stopbuttonfunction() {
		fmosc.stop();
	}

	function set_index(val) {
		document.getElementById('output').innerHTML = val/10;
		fmosc.modulationIndex.value = val/10;
	}

	function set_harmonicity(val) {
		document.getElementById('output1').innerHTML = val/10;
		fmosc.harmonicity.value = val/10;
	}
</script>
</body>
</html>

click here to run the above code