linting

examples/amSynth.html

@@ -51,13 +51,13 @@
 			parent: document.querySelector("#content"),
 			noteon: (note) => synth.triggerAttack(note.name),
 			noteoff: (note) => synth.triggerRelease()
-		})
+		});
 
 		ui({
 			tone: synth,
 			name: "AMSynth",
 			parent: document.querySelector("#content"),
-		})
+		});
 		
 	</script>
 </body>

examples/analysis.html

@@ -66,7 +66,6 @@
 		document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
 		document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
 
-
 	</script>
 </body>
 </html>

examples/animationSync.html

@@ -55,26 +55,26 @@
 	</tone-example>
 	
 	<script type="text/javascript">
-		var piano = new Tone.Synth({
+		const piano = new Tone.Synth({
-			"oscillator" : {
+			oscillator: {
-				"type" : "fmsine4",
+				type: "fmsine4",
-				"modulationType" : "square"
+				modulationType: "square"
 			}
 		}).toDestination();
 
-		var loop = new Tone.Pattern(function(time, note){
+		const loop = new Tone.Pattern(((time, note) => {
 			piano.triggerAttackRelease(note, "16n", time);
 
 			// Draw.schedule takes a callback and a time to invoke the callback
-			Tone.Draw.schedule(function(){
+			Tone.Draw.schedule(() => {
-				//the callback synced to the animation frame at the given time
+				// the callback synced to the animation frame at the given time
 				const noteElement = document.querySelector("#"+note);
 				noteElement.classList.add("active");
 				setTimeout(() => {
 					noteElement.classList.remove("active");
 				}, 100);
 			}, time);
-		}, ["C4", "E4", "G4", "B4", "D5"]).start(0);
+		}), ["C4", "E4", "G4", "B4", "D5"]).start(0);
 
 		loop.interval = "16n";
 
@@ -82,10 +82,10 @@
 
 		drawer().add({
 			tone: piano,
-			title: 'Piano',
+			title: "Piano",
-		})
+		});
 
-		//connect the UI with the components
+		// connect the UI with the components
 		document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
 		document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
 

examples/bembe.html

@@ -76,7 +76,6 @@
 		// connect the UI with the components
 		document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
 		document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
-
 		
 	</script>
 </body>

examples/buses.html

@@ -32,54 +32,53 @@
 	</tone-example>
 
 	<script type="text/javascript">
-				
+				// the source
-		// the source
+const player = new Tone.Player({
-		const player = new Tone.Player({
+	url: "https://tonejs.github.io/audio/berklee/femalevoice_oo_A4.mp3",
-			url: "https://tonejs.github.io/audio/berklee/femalevoice_oo_A4.mp3",
+	loop: true,
-			loop: true,
+});
-		});
 
-		// make some effects
+// make some effects
-		const chorus = new Tone.Chorus({
+const chorus = new Tone.Chorus({
-			wet: 1,
+	wet: 1,
-		}).toDestination().start();
+}).toDestination().start();
-		const chorusChannel = new Tone.Channel({volume: -60}).connect(chorus);
+const chorusChannel = new Tone.Channel({ volume: -60 }).connect(chorus);
-		chorusChannel.receive("chorus");
+chorusChannel.receive("chorus");
 
-		const cheby = new Tone.Chebyshev(50).toDestination();
+const cheby = new Tone.Chebyshev(50).toDestination();
-		const chebyChannel = new Tone.Channel({volume: -60}).connect(cheby);
+const chebyChannel = new Tone.Channel({ volume: -60 }).connect(cheby);
-		chebyChannel.receive("cheby");
+chebyChannel.receive("cheby");
 
-		const reverb = new Tone.Reverb(3).toDestination();
+const reverb = new Tone.Reverb(3).toDestination();
-		const reverbChannel = new Tone.Channel({volume: -60}).connect(reverb);
+const reverbChannel = new Tone.Channel({ volume: -60 }).connect(reverb);
-		reverbChannel.receive("reverb");
+reverbChannel.receive("reverb");
 
-		// send the player to all of the channels
+// send the player to all of the channels
-		const playerChannel = new Tone.Channel().toDestination();
+const playerChannel = new Tone.Channel().toDestination();
-		playerChannel.send("chorus");
+playerChannel.send("chorus");
-		playerChannel.send("cheby");
+playerChannel.send("cheby");
-		playerChannel.send("reverb");
+playerChannel.send("reverb");
-		player.connect(playerChannel);
+player.connect(playerChannel);
 
-		drawer().add({
+drawer().add({
-			tone: chorus,
+	tone: chorus,
-		}).add({
+}).add({
-			tone: reverb,
+	tone: reverb,
-		}).add({
+}).add({
-			tone: cheby,
+	tone: cheby,
-		});
+});
-		document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
+document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
-		document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
+document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
-		// bind the interface
+// bind the interface
-		document.querySelector("[label=\"Chorus Send\"]").addEventListener("input", e => {
+document.querySelector("[label=\"Chorus Send\"]").addEventListener("input", e => {
-			chorusChannel.volume.value = parseFloat(e.target.value);
+	chorusChannel.volume.value = parseFloat(e.target.value);
-		});
+});
-		document.querySelector("[label=\"Chebyshev Send\"]").addEventListener("input", e => {
+document.querySelector("[label=\"Chebyshev Send\"]").addEventListener("input", e => {
-			chebyChannel.volume.value = parseFloat(e.target.value);
+	chebyChannel.volume.value = parseFloat(e.target.value);
-		});
+});
-		document.querySelector("[label=\"Reverb Send\"]").addEventListener("input", e => {
+document.querySelector("[label=\"Reverb Send\"]").addEventListener("input", e => {
-			reverbChannel.volume.value = parseFloat(e.target.value);
+	reverbChannel.volume.value = parseFloat(e.target.value);
-		});
+});
 
 	</script>
 </body>

examples/daw.html

@@ -52,26 +52,26 @@
 	</tone-example>
 
 	<script type="text/javascript">
-		//set the transport
+		// set the transport
 		Tone.Transport.bpm.value = 108;
 		Tone.Transport.loop = true;
 		Tone.Transport.loopStart = "4m";
 		Tone.Transport.loopEnd = "8m";
 		
-		var kick = new Tone.Player({
+		const kick = new Tone.Player({
-			url : "./audio/loop/kick.[mp3|ogg]",
+			url: "./audio/loop/kick.[mp3|ogg]",
-			loop : true
+			loop: true
 		}).toDestination().sync().start(0);
 
-		var snare = new Tone.Player({
+		const snare = new Tone.Player({
-			url : "./audio/loop/snare.[mp3|ogg]",
+			url: "./audio/loop/snare.[mp3|ogg]",
-			loop : true
+			loop: true
 		}).toDestination().sync().start("2n");
 
-		var hh = new Tone.Player({
+		const hh = new Tone.Player({
-			url : "./audio/loop/hh.[mp3|ogg]",
+			url: "./audio/loop/hh.[mp3|ogg]",
-			loop : true
+			loop: true
-		}).toDestination().sync().start("3:3", "4n"); //start with an offset
+		}).toDestination().sync().start("3:3", "4n"); // start with an offset
 
 		// connect the UI with the components
 		document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
@@ -80,9 +80,9 @@
 		// keep the playhead on track
 		setInterval(() => {
 			// scale it between 0-1
-			const progress = (Tone.Transport.progress + 1) / 2
+			const progress = (Tone.Transport.progress + 1) / 2;
 			document.querySelector("#progress").style = `left: ${progress*100}%`;
-		}, 16)
+		}, 16);
 	</script>
 </body>
 </html>

examples/envelope.html

@@ -41,28 +41,28 @@
 	</tone-example>
 
 	<script type="text/javascript">
-		var env = new Tone.AmplitudeEnvelope({
+		const env = new Tone.AmplitudeEnvelope({
-			"attack" : 0.11,
+			attack: 0.11,
-			"decay" : 0.21,
+			decay: 0.21,
-			"sustain" : 0.5,
+			sustain: 0.5,
-			"release" : 1.2
+			release: 1.2
 		}).toDestination();
 
-		//create an oscillator and connect it to the envelope
+		// create an oscillator and connect it to the envelope
-		var osc = new Tone.Oscillator({
+		const osc = new Tone.Oscillator({
-			"partials" : [3, 2, 1],
+			partials: [3, 2, 1],
-			"type" : "custom",
+			type: "custom",
-			"frequency" : "C#4",
+			frequency: "C#4",
-			"volume" : -8,
+			volume: -8,
 		}).connect(env).start();
 
-		//bind the interface
+		// bind the interface
 		drawer().add({
 			tone: env,
-			name: 'Envelope'
+			name: "Envelope"
 		}).add({
 			tone: osc,
-		})
+		});
 
 		document.querySelector("tone-momentary-button").addEventListener("down", e => env.triggerAttack());
 		document.querySelector("tone-momentary-button").addEventListener("up", e => env.triggerRelease());

examples/events.html

@@ -133,11 +133,10 @@
 			open: false,
 		});
 
-		//bind the interface
+		// bind the interface
 		document.querySelector("tone-play-toggle").addEventListener("start", e => Tone.Transport.start());
 		document.querySelector("tone-play-toggle").addEventListener("stop", e => Tone.Transport.stop());
-		
+				
-		
 	</script>
 </body>
 </html>

examples/fmSynth.html

@@ -47,13 +47,13 @@
 			parent: document.querySelector("#content"),
 			noteon: (note) => synth.triggerAttack(note.name),
 			noteoff: (note) => synth.triggerRelease()
-		})
+		});
 
 		ui({
 			tone: synth,
 			name: "FMSynth",
 			parent: document.querySelector("#content"),
-		})
+		});
 	</script>
 </body>
 </html>

