CrossBrowdy - Examples


Music composition

This is an example managing music composition:


<!DOCTYPE html>
		<!-- This file belongs to a example, made by Joan Alba Maldonado. -->
		<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" />
		<link rel="canonical" href="" />
		<title>Audio: Music composition - Example</title>
		<!-- Loads the needed CSS files: -->
		<link rel="stylesheet" type="text/css" href="main.css" />
		<!-- Loads CrossBrowdy.js (main file): -->
		<!-- Note: it is recommended to download CrossBrowdy instead of hotlinking the online version. This is just for the example! -->
		<script src="" 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>
		<div id="messages">Loading...</div>
		<!-- Using Band.js library internally: -->
		<span id="controls">
			<button id="play_button" onClick="play();">Play</button>
			<br />
			<br />
			You can read more about it in the <a href="" target="_blank">Band.js library</a> web site.
		<br />
		<!-- The "CB_console" element will be used automatically in the case that the client does not support console: -->
		<div id="CB_console" style="display:none; visibility:hidden; overflow:scroll;">
			<span style="font-weight:bold;">Console:</span><br />
		<div id="crossbrowdy_info"><a href="/guides#examples" target="_blank"></a> example</div>


/* This file belongs to a example, made by Joan Alba Maldonado. */

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; cursor:hand; }
#controls { display:none; visibility:hidden; text-align:center; }
#messages { text-align:center; color:#00aa00; font-weight:bold; }


/* This file belongs to a example, made by Joan Alba Maldonado. */
/* Using Band.js library internally: */

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

//Global 'BandJS' object to play the sounds:
var bandJSObject = null;

//This function will be called when CrossBrowdy is ready:
function main()
	//Music composition example (taken from
	bandJSObject = CB_Speaker.getBandJSObject(); //Gets a new 'BandJS' object.
	if (bandJSObject !== null)
		//Sets a time signature:
		bandJSObject.setTimeSignature(4, 4);

		//Sets the tempo:

		//Hides any messages:

		//Shows the controls:
		var message = "The 'BandJS' (used by the Band.js library) object is null. Probably not supported.";
		CB_Elements.insertContentById("messages", message);

//Plays the music:
function play()
	//Creates an instrument and adds notes:
	var piano = bandJSObject.createInstrument();
	piano.note("quarter", "C4");
	piano.note("quarter", "D4");
	piano.note("quarter", "E4");
	piano.note("quarter", "F4");

	//Finishes and plays it:
	//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).
	var player = bandJSObject.finish();

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

Try this example