CrossBrowdy - Examples

Audio

Support detection

This is an example detecting audio support:

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: Support detection - 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>
		Note that neither audio API support detection nor audio format detection are necessary when using classes like 'CB_AudioFile', 'CB_AudioFileCache', 'CB_AudioFileSprites', 'CB_AudioFileSpritesPool' or 'CB_Speaker' as they already detect all automatically for you.
		<br />
		<br />
		Existing audio APIs: <span id="existing_apis"></span><br />
		Supported audio APIs: <span id="supported_apis"></span><br />
		Supported audio APIs, with emulation: <span id="supported_apis_emulation"></span><br />
		Supported audio APIs (array): <span id="supported_apis_array"></span><br />
		Supported audio APIs, with emulation (array): <span id="supported_apis_emulation_array"></span><br />
		Preferred audio API: <span id="preferred_api"></span><br />
		Preferred audio API, with emulation: <span id="preferred_api_emulation"></span><br />
		HTML5 Web Audio API is using emulation: <span id="waapi_emulated"></span><br />
		SoundManager 2 is using Flash: <span id="sm2_using_flash"></span><br />
		<br />
		Audio formats support:
			<ul>
				All existing ones (maybe not supported): <span id="audio_formats_existing"></span>
				<br />
				<br />
				Probably (quite sure):
				<br />
				<span id="audio_formats_support_probably"></span><br />
				* From array (with data URIs): <span id="audio_formats_support_probably_data_uris_array"></span><br /><br />
				* From array (no data URIs): <span id="audio_formats_support_probably_array"></span><br />
				<br />
				<br />
				Maybe (not so sure):
				<br />
				<span id="audio_formats_support_maybe"></span><br />
				* From array: <span id="audio_formats_support_maybe_data_uris_array"></span><br /><br />
				* From array (no data URIs): <span id="audio_formats_support_maybe_array"></span><br />
				<br />
				<br />
				Unsupported:
				<br />
				<span id="audio_formats_support_unsupported"></span><br />
				* From array: <span id="audio_formats_support_unsupported_array"></span><br />
			</ul>
		<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; }

main.js:

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