examples/funkyShape.html

@@ -28,16 +28,15 @@
 	</tone-example>
 
 	<script type="text/javascript">
-
 		new p5((p5) => {
 
 			class FunkyShape {
 				/*
-				FunkyShape init gives initial and offset values for 
+					FunkyShape init gives initial and offset values for 
-				the perlin noise functions in update.
+					the perlin noise functions in update.
-				Giving different initial values ensures that 
+					Giving different initial values ensures that 
-				each funky shape follows its own funky path
+					each funky shape follows its own funky path
-				*/
+					*/
 				init(xInc, yInc, xOff, yOff, radius) {
 					this.xInc = xInc;
 					this.yInc = yInc;
@@ -61,7 +60,7 @@
 					};
 				};
 			}
-				
+					
 			// using our FunkyShape class
 			// to create a funkyCircle class
 			const funkyCircle = new FunkyShape();
@@ -191,7 +190,7 @@
 		bleep.start();
 
 		const bleepLoop = new Tone.Loop(((time) => {
-					bleepEnvelope.triggerAttack(time);
+			bleepEnvelope.triggerAttack(time);
 		}), "2n").start(0);
 
 		// KICK
@@ -221,7 +220,7 @@
 		Tone.Transport.loopEnd = "1:0";
 		Tone.Transport.loop = true;
 
-		//bind the interface
+		// bind the interface
 		document.querySelector("tone-play-toggle").addEventListener("start", e => Tone.Transport.start());
 		document.querySelector("tone-play-toggle").addEventListener("stop", e => Tone.Transport.stop());
 

examples/grainPlayer.html

@@ -43,20 +43,20 @@
 	</tone-example>
 
 	<script type="text/javascript">
-		//the player
+		// the player
-		var player = new Tone.GrainPlayer({
+		const player = new Tone.GrainPlayer({
-			"url" : "https://tonejs.github.io/audio/berklee/arpeggio3crazy.mp3",
+			url: "https://tonejs.github.io/audio/berklee/arpeggio3crazy.mp3",
-			"loop" : true,
+			loop: true,
-			"grainSize" : 0.1,
+			grainSize: 0.1,
-			"overlap" : 0.05,
+			overlap: 0.05,
 		}).toDestination();
 
 		ui({
-			parent: document.querySelector('#content'),
+			parent: document.querySelector("#content"),
 			tone: player,
-		})
+		});
 
-		//bind the interface
+		// bind the interface
 		document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
 		document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
 

examples/index.html

@@ -8,9 +8,9 @@
 	<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
 
 	<script type="text/javascript">
-		//forward links with hashes
+		// forward links with hashes
-		if (window.location.hash !== ""){
+		if (window.location.hash !== "") {
-			var hash = window.location.hash.substring(1);
+			const hash = window.location.hash.substring(1);
 			window.location.href = window.location.pathname+hash;
 		}
 	</script>

examples/jump.html

@@ -51,7 +51,6 @@
 				attackCurve: "exponential"
 			},
 		}).toDestination();
