offline rendering example

[skip ci]
2024-12-27 03:53:07 +00:00 · 2017-03-26 12:33:28 -04:00 · 2017-03-26 12:33:28 -04:00 · 050e868a61
commit 050e868a61
parent 90263ac0fc
1 changed files with 107 additions and 0 deletions
--- a/examples/offline.html
+++ b/examples/offline.html
@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+	<title>Offline</title>
+	
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+	<link rel="icon" type="image/png" sizes="174x174" href="./style/favicon.png">
+
+	<script src="../build/Tone.js"></script>
+	<script src="./scripts/jquery.min.js"></script>
+	<script src="./scripts/draggabilly.js"></script>
+	<script src="./scripts/StartAudioContext.js"></script>
+	<script src="./scripts/Interface.js"></script>
+	<script src="https://tonejs.github.io/Logo/build/Logo.js"></script>
+
+	<link rel="stylesheet" type="text/css" href="./style/examples.css">
+
+	<script>
+		// jshint ignore: start
+	</script>
+
+	<style type="text/css">
+		.Button {
+			pointer-events: none;
+		}
+		.Button.Ready {
+			pointer-events: initial;
+		}
+	</style>
+</head>
+<body>
+	<div id="Content">
+		<div id="Title">Offline</div>
+		<div id="Explanation">
+			Tone.Offline renders a chunk of Tone.js code into an AudioBuffer. An offline instance of Tone.Transport is passed into the callback which can be used to schedule events. It may take a moment to render the sound. 
+			<br><br>
+			<a href="https://tonejs.github.io/docs/#Offline">Tone.Offline</a> docs.
+		</div>
+	</div>
+	<script>
+
+		//load the buffer for use in the convolver
+		var buffer = new Tone.Buffer("https://googlechrome.github.io/web-audio-samples/samples/audio/impulse-responses/chorus-feedback.wav");
+
+		Tone.loaded().then(function(){
+
+			return Tone.Offline(function(){
+
+				var reverb = new Tone.Convolver(buffer).toMaster();
+
+				reverb.wet.value = 0.2;
+
+				var count = 40;
+				var duration = 0.2;
+
+				for (var i = 0; i < count; i++){
+					var norm = i / count;
+					var pan = Math.cos(norm * Math.PI * 2);
+					var panner = new Tone.Panner(pan).connect(reverb);
+					var synth = new Tone.Synth({
+						"envelope" : {
+							"attack" : 0.001,
+							"decay" : 5,
+							"sustain" : 0
+						},
+						"oscillator" : {
+							"type" : "square10"
+						}
+					}).connect(panner);
+
+					var time = norm * duration;
+					var freq = pan * 400 + 500;
+					synth.triggerAttack(freq, time, 0.1);
+				}
+
+			}, 7)
+
+		}).then(function(buffer){
+
+			//set the buffer once it's rendered
+			player.buffer = buffer;
+			button.element.text("Play");
+			button.element.addClass("Ready");
+
+		})
+
+		var player = new Tone.Player().toMaster();
+
+		// GUI //
+
+		var button = Interface.Button({
+			text : "Play",
+			activeText : "Stop",
+			type : "toggle",
+			start : function(){
+				player.start();
+			},
+			end : function(){
+				player.stop();
+			}
+		});
+		button.element.text("Rendering...");
+
+	</script>
+</body>
+</html>