//This function will be called when CrossBrowdy is ready:
function main()
{
	var APIs =
	{
		WAAPI: "HTML5 Web Audio API (WAAPI)",
		AAPI: "HTML5 Audio API (AAPI)",
		ACMP: "Apache Cordova Media Plugin (ACMP)",
		SM2: "SoundManager 2 (SM2)"
	};
	
	var output = "";
	for (var API in APIs)
	{
		//Checks whether a given audio API exists in CrossBrowdy (although the current client might not support it):
		output = "";
		if (CB_AudioDetector.APIExists(API)) { output += APIs[API] + ", "; }
		CB_Elements.appendContentById("existing_apis", output);
		
		//Checks whether the current client supports a given audio API:
		output = "";
		if (CB_AudioDetector.isAPISupported(API)) { output += APIs[API] + ", "; }
		CB_Elements.appendContentById("supported_apis", output);
		output = "";
		if (CB_AudioDetector.isAPISupported(API, true)) { output += APIs[API] + ", "; }
		CB_Elements.appendContentById("supported_apis_emulation", output);
	
	}
	CB_Elements.insertContentById("existing_apis", CB_trim(CB_Elements.id("existing_apis").innerHTML, [" ", ","]));
	CB_Elements.insertContentById("supported_apis", CB_trim(CB_Elements.id("supported_apis").innerHTML, [" ", ","]));
	CB_Elements.insertContentById("supported_apis_emulation", CB_trim(CB_Elements.id("supported_apis_emulation").innerHTML, [" ", ","]));
	
	//Gets an array with the audio APIs supported by the current client:
	CB_Elements.insertContentById("supported_apis_array", CB_AudioDetector.getSupportedAPIs());
	CB_Elements.insertContentById("supported_apis_emulation_array", CB_AudioDetector.getSupportedAPIs(true)); //Returns all supported audio APIs (from all possible ones), without allowing emulated ones.

	//Gets the preferred audio API for the current client:
	CB_Elements.insertContentById("preferred_api", CB_AudioDetector.getPreferredAPI()); //Returns the preferred API (from all possible ones), without allowing emulated ones.
	CB_Elements.insertContentById("preferred_api_emulation", CB_AudioDetector.getPreferredAPI(undefined, true)); //Returns the preferred API (from all possible ones), allowing emulated ones.

	//Detects whether WAAPI (HTML5 Web Audio API) is using emulation or not:
	CB_Elements.insertContentById("waapi_emulated", CB_AudioDetector.isWAAPIUsingEmulation() ? "Yes" : "No");

	//Detects whether SoundManager 2 is using Flash or not:
	CB_Elements.insertContentById("sm2_using_flash", CB_AudioDetector.isSM2UsingFlash() ? "Yes" : "No");

	//Prints all existing audio formats (in CrossBrowdy):
	CB_Elements.insertContentById("audio_formats_existing", CB_Configuration.CrossBase.CB_AudioFileCache_PREFERRED_AUDIO_FORMATS);

	//Checks support level for a given audio format (support level can be "probably", "maybe" or an empty string which means not supported):
	//NOTE: the "probably" audio formats are more likely to be supported than the "maybe" ones.
	var audioFormats = //Note: we could use the 'CB_Configuration.CrossBase.CB_AudioFileCache_PREFERRED_AUDIO_FORMATS' array instead which contains many audio formats in order of preference.
	[
		'audio/ogg; codecs="vorbis"',		//audio/ogg with Vorbis codec.
		'audio/ogg; codecs="speex"',		//audio/ogg with Speex codec.
		'audio/ogg; codecs="flac"',			//audio/ogg with FLAC codec.
		'audio/ogg',						//audio/ogg is for .oga, .ogg.
		'audio/mpeg; codecs="mp3"',			//audio/mpeg with MP3 codec (?).
		'audio/mpeg',						//audio/mpeg is for .mp1, .mp2, .mp3, .mpg, .mpeg.
		'audio/mp4; codecs="mp4a.40.5"',	//audio/mp4 with mp4a.40.5 codec.
		'audio/mp4; codecs="mp4a.40.2"',	//audio/mp4 with mp4a.40.2 codec.
		'audio/mp4; codecs="mp4a.40.05"',	//audio/mp4 with mp4a.40.05 codec.
		'audio/mp4; codecs="mp4a.40.02"',	//audio/mp4 with mp4a.40.02 codec.
		'audio/mp4; codecs="mp4a.69"',		//audio/mp4 with mp4a.69 codec.
		'audio/mp4; codecs="mp4a.6B"',		//audio/mp4 with mp4a.6B codec.
		'audio/mp4; codecs="mp4a.67"',		//audio/mp4 with mp4a.67 codec.
		'audio/mp4; codecs="mp4a.a6"',		//audio/mp4 with mp4a.a6 codec.
		'audio/mp4; codecs="mp4a.a5"',		//audio/mp4 with mp4a.a5 codec.
		'audio/mp4; codecs="aac51"',		//audio/mp4 with aac51 codec.
		'audio/mp4; codecs="ac-3"',			//audio/mp4 with ac-3 codec.
		'audio/mp4; codecs="ec-3"',			//audio/mp4 with ec-3 codec.
		'audio/mp4',						//audio/mp4 is for .mp4, .m4a.
		'audio/aac; codecs="aac"',			//audio.aac with AAC codec (?).
		'audio/aac; codecs="mp4a.40.5"',	//audio/aac with mp4a.40.5 codec (?).
		'audio/aac; codecs="vorbis"',		//audio.aac with Vorbis codec (?).
		'audio/aac',						//audio/acc is for .aac.
		'audio/x-aac; codecs="aac"',
		'audio/x-aac',
		'audio/x-m4b; codecs="aac"',
		'audio/x-m4b',
		'audio/x-m4p; codecs="aac"',
		'audio/x-m4p',
		'audio/webm; codecs="vorbis"',		//audio/webm with Vorbis codec.
		'audio/webm',						//audio/webm is for .webm.
		'audio/3gpp; codecs="samr"',		//audio/3gpp with SAMR codec.
		'audio/3gpp',						//audio/3gpp is for .3gpp.
		'audio/wav; codecs="1"',			//audio/wav with 1 codec (?).
		'audio/wav',						//audio/wav is for .wav.
		'audio/x-wav; codecs="1"',			//audio/x-wav with 1 codec (?).
		'audio/x-wav',						//audio/x-wav is for .wav.
		'audio/x-pn-wav; codecs="1"',		//audio/x-pn-wav with 1 codec (?).
		'audio/x-pn-wav',					//audio/x-pn-wav is for .wav
		'audio/wave; codecs="1"',			//audio/wave with 1 codec (?).
		'audio/wave',						//audio/wave is for .wav.
		'audio/x-wave; codecs="1"',			//audio/x-wave with 1 codec (?).
		'audio/x-wave'						//audio/x-wave is for .wav.
	];
	output = { probably: "", maybe: "", unsupported: "" };
	for (var x = 0; x < audioFormats.length; x++)
	{
		supportLevel = "";
		supportLevel = CB_AudioDetector.isAudioFormatSupported(audioFormats[x], true); //Returns "probably", "maybe" or an empty string which means not supported. Checking support with data URIs.
		if (supportLevel)
		{
			output[supportLevel] += audioFormats[x] + " (with data URIs)<br />"
		}
		else
		{
			supportLevel = CB_AudioDetector.isAudioFormatSupported(audioFormats[x]); //Returns "probably", "maybe" or an empty string which means not supported. Checking support without data URIs.	
			if (supportLevel)
			{
				output[supportLevel] += audioFormats[x] + " (no data URIs)<br />";
			}
			else
			{
				output["unsupported"] += audioFormats[x] + "<br />";
			}
		}
	}
	CB_Elements.insertContentById("audio_formats_support_probably", output.probably);
	CB_Elements.insertContentById("audio_formats_support_maybe", output.maybe);
	CB_Elements.insertContentById("audio_formats_support_unsupported", output.unsupported);

	//Gets an array with the supported audio formats:
	CB_Elements.insertContentById("audio_formats_support_probably_data_uris_array", CB_AudioDetector.getSupportedAudioFormats(undefined, ["probably"], true)); //Returns the supported audio formats (from all possible ones) with "probably" support level, checking data URIs support.
	CB_Elements.insertContentById("audio_formats_support_probably_array", CB_AudioDetector.getSupportedAudioFormats(undefined, ["probably"])); //Returns the supported audio formats (from all possible ones) with "probably" support level.
	CB_Elements.insertContentById("audio_formats_support_maybe_data_uris_array", CB_AudioDetector.getSupportedAudioFormats(undefined, ["maybe"], true)); //Returns the supported audio formats (from all possible ones) with "maybe" support level, checking data URIs support.
	CB_Elements.insertContentById("audio_formats_support_maybe_array", CB_AudioDetector.getSupportedAudioFormats(undefined, ["maybe"])); //Returns the supported audio formats (from all possible ones) with "maybe" support level.
	CB_Elements.insertContentById("audio_formats_support_unsupported_array", CB_AudioDetector.getSupportedAudioFormats(undefined, [""])); //Returns the unsupported audio formats (with or without using data URIs, so it is not important).
}

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