-
 				
 		// Van Halen - Jump MIDI from http://www.midiworld.com/files/1121/
 		// converted using 

examples/mic.html

@@ -34,23 +34,23 @@
 	</tone-example>
 	
 	<script type="text/javascript">
-		//you probably DONT want to connect the microphone
+		// you probably DONT want to connect the microphone
-		//directly to the master output because of feedback.
+		// directly to the master output because of feedback.
-		var mic = new Tone.UserMedia();
+		const mic = new Tone.UserMedia();
 
-		const micFFT = new Tone.FFT()
+		const micFFT = new Tone.FFT();
-		mic.connect(micFFT)
+		mic.connect(micFFT);
 
 		fft({
 			tone: micFFT,
-			parent: document.querySelector('#content')
+			parent: document.querySelector("#content")
-		})
+		});
 
-		//bind the interface
+		// bind the interface
-		const micButton = document.querySelector('tone-mic-button')
+		const micButton = document.querySelector("tone-mic-button");
-		micButton.supported = Tone.UserMedia.supported
+		micButton.supported = Tone.UserMedia.supported;
-		micButton.addEventListener('open', () => mic.open())
+		micButton.addEventListener("open", () => mic.open());
-		micButton.addEventListener('close', () => mic.close())
+		micButton.addEventListener("close", () => mic.close());
 
 	</script>
 

examples/mixer.html

@@ -36,7 +36,6 @@
 	</tone-example>
 
 	<script type="text/javascript">
-				
 		function makeChannel(name, url, pan) {
 			const channel = new Tone.Channel({
 				pan
@@ -54,23 +53,22 @@
 				parent: document.querySelector("#content")
 			});
 		}
-		
+					
 		// create a meter on the destination node
-		const toneMeter = new Tone.Meter({channels: 2})
+		const toneMeter = new Tone.Meter({ channels: 2 });
-		Tone.Destination.chain(toneMeter)
+		Tone.Destination.chain(toneMeter);
 		meter({
 			tone: toneMeter,
 			parent: document.querySelector("#content")
-		})
+		});
 
 		makeChannel("Guitar 0", "comping1", 1);
 		makeChannel("Guitar 1", "comping2", -1);
 		makeChannel("Guitar 2", "comping3", 0.25);
 		makeChannel("Guitar 3", "comping4", -0.25);
 
-
+		document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
-		document.querySelector('tone-play-toggle').addEventListener('start', () => Tone.Transport.start())
+		document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
-		document.querySelector('tone-play-toggle').addEventListener('stop', () => Tone.Transport.stop())
 	</script>
 </body>
 </html>

examples/monoSynth.html

@@ -31,7 +31,6 @@
 	</tone-example>
 
 	<script type="text/javascript">
