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,18 +55,18 @@
 	</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
 				const noteElement = document.querySelector("#"+note);
 				noteElement.classList.add("active");
@@ -74,7 +74,7 @@
 					noteElement.classList.remove("active");
 				}, 100);
 			}, time);
-		}, ["C4", "E4", "G4", "B4", "D5"]).start(0);
+		}), ["C4", "E4", "G4", "B4", "D5"]).start(0);
 
 		loop.interval = "16n";
 
@@ -82,8 +82,8 @@
 
 		drawer().add({
 			tone: piano,
-			title: 'Piano',
+			title: "Piano",
-		})
+		});
 
 		// connect the UI with the components
 		document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());

examples/bembe.html

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

examples/buses.html

@@ -32,7 +32,6 @@
 	</tone-example>
 
 	<script type="text/javascript">
-				
 				// the source
 const player = new Tone.Player({
 	url: "https://tonejs.github.io/audio/berklee/femalevoice_oo_A4.mp3",

examples/daw.html

@@ -58,17 +58,17 @@
 		Tone.Transport.loopStart = "4m";
 		Tone.Transport.loopEnd = "8m";
 		
-		var kick = new Tone.Player({
+		const kick = new Tone.Player({
 			url: "./audio/loop/kick.[mp3|ogg]",
 			loop: true
 		}).toDestination().sync().start(0);
 
-		var snare = new Tone.Player({
+		const snare = new Tone.Player({
 			url: "./audio/loop/snare.[mp3|ogg]",
 			loop: true
 		}).toDestination().sync().start("2n");
 
-		var hh = new Tone.Player({
+		const hh = new Tone.Player({
 			url: "./audio/loop/hh.[mp3|ogg]",
 			loop: true
 		}).toDestination().sync().start("3:3", "4n"); // start with an offset
@@ -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
-		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
 		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

@@ -137,7 +137,6 @@
 		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,7 +28,6 @@
 	</tone-example>
 
 	<script type="text/javascript">
-
 		new p5((p5) => {
 
 			class FunkyShape {

examples/grainPlayer.html

@@ -44,17 +44,17 @@
 
 	<script type="text/javascript">
 		// 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
 		document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());

examples/index.html

@@ -10,7 +10,7 @@
 	<script type="text/javascript">
 		// forward links with hashes
 		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

@@ -52,7 +52,6 @@
 			},
 		}).toDestination();
 				
-				
 		// Van Halen - Jump MIDI from http://www.midiworld.com/files/1121/
 		// converted using 
 		const part = new Tone.Part(((time, note) => {

examples/mic.html

@@ -36,21 +36,21 @@
 	<script type="text/javascript">
 		// you probably DONT want to connect the microphone
 		// 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
-		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
@@ -56,21 +55,20 @@
 		}
 					
 		// 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

@@ -42,22 +42,22 @@
 			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
-		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
-		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,24 +111,23 @@
 		// set the playback rate of the right part to be slightly slower
 		partR.playbackRate = 0.985;
 
-
 		// 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) {
-			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() {
-			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 //

examples/pingPongDelay.html

@@ -30,25 +30,25 @@
 	
 	<script type="text/javascript">
 		// 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
 		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
-		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

@@ -33,21 +33,21 @@
 	
 	<script type="text/javascript">
 		// 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
-		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() {
-			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
 		document.querySelector("tone-play-toggle").addEventListener("start", e => {
-			Tone.Transport.start()
+			Tone.Transport.start();
 			// 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		
 			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,16 +36,16 @@
 	</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());
 		}
 
@@ -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
-		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,
@@ -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,36 +44,37 @@
 		</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
-		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
 		// 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
-		var frequency = new Tone.Signal(0.5);
+		const frequency = new Tone.Signal(0.5);
 
 		// 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
-		var mult = new Tone.Multiply(2.5);
+		const mult = new Tone.Multiply(2.5);
 		
 		// chain the components together
 		frequency.chain(scale, mult);
@@ -81,7 +82,7 @@
 		mult.connect(leftOsc.frequency);
 
 		// 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

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>