CrossBrowdy - Basic tutorial

With the CB_Speaker static class you can manage audio processing and synthesizing easily. This is done thanks to the timbre.js library and the subcollider.js library.

Here is an example of audio processing and synthesizing:

	//Audio processing and synthesizing example (taken from https://mohayonao.github.io/timbre.js/reich.html):
	var timbreJSObject = CB_Speaker.getTimbreJSObject(); //Gets the 'T' object.
	if (timbreJSObject !== null)
	{
		timbreJSObject.rec
		(
			function(output)
			{
				var midis = [69, 71, 72, 76, 69, 71, 72, 76].scramble();
				var msec  = timbreJSObject.timevalue("bpm120 l8");
				var synth = timbreJSObject
				(
					"OscGen",
					{ env: timbreJSObject("perc", { r: msec, ar: true }) }
				);
				
				timbreJSObject
				(
					"interval",
					{ interval: msec },
					function(count)
					{
						if (count < midis.length)
						{
							synth.noteOn(midis[count], 100);
						}
						else { output.done(); }
					}
				).start();

				output.send(synth);
			}
		).then
		(
			function(result)
			{
				try
				{
					var L = timbreJSObject("buffer", { buffer: result, loop: true });
					var R = timbreJSObject("buffer", { buffer: result, loop: true });
				}
				catch(E) { CB_console("Cannot create buffer. Error: " + E); return; }

				var num = 400;
				var duration = L.duration;

				R.pitch = (duration * (num - 1)) / (duration * num);

				//Plays the audio:
				//Note: at least the first time, it is recommended to do it through a user-driven event (as "onClick", "onTouchStart", etc.) in order to maximize compatibility (as some clients could block sounds otherwise).
				timbreJSObject
				(
					"delay",
					{ time: "bpm120 l16", fb: 0.1, cross: true },
					timbreJSObject("pan", { pos: -0.6 }, L),
					timbreJSObject("pan", { pos: +0.6 }, R)
				).play();
			}
		);
	}

When playing the audio created, at least the first time (you can do it silently as a trick), it is recommended to do it through a user-driven event (as "onClick", "onTouchStart", etc.) in order to maximize compatibility (as some clients could block sounds otherwise).

You can read more about it in the timbre.js library and the subcollider.js library web sites.

Check the API documentation to read more about the CB_Speaker static class.

Go back to Guides & Tutorials