-				
 		const synth = new Tone.PolySynth(Tone.MonoSynth, {
 			volume: -8,
 			oscillator: {
@@ -56,14 +55,14 @@
 		piano({
 			noteon: (note) => synth.triggerAttack(note.name),
 			noteoff: (note) => synth.triggerRelease(note.name),
-			parent: document.querySelector('#content')
+			parent: document.querySelector("#content")
-		})
+		});
-		
+				
 		ui({
 			tone: synth,
-			parent: document.querySelector('#content'),
+			parent: document.querySelector("#content"),
-			name: 'MonoSynth'
+			name: "MonoSynth"
-		})
+		});
 
 	</script>
 </body>

examples/noises.html

@@ -36,28 +36,28 @@
 	</tone-example>
 
 	<script type="text/javascript">
-		//make the noise and connect it to the output
+		// make the noise and connect it to the output
 		const noise = new Tone.Noise({
-			volume : -10,
+			volume: -10,
-			type : "brown"
+			type: "brown"
 		}).toDestination();
 
-		const toneWaveform = new Tone.Waveform()
+		const toneWaveform = new Tone.Waveform();
-		noise.connect(toneWaveform)
+		noise.connect(toneWaveform);
 
 		waveform({
-			parent: document.querySelector('#content'),
+			parent: document.querySelector("#content"),
 			tone: toneWaveform,
-		})
+		});
 		
 		ui({
-			parent: document.querySelector('#content'),
+			parent: document.querySelector("#content"),
 			tone: noise,
-		})
+		});
 
-		//bind the inteface
+		// bind the inteface
-		document.querySelector("tone-momentary-button").addEventListener('down', () => noise.start())
+		document.querySelector("tone-momentary-button").addEventListener("down", () => noise.start());
-		document.querySelector("tone-momentary-button").addEventListener('up', () => noise.stop())
+		document.querySelector("tone-momentary-button").addEventListener("up", () => noise.stop());
 	</script>
 </body>
 </html>

examples/offline.html

@@ -93,10 +93,10 @@
 
 		// set the buffer when it's done
 		renderingPromise.then(buffer => player.buffer = buffer);
-		renderingPromise.then(() => document.querySelector('tone-play-toggle').disabled = false)
+		renderingPromise.then(() => document.querySelector("tone-play-toggle").disabled = false);
 
-		document.querySelector('tone-play-toggle').addEventListener('start', () => player.start())
+		document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
-		document.querySelector('tone-play-toggle').addEventListener('stop', () => player.stop())
+		document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
 
 	</script>
 </body>

examples/oscillator.html

@@ -34,20 +34,20 @@
 
 
 	<script type="text/javascript">
-		var osc = new Tone.Oscillator({
+		const osc = new Tone.Oscillator({
-			"type" : "square",
+			type: "square",
-			"frequency" : 440,
+			frequency: 440,
-			"volume" : -16
+			volume: -16
 		}).toDestination();
 
 		ui({
 			tone: osc,
-			parent: document.querySelector('#content')
+			parent: document.querySelector("#content")
-		})
+		});
 
-		//bind the interface
+		// bind the interface
-		document.querySelector('tone-momentary-button').addEventListener('down', () => osc.start())
+		document.querySelector("tone-momentary-button").addEventListener("down", () => osc.start());
-		document.querySelector('tone-momentary-button').addEventListener('up', () => osc.stop())
+		document.querySelector("tone-momentary-button").addEventListener("up", () => osc.stop());
 	</script>
 </body>
 </html>

examples/pianoPhase.html

@@ -62,7 +62,6 @@
 	</tone-example>
 
 	<script type="text/javascript">
-
 		// set the bpm and time signature first
 		Tone.Transport.timeSignature = [6, 4];
 		Tone.Transport.bpm.value = 180;
@@ -112,27 +111,26 @@
 		// set the playback rate of the right part to be slightly slower
 		partR.playbackRate = 0.985;
 
-
+		// bind the interface
-		//bind the interface
+		document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
-		document.querySelector('tone-play-toggle').addEventListener('start', () => Tone.Transport.start())
+		document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
-		document.querySelector('tone-play-toggle').addEventListener('stop', () => Tone.Transport.stop())
 
 		// update the width of the fill bars to reflect the left and right progress
