CrossBrowdy - Examples

Audio

Sound FX

This is an example managing sound effects:

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: Sound FX - 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 jsfx library internally: https://github.com/loov/jsfx -->
		<span id="controls">
			<button onClick="play('select');">Select</button>
			<button onClick="play('jump');">Jump</button>
			<br />
			<br />
			<button onClick="play('dynamic');">Dynamic</button>
			<br />
			<br />
			Preset:
			<button onClick="play('coin_preset');">Coin</button>
			<button onClick="play('reset_preset');">Reset</button>
			<button onClick="play('laser_preset');">Laser</button>
			<button onClick="play('explosion_preset');">Explosion</button>
			<button onClick="play('powerup_preset');">Powerup</button>
			<button onClick="play('hit_preset');">Hit</button>
			<button onClick="play('jump_preset');">Jump</button>
			<button onClick="play('select_preset');">Select</button>
			<button onClick="play('lucky_preset');">Lucky</button>
			<br />
			<br />
			You can read more about sound effects management in the <a href="https://github.com/loov/jsfx" target="_blank">jsfx library</a> web site. 
		</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 jsfx library internally: https://github.com/loov/jsfx


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


//Global object to play the sounds:
var sfx = null;


//This function will be called when CrossBrowdy is ready:
function main()
{
	//Sound effects example:
	var jsfxObject = CB_Speaker.getJsfxObject(); //Gets the 'jsfx' object.
	if (jsfxObject !== null)
	{
		//Defines the sound effects:
		var library =
		{
			"select":
			{
				"Volume":
				{
					"Sustain": 0.1,
					"Decay": 0.15,
					"Punch": 0.55
				}
			},
			"jump":
			{
				"Frequency":
				{
					"Start": 632.5719976385375,
					"Slide": 0.23934902059283936
				},
				"Generator":
				{
					"Func": "square",
					"A": 0.4414022634702427
				},
				"Filter":
				{
					"HP":0.08955229309222913
				},
				"Volume":
				{
					"Sustain": 0.3053579728670927,
					"Decay": 0.23659526483594398
				}
			},
			"dynamic":
				function()
				{
					return { "Frequency": { "Start": Math.random() * 440 + 220 } };
				},
			"coin_preset":
				jsfx.Preset.Coin,
			"reset_preset":
				jsfx.Preset.Reset,
			"laser_preset":
				jsfx.Preset.Laser,
			"explosion_preset":
				jsfx.Preset.Explosion,
			"powerup_preset":
				jsfx.Preset.Powerup,
			"hit_preset":
				jsfx.Preset.Hit,
			"jump_preset":
				jsfx.Preset.Jump,
			"select_preset":
				jsfx.Preset.Select,
			"lucky_preset":
				jsfx.Preset.Lucky
		};

		//Loads the sound effects:
		sfx = CB_AudioDetector.isAPISupported("WAAPI") ? jsfxObject.Live(library) : jsfxObject.Sounds(library); //Uses AudioContext (Web Audio API) if available.
		
		//Shows the controls:
		CB_Elements.showById("controls");
	}
}


//Plays the desired sound effect (by its identifier):
function play(id)
{
	//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).
	sfx[id]();
}

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