CrossBrowdy - Examples

Audio

Processing and synthesizing

This is an example about processing and synthesizing audio:

index.html:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Audio: Processing and synthesizing - Example</title>
		<!-- Loads the needed CSS files: -->
		<link rel="stylesheet" type="text/css" href="main.css" />
		<!-- Loads CrossBrowdy.js (main file): -->
		<script src="CrossBrowdy/CrossBrowdy.js" type="text/javascript" language="javascript"></script><!-- "type" and "language" parameters for legacy clients. -->
		<!-- Loads the other needed script files: -->
		<script src="main.js" type="text/javascript" language="javascript"></script>
	</head>
	<body>
		<!-- Using timbre.js library internally: https://mohayonao.github.io/timbre.js/ -->
		<!-- Using subcollider.js library internally: https://mohayonao.github.io/subcollider/ -->
		<span id="controls">
			<button onClick="play();">Play</button>
			<br />
			<br />
			 You can read more about it in the <a href="https://mohayonao.github.io/timbre.js/" target="_blank">timbre.js library</a>
			 and the <a href="https://mohayonao.github.io/subcollider/" target="_blank">subcollider.js library</a> web sites.
		</span>
		<br />
		<!-- The "CB_console" element will be used automatically in the case that the client does not support console: -->
		<div id="CB_console" style="visibility:hidden; overflow:scroll;">
			<span style="font-weight:bold;">Console:</span><br />
		</div>
		<div id="crossbrowdy_info"><a href="/guides#examples" target="_blank">CrossBrowdy.com</a> example</div>
	</body>
</html>

main.css:

body { background-color:#aaddee; word-wrap:break-word; }
#crossbrowdy_info { position:fixed; bottom:2px; right:2px; }
#crossbrowdy_info a { color:#00aadd; }
#crossbrowdy_info a:hover { color:#0033aa; }
span { color:#aa0000; }
button { color:#006600; }
button:hover { color:#660000; cursor:pointer; }
#controls { display:none; visibility:hidden; text-align:center; }

main.js:

//Using timbre.js library internally: https://mohayonao.github.io/timbre.js/
//Using subcollider.js library internally: https://mohayonao.github.io/subcollider/


CB_init(main); //It will call the "main" function when ready.


//Global 'T' object to play the sounds:
var timbreJSObject = null;

//Global 'result':
var bufferResult = null;



//This function will be called when CrossBrowdy is ready:
function main()
{
	//Audio processing and synthesizing example (taken from https://mohayonao.github.io/timbre.js/reich.html):
	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)
			{
				//Shows the controls:
				CB_Elements.showById("controls");
				
				bufferResult = result;
		});
	}
}


//Plays the audio:
function play()
{
	var L = timbreJSObject("buffer", { buffer: bufferResult, loop: true });
	var R = timbreJSObject("buffer", { buffer: bufferResult, loop: true });

	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();
}

Try this example

You can check the Guides & Tutorials category as well as the API documentation in the case you need more information.

Go back to Guides & Tutorials

« PrevReturnNext »
CrossBrowdy by Joan Alba Maldonado