-		function progressToWidth(progress){
+		function progressToWidth(progress) {
-			progress = Math.cos(progress * Math.PI * 2 + Math.PI)
+			progress = Math.cos(progress * Math.PI * 2 + Math.PI);
-			progress = (progress + 1) / 2
+			progress = (progress + 1) / 2;
-			return `${progress * 100}%`
+			return `${progress * 100}%`;
 		}
-		function loop(){
+		function loop() {
-			requestAnimationFrame(loop)
+			requestAnimationFrame(loop);
 			// make it go out and back for each loop
-			document.querySelector("#left").style.width = progressToWidth(partL.progress)
+			document.querySelector("#left").style.width = progressToWidth(partL.progress);
-			document.querySelector("#right").style.width = progressToWidth(partR.progress)
+			document.querySelector("#right").style.width = progressToWidth(partR.progress);
 		}
-		loop()
+		loop();
 		// document.querySelector("#left").bind(partL);
 		// document.querySelector("#right").bind(partR);
-		/*// GUI //
+		/* // GUI //
 
 		Interface.Button({
 			key : 32,
@@ -200,7 +198,7 @@
 			rightContext.stroke();
 			rightContext.restore();
 		}
-		loop();*/
+		loop(); */
 		
 	</script>
 </body>

examples/pingPongDelay.html

@@ -29,26 +29,26 @@
 	</tone-example>
 	
 	<script type="text/javascript">
-		//the feedback delay
+		// the feedback delay
-		var feedbackDelay = new Tone.PingPongDelay({
+		const feedbackDelay = new Tone.PingPongDelay({
-			"delayTime" : "8n",
+			delayTime: "8n",
-			"feedback" : 0.6,
+			feedback: 0.6,
-			"wet" : 0.5
+			wet: 0.5
 		}).toDestination();
 
-		//play a snare sound through it
+		// play a snare sound through it
 		const player = new Tone.Player("https://tonejs.github.io/audio/drum-samples/CR78/snare.mp3").connect(feedbackDelay);
 
-		const toneMeter = new Tone.Meter({channels: 2})
+		const toneMeter = new Tone.Meter({ channels: 2 });
-		feedbackDelay.connect(toneMeter)
+		feedbackDelay.connect(toneMeter);
 
 		meter({
 			tone: toneMeter,
-			parent: document.querySelector('#content')
+			parent: document.querySelector("#content")
-		})
+		});
 
-		document.querySelector("tone-momentary-button").addEventListener('down', () => player.start())
+		document.querySelector("tone-momentary-button").addEventListener("down", () => player.start());
-		document.querySelector("tone-momentary-button").addEventListener('up', () => player.stop())
+		document.querySelector("tone-momentary-button").addEventListener("up", () => player.stop());
 	</script>
 </body>
 </html>

examples/pitchShift.html

@@ -35,20 +35,20 @@
 	</tone-example>
 
 	<script type="text/javascript">
-		const pitchShift = new Tone.PitchShift().toDestination()
+		const pitchShift = new Tone.PitchShift().toDestination();
-		const player = new Tone.Player("https://tonejs.github.io/audio/berklee/groovin_analogsynth1.mp3").connect(pitchShift)
+		const player = new Tone.Player("https://tonejs.github.io/audio/berklee/groovin_analogsynth1.mp3").connect(pitchShift);
 		player.loop = true;
 
-		const toneFFT = new Tone.FFT()
+		const toneFFT = new Tone.FFT();
-		pitchShift.connect(toneFFT)
+		pitchShift.connect(toneFFT);
 		fft({
-			parent: document.querySelector('#content'),
+			parent: document.querySelector("#content"),
 			tone: toneFFT,
-		})
+		});
 
-		//bind the interface
+		// bind the interface
-		document.querySelector("tone-play-toggle").addEventListener('start', () => player.start());
+		document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
-		document.querySelector("tone-play-toggle").addEventListener('stop', () => player.stop());
+		document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
 		// document.querySelector("tone-play-toggle").addEventListener('start', () => {
 		// 	debugger;
 		// });

examples/player.html

@@ -32,22 +32,22 @@
 	</tone-example>
 	
 	<script type="text/javascript">
-		//the player
+		// the player
-		var player = new Tone.Player({
+		const player = new Tone.Player({
-			"url" : "https://tonejs.github.io/audio/loop/FWDL.mp3",
+			url: "https://tonejs.github.io/audio/loop/FWDL.mp3",
-			"loop" : true,
+			loop: true,
-			"loopStart" : 0.5,
+			loopStart: 0.5,
-			"loopEnd" : 0.7,
+			loopEnd: 0.7,
 		}).toDestination();
 
 		ui({
 			tone: player,
-			parent: document.querySelector('#content')
+			parent: document.querySelector("#content")
-		})
+		});
 
-		//bind the interface
+		// bind the interface
-		document.querySelector("tone-play-toggle").addEventListener('start', () => player.start());
+		document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
-		document.querySelector("tone-play-toggle").addEventListener('stop', () => player.stop());
+		document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
 	</script>
 
 </body>

examples/polySynth.html

@@ -34,23 +34,23 @@
 	</tone-example>
 	
 	<script type="text/javascript">
-		var synth = new Tone.PolySynth(Tone.Synth, {
+		const synth = new Tone.PolySynth(Tone.Synth, {
-			"oscillator" : {
+			oscillator: {
-				"partials" : [0, 2, 3, 4],
+				partials: [0, 2, 3, 4],
 			}
 		}).toDestination();
 
 		piano({
-			parent: document.querySelector('#content'),
+			parent: document.querySelector("#content"),
 			polyphonic: true,
 			noteon: note => synth.triggerAttack(note.name),
 			noteoff: note => synth.triggerRelease(note.name)
-		})
+		});
 		
 		ui({
 			tone: synth,
-			parent: document.querySelector('#content'),
+			parent: document.querySelector("#content"),
-		})
+		});
 	</script>
 </body>
 </html>

examples/quantization.html

@@ -50,28 +50,28 @@
 	</tone-example>
 
 	<script type="text/javascript">
-		var polySynth = new Tone.PolySynth(Tone.Synth).toDestination();
+		const polySynth = new Tone.PolySynth(Tone.Synth).toDestination();
 
