Audio
Sound FX
This is an example managing sound effects:
<!DOCTYPE html>
<html>
<head>
<!-- This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. -->
<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="https://crossbrowdy.com/examples/audio/sound_fx/try" />
<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): -->
<!-- Note: it is recommended to download CrossBrowdy instead of hotlinking the online version. This is just for the example! -->
<script src="https://crossbrowdy.com/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>
<div id="messages">Loading...</div>
<button id="start_button" onClick="jsfxObjectPrepare();">
<span style="display:block; margin-top:10px;">Start!</span>
</button>
<!-- Using jsfx library internally: https://github.com/loov/jsfx -->
<span id="controls">
<button onClick="play('sound_fx_1');">Sound effect #1</button>
<button onClick="play('sound_fx_2');">Sound effect #2</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="display:none; visibility:hidden; overflow:scroll;">
<span style="font-weight:bold;">Console:</span><br />
</div>
<div id="crossbrowdy_info"><a href="https://crossbrowdy.com/examples/audio/sound_fx" target="_blank">CrossBrowdy.com example</a></div>
</body>
</html>/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */
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; margin-bottom:20px; }
#start_button
{
visibility: hidden;
display: none;
position:absolute;
left:25%;
top:25%;
width:50%;
height:50%;
color:#ff0000;
font-weight:bold;
cursor:pointer;
cursor:hand;
filter:alpha(opacity=80);
opacity:0.8;
-moz-opacity:0.8;
-khtml-opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
#start_button:hover
{
color:#ffaa00;
filter:alpha(opacity=100);
opacity:1;
-moz-opacity:1;
-khtml-opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */
/* 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()
{
//Hides any messages:
CB_Elements.hideById("messages");
//Shows the start button:
CB_Elements.showById("start_button");
}
//Prepares the 'jsfx' object and shows the controls if all goes well:
function jsfxObjectPrepare()
{
//Hides the start button:
CB_Elements.hideById("start_button");
//Sound effects example:
var jsfxObject = CB_Speaker.getJsfxObject(); //Gets the 'jsfx' object.
if (jsfxObject !== null)
{
//Defines the sound effects:
var library =
{
"sound_fx_1":
{
"Volume":
{
"Sustain": 0.1,
"Decay": 0.15,
"Punch": 0.55
}
},
"sound_fx_2":
{
"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");
}
else
{
var message = "The 'jsfx' (used by the jsfx library) object is null. Probably not supported.";
CB_Elements.showById("messages");
CB_Elements.insertContentById("messages", message);
CB_console(message);
}
}
//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).
try { sfx[id](); }
catch(E)
{
var message = "Error playing sound with '" + id + "' ID: " + E;
CB_Elements.insertContentById("messages", message);
CB_Elements.showById("messages");
CB_console(message);
}
}You can check the Guides & Tutorials category as well as the API documentation in the case you need more information.
All the examples together can be downloaded here.