-		function loop(){
+		function loop() {
-			requestAnimationFrame(loop)
+			requestAnimationFrame(loop);
-			const [bar, beat, sixteenth] = Tone.Transport.position.split(':')
+			const [bar, beat, sixteenth] = Tone.Transport.position.split(":");
-			document.querySelector('#progress').textContent = `
+			document.querySelector("#progress").textContent = `
 				bar: ${bar}, beat: ${beat}, sixteenth: ${sixteenth}
-			`
+			`;
 		}
-		loop()
+		loop();
 
-		//bind the interface
+		// bind the interface
 		document.querySelector("tone-play-toggle").addEventListener("start", e => {
-			Tone.Transport.start()
+			Tone.Transport.start();
-			//enable all of the buttons if it's playing		
+			// enable all of the buttons if it's playing		
 			Array.from(document.querySelectorAll("tone-button")).forEach(el => el.disabled = false);
 		});
-		document.querySelector("tone-play-toggle").addEventListener('stop', () => {
+		document.querySelector("tone-play-toggle").addEventListener("stop", () => {
-			Tone.Transport.stop()
+			Tone.Transport.stop();
-			//disable all of the buttons if it's not playing		
+			// disable all of the buttons if it's not playing		
 			Array.from(document.querySelectorAll("tone-button")).forEach(el => el.disabled = true);
-		})
+		});
 		document.querySelector("#at8n").addEventListener("click", e => {
 			polySynth.triggerAttackRelease("B4", "8n", "@8n");
 		});

examples/rampTo.html

@@ -36,20 +36,20 @@
 	</tone-example>
 
 	<script type="text/javascript">
-		var oscillators = [];
+		const oscillators = [];
 
-		var bassFreq = 32;
+		const bassFreq = 32;
 
-		for (var i = 0; i < 8; i++){
+		for (let i = 0; i < 8; i++) {
 			oscillators.push(new Tone.Oscillator({
-				"frequency" : bassFreq * i,
+				frequency: bassFreq * i,
-				"type" : "sawtooth4",
+				type: "sawtooth4",
-				"volume" : -Infinity,
+				volume: -Infinity,
-				"detune" : Math.random() * 30 - 15,
+				detune: Math.random() * 30 - 15,
 			}).toDestination());
 		}
 
-		//bind the interface
+		// bind the interface
 		document.querySelector("tone-play-toggle").addEventListener("start", e => {
 			oscillators.forEach(o => {
 				o.start();
@@ -62,8 +62,7 @@
 				o.stop("+1.2");
 				o.volume.rampTo(-Infinity, 1);
 			});
-		})
+		});
-
 
 		document.querySelector("tone-slider").addEventListener("input", e => {
 			oscillators.forEach((osc, i) => {

examples/reverb.html

@@ -34,7 +34,7 @@
 	</tone-example>
 	
 	<script type="text/javascript">
-		var reverb = new Tone.Reverb().toDestination();
+		const reverb = new Tone.Reverb().toDestination();
 
 		const player = new Tone.Player({
 			url: "https://tonejs.github.io/audio/berklee/shaker_slow_1.mp3",
@@ -43,13 +43,13 @@
 		}).connect(reverb);
 
 		ui({
-			parent: document.querySelector('#content'),
+			parent: document.querySelector("#content"),
 			tone: reverb
-		})
+		});
 
-		//bind the interface
+		// bind the interface
-		document.querySelector("tone-play-toggle").addEventListener('start', () => player.start())
+		document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
-		document.querySelector("tone-play-toggle").addEventListener('stop', () => player.stop())
+		document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
 
 	</script>
 </body>

examples/sampler.html

@@ -31,10 +31,8 @@
 	</tone-example>
 
 	<script type="text/javascript">
-		
 		const sampler = new Tone.Sampler({
 			urls: {
-
 				A0: "A0.mp3",
 				C1: "C1.mp3",
 				"D#1": "Ds1.mp3",
@@ -71,10 +69,10 @@
 		}).toDestination();
 
 		piano({
-			parent: document.querySelector('#content'),
+			parent: document.querySelector("#content"),
 			noteon: note => sampler.triggerAttack(note.name),
 			noteoff: note => sampler.triggerRelease(note.name),
-		})
+		});
 	</script>
 
 </body>

examples/shiny.html

@@ -36,7 +36,6 @@
 	</tone-example>
 
 	<script type="text/javascript">
-			
 		// a compressor
 		const drumCompress = new Tone.Compressor({
 			threshold: -30,
@@ -58,7 +57,7 @@
 		}).chain(distortion, drumCompress);
 
 		const hatsLoop = new Tone.Loop({
-			callback: function (time) {
+			callback: function(time) {
 				hats.start(time).stop(time + 0.05);
 			},
 			interval: "16n",
@@ -124,13 +123,13 @@
 				bass.triggerAttackRelease(event.note, event.dur, time);
 			}
 		}), [{ time: "0:0", note: "C2", dur: "4n.", prob: 1 }, { time: "0:2", note: "C2", dur: "8n", prob: 0.6 },
-		{ time: "0:2.6666", note: "C2", dur: "8n", prob: 0.4 }, { time: "0:3.33333", note: "C2", dur: "8n", prob: 0.9 },
+			{ time: "0:2.6666", note: "C2", dur: "8n", prob: 0.4 }, { time: "0:3.33333", note: "C2", dur: "8n", prob: 0.9 },
-		{ time: "1:0", note: "C2", dur: "4n.", prob: 1 }, { time: "1:2", note: "C2", dur: "8n", prob: 0.6 },
+			{ time: "1:0", note: "C2", dur: "4n.", prob: 1 }, { time: "1:2", note: "C2", dur: "8n", prob: 0.6 },
-		{ time: "1:2.6666", note: "C2", dur: "8n", prob: 0.4 }, { time: "1:3.33333", note: "E2", dur: "8n", prob: 0.9 },
+			{ time: "1:2.6666", note: "C2", dur: "8n", prob: 0.4 }, { time: "1:3.33333", note: "E2", dur: "8n", prob: 0.9 },
-		{ time: "2:0", note: "F2", dur: "4n.", prob: 1 }, { time: "2:2", note: "F2", dur: "8n", prob: 0.6 },
+			{ time: "2:0", note: "F2", dur: "4n.", prob: 1 }, { time: "2:2", note: "F2", dur: "8n", prob: 0.6 },
-		{ time: "2:2.6666", note: "F2", dur: "8n", prob: 0.4 }, { time: "2:3.33333", note: "F2", dur: "8n", prob: 0.9 },
+			{ time: "2:2.6666", note: "F2", dur: "8n", prob: 0.4 }, { time: "2:3.33333", note: "F2", dur: "8n", prob: 0.9 },
-		{ time: "3:0", note: "F2", dur: "4n.", prob: 1 }, { time: "3:2", note: "F2", dur: "8n", prob: 0.6 },
+			{ time: "3:0", note: "F2", dur: "4n.", prob: 1 }, { time: "3:2", note: "F2", dur: "8n", prob: 0.6 },
-		{ time: "3:2.6666", note: "F2", dur: "8n", prob: 0.4 }, { time: "3:3.33333", note: "B1", dur: "8n", prob: 0.9 }]).start(0);
+			{ time: "3:2.6666", note: "F2", dur: "8n", prob: 0.4 }, { time: "3:3.33333", note: "B1", dur: "8n", prob: 0.9 }]).start(0);
 
 		bassPart.loop = true;
 		bassPart.loopEnd = "4m";
@@ -212,7 +211,6 @@
 			synth.vibratoAmount.value = y;
 		}
 
-
 		const drwr = drawer({
 			parent: document.querySelector("#content"),
 			open: false,
@@ -247,12 +245,12 @@
 			name: "Synth"
 		});
 
-		document.querySelector('tone-slider-pad').addEventListener('move', e => move(e.detail))
+		document.querySelector("tone-slider-pad").addEventListener("move", e => move(e.detail));
-		document.querySelector('tone-slider-pad').addEventListener('down', e => triggerAttack(e.detail))
+		document.querySelector("tone-slider-pad").addEventListener("down", e => triggerAttack(e.detail));
-		document.querySelector('tone-slider-pad').addEventListener('up', () => synth.triggerRelease())
+		document.querySelector("tone-slider-pad").addEventListener("up", () => synth.triggerRelease());
 
-		document.querySelector('tone-play-toggle').addEventListener('start', () => Tone.Transport.start())
+		document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
-		document.querySelector('tone-play-toggle').addEventListener('stop', () => Tone.Transport.stop())
+		document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
 	</script>
 </body>
 </html>

examples/signal.html

@@ -44,47 +44,48 @@
 		</div>
 	</tone-example>
 	
-	<script type="text/javascript">//use this to pan the two oscillators hard left/right
+	<script type="text/javascript">
-		var merge = new Tone.Merge().toDestination();
+		// use this to pan the two oscillators hard left/right
+		const merge = new Tone.Merge().toDestination();
 
-		//two oscillators panned hard left / hard right
+		// two oscillators panned hard left / hard right
-		var rightOsc = new Tone.Oscillator({
+		const rightOsc = new Tone.Oscillator({
-			"type" : "sawtooth",
+			type: "sawtooth",
-			"volume" : -20
+			volume: -20
 		}).connect(merge, 0, 0);
 
-		var leftOsc = new Tone.Oscillator({
+		const leftOsc = new Tone.Oscillator({
-			"type" : "square",
+			type: "square",
-			"volume" : -20
+			volume: -20
 		}).connect(merge, 0, 1);
 
-		//create an oscillation that goes from 0 to 1200
+		// create an oscillation that goes from 0 to 1200
-		//connection it to the detune of the two oscillators
+		// connection it to the detune of the two oscillators
-		var detuneLFO = new Tone.LFO({
+		const detuneLFO = new Tone.LFO({
-			"type" : "square",
+			type: "square",
-			"min" : 0,
+			min: 0,
-			"max" : 1200
+			max: 1200
 		}).fan(rightOsc.detune, leftOsc.detune).start();
 
-		//the frequency signal
+		// the frequency signal
-		var frequency = new Tone.Signal(0.5);
+		const frequency = new Tone.Signal(0.5);
 
-		//the move the 0 to 1 value into frequency range
+		// the move the 0 to 1 value into frequency range
-		var scale = new Tone.ScaleExp(110, 440);
+		const scale = new Tone.ScaleExp(110, 440);
 		
-		//multiply the frequency by 2.5 to get a 10th above
+		// multiply the frequency by 2.5 to get a 10th above
-		var mult = new Tone.Multiply(2.5);
+		const mult = new Tone.Multiply(2.5);
 		
-		//chain the components together
+		// chain the components together
 		frequency.chain(scale, mult);
 		scale.connect(rightOsc.frequency);
 		mult.connect(leftOsc.frequency);
 
-		//multiply the frequency by 2 to get the octave above
+		// multiply the frequency by 2 to get the octave above
-		var detuneScale = new Tone.Scale(14, 4);
+		const detuneScale = new Tone.Scale(14, 4);
 		frequency.chain(detuneScale, detuneLFO.frequency);		
 
-		//start the oscillators with the play button
+		// start the oscillators with the play button
 		document.querySelector("tone-play-toggle").addEventListener("start", () => {
 			rightOsc.start();
 			leftOsc.start();
@@ -94,7 +95,7 @@
 			leftOsc.stop();
 		});
 
-		//ramp the frequency with the slider
+		// ramp the frequency with the slider
 		document.querySelector("tone-slider").addEventListener("input", e => {
 			frequency.rampTo(parseFloat(e.target.value), 0.1);
 		});

examples/simpleHtml.html

@@ -9,7 +9,7 @@
 		<script>
 			function playNote() {
 				// create a synth
-				var synth = new Tone.Synth().toDestination();
+				const synth = new Tone.Synth().toDestination();
 				// play a note from that synth
 				synth.triggerAttackRelease("C4", "8n");
 			}

examples/simpleSynth.html

@@ -33,19 +33,19 @@
 
 	<script type="text/javascript">
 		const synth = new Tone.Synth({
-			"oscillator" : {
+			oscillator: {
-				"type" : "amtriangle",
+				type: "amtriangle",
-				"harmonicity" : 0.5,
+				harmonicity: 0.5,
-				"modulationType" : "sine"
+				modulationType: "sine"
 			},
-			"envelope" : {
+			envelope: {
-				"attackCurve" : "exponential",
+				attackCurve: "exponential",
-				"attack" : 0.05,
+				attack: 0.05,
-				"decay" : 0.2,
+				decay: 0.2,
-				"sustain" : 0.2,
+				sustain: 0.2,
-				"release" : 1.5,
+				release: 1.5,
 			},
-			"portamento" : 0.05
+			portamento: 0.05
 		}).toDestination();
 
 		piano({
@@ -53,13 +53,13 @@
 			parent: document.querySelector("#content"),
 			noteon: (note) => synth.triggerAttack(note.name),
 			noteoff: (note) => synth.triggerRelease()
-		})
+		});
 
 		ui({
 			tone: synth,
 			name: "Synth",
 			parent: document.querySelector("#content"),
-		})
+		});
 
 	</script>
 </body>

examples/spatialPanner.html

@@ -78,9 +78,8 @@
 		createPlayerPlusPanner("https://tonejs.github.io/audio/berklee/tapping1.mp3", -2, 0, 2);
 		createPlayerPlusPanner("https://tonejs.github.io/audio/berklee/thump1.mp3", -2, 0, -2);
 
-		document.querySelector("tone-play-toggle").addEventListener('start', () => Tone.Transport.start());
+		document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
-		document.querySelector("tone-play-toggle").addEventListener('stop', () => Tone.Transport.stop());
+		document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
-		
 		
 		function setRotation(angle) {
 			Tone.Listener.forwardX.value = Math.sin(angle);
@@ -88,9 +87,9 @@
 			Tone.Listener.forwardZ.value = -Math.cos(angle);
 		}
 		
-		document.querySelector("#xSlider").addEventListener('input', (e) => Tone.Listener.positionX.value = parseFloat(e.target.value));
+		document.querySelector("#xSlider").addEventListener("input", (e) => Tone.Listener.positionX.value = parseFloat(e.target.value));
-		document.querySelector("#zSlider").addEventListener('input', (e) => Tone.Listener.positionY.value = parseFloat(e.target.value));
+		document.querySelector("#zSlider").addEventListener("input", (e) => Tone.Listener.positionY.value = parseFloat(e.target.value));
-		document.querySelector("#rotation").addEventListener('input', (e) => setRotation(parseFloat(e.target.value)));
+		document.querySelector("#rotation").addEventListener("input", (e) => setRotation(parseFloat(e.target.value)));
 
 	</script>
 

examples/stepSequencer.html

@@ -33,7 +33,6 @@
 		</div>
 	</tone-example>
 
-
 	<script type="text/javascript">
 		const keys = new Tone.Players({
 			urls: {
@@ -42,16 +41,15 @@
 				2: "E2.mp3",
 				3: "Fs2.mp3",
 			},
-			volume: -8,
 			fadeOut: "64n",
 			baseUrl: "https://tonejs.github.io/audio/casio/"
 		}).toDestination();
 
-		document.querySelector("tone-play-toggle").addEventListener('start', () => Tone.Transport.start());
+		document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
-		document.querySelector("tone-play-toggle").addEventListener('stop', () => Tone.Transport.stop());
+		document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
-		document.querySelector("tone-slider").addEventListener('input', (e) => Tone.Transport.bpm.value = parseFloat(e.target.value));
+		document.querySelector("tone-slider").addEventListener("input", (e) => Tone.Transport.bpm.value = parseFloat(e.target.value));
-		document.querySelector("tone-step-sequencer").addEventListener('trigger', ({detail}) => {
+		document.querySelector("tone-step-sequencer").addEventListener("trigger", ({ detail }) => {
-			keys.player(detail.row).start(detail.time, 0, "16t")
+			keys.player(detail.row).start(detail.time, 0, "16t");
 		});
 
 	</script>