wami.html

<!DOCTYPE html>
<html>
	<head> 
		<title>Speech Recognition JS using WAMI</title>
		<script src="js/talk.js"></script>
		<script	src="js/cookie.js"></script>
		<script src="wami-recorder/recorder.js"></script>
		<script	src="js/swfobject.js"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<h1>Speech Recognition JS</h1>
		<p id="info-box">This demo uses <a href="http://code.google.com/p/wami-recorder" target="_blank">WAMI</a> (Flash plugin required) for microphone input. For the webRTC-based version check the demo <a href="index.html">here</a> (works only in Chrome for now)</p>
		<h2>Configuration</h2>
		<div id="info-box">
			<div>
			Language and Acoustic model parameters:<br/>
			<select id="sel-model">
				<option value="wsj">Select Model:</option>
				<option value="digits">Digits (0-9)</option>
				<option value="digits_fsg">Digits (0-9) (using Finite State Grammars)</option>
				<option value="turtle">Turtle</option>
				<option value="wsj">Wall Street Journal</option>
			</select>
			<select id="sel-samprate">
				<option value="16000">Sample Rate:</option>
				<option value="8000">8,000 Hz</option>
				<option value="16000">16,000 Hz</option>
			</select>
			</div>
			<hr/>
			<div>
			N-best hypotheses:
			<input type="number" id="sel-nbest"
				min="0"
				max="10"
				step="1"
				value="3">
			</div>
		</div>
		<h2>Tests</h2>
		<div id="info-box">
			<div id="test-files">
			Test recorded RAW audio: 
				<select id="sel-test">
				<option value="none">Select testcase:</option>	
				<option value="digits">numbers.wav - Digits</option>
				<option value="digits_fsg">numbers.wav - Digits (FSG)</option>
				<option value="turtle">goforward.wav - Turtle</option>
				</select>
				<audio controls="controls" id="play-default-test" src="" type="audio/wav">
					<embed height="50" width="100" src="">
				</audio>
				<div id="getsample"></div>
			</div>
			<hr/>
			<div id="test-upload">
			Upload your own RAW/WAV (16bit PCM, little-endian), select corresponding <i>sample rate</i> (only 8kHz and 16kHz recordings supported due to the restrictions of the acoustic model) from <b>Configuration</b> and click <em>Decode Audio</em>:<br/>
			<input type="file" id="raw_audio" name="file" />
			<button onclick='processing();readRawAudio();'>Decode Audio</button>
			<audio controls="controls" id="play-upload" src="" type="audio/wav" autoplay>
				<embed height="50" width="100" src="">
			</audio>
			</div>
			<hr/>
			<div>Live microphone input (using <a href="http://code.google.com/p/wami-recorder" target="_blank">WAMI</a>)<br/>
				Select <i>model</i> and <i>sample rate</i> parameters from <b>Configuration</b>, click <em>Record Audio</em>, speak, (<em>Stop</em> -- optional) and <em>Play | Decode</em>
				<div id='model_config'>
					Model: <b><span id="m_conf"></span></b><br/>
					Sample Rate: <b><span id="sr_conf"></span></b><br/>
					Recording ID: <span id='sessionID'></span>
			</div>
				<button onclick='recordWAMI();' id='rec_btn'>Record Audio</button>
				<button onclick='stopWAMI()' id='stop_btn'>Stop</button>
				<button onclick='stopWAMI();playWAMI();' id='play_btn'>Play | Decode</button>
				<audio controls="controls" id="play-rec" src="" type="audio/wav" autoplay>
					<embed height="50" width="100" src="">
				</audio>
			</div>

		<div id="srec_hyp"></div>
		<div id="srec_hyp_nbest"></div>
		<pre><div id="srec_timer"></div></pre>
		</div>
	
	<div id="status"></div>
	<div id="wami"></div>
	<script>
		var PATH = window.location.href.replace(/\/\w+.html/g, '/');
		setupWAMI(); // setup WAMI
		var sel_model = document.getElementById("sel-model");
		var sel_samprate = document.getElementById("sel-samprate");
		var sessionID = checkCookie();
		document.getElementById("sr_conf").innerHTML = sel_samprate.options[2].text; // hardcoded default
		document.getElementById("m_conf").innerHTML = sel_model.options[4].text; // hardcoded default
		document.getElementById("sessionID").innerHTML = "<a href='wami-recorder/recs/rec"+sessionID+".wav' target='_blank'>"+sessionID+"</a>";

		var configDigits = {};
		configDigits.hmmDir = PATH + "model/hmm/en/tidigits";
		configDigits.dmp = PATH + "model/lm/en/tidigits.DMP";
		configDigits.dic = PATH + "model/lm/en/tidigits.dic";
		
		var configDigitsFSG = {};
		configDigitsFSG.hmmDir = PATH + "model/hmm/en/tidigits";
		configDigitsFSG.dic = PATH + "model/lm/en/tidigits.dic";
		configDigitsFSG.fsg = PATH + "model/lm/en/tidigits.fsg";

		var configTurtle = {};
		configTurtle.hmmDir = PATH + "model/hmm/en_US/hub4wsj_sc_8k";
		configTurtle.dmp = PATH + "model/lm/en/turtle.DMP";
		configTurtle.dic = PATH + "model/lm/en/turtle.dic";

		var configWSJ = {};
		configWSJ.hmmDir = PATH + "model/hmm/en_US/hub4wsj_sc_8k";
		configWSJ.dmp = PATH + "model/lm/en_US/hub4.5000.DMP";
		configWSJ.dic = PATH + "model/lm/en_US/cmu07a.dic";

		var configDic = {
			turtle: configTurtle,
			digits: configDigits,
			digits_fsg: configDigitsFSG,
			wsj: configWSJ
		};
		sel_model.onchange = function() {
			var i = sel_model.selectedIndex;
			document.getElementById("m_conf").innerHTML = sel_model.options[i].text;
		}
		sel_samprate.onchange = function() {
			var i = sel_samprate.selectedIndex;
			document.getElementById("sr_conf").innerHTML = sel_samprate.options[i].text;
		}
		var processing = function() {
			document.getElementById("srec_hyp").innerHTML = "<pre>processing ... </pre>";
			document.getElementById("srec_timer").innerHTML = "";
			document.getElementById("srec_hyp_nbest").innerHTML = "";
		};

		var showDecodingResult = function(talkResult) {
			// Get hypothesis
			if (talkResult.hypothesis) {
				document.getElementById("srec_hyp").innerHTML=talkResult.convertDigits();
			}
			// Get N-best hypotheses
			if (talkResult.nbest) {
				for (var i = 0; i < talkResult.nbest.length; i++) {
				  document.getElementById("srec_hyp_nbest").innerHTML += talkResult.nbest[i] + "<br/>";
				};
			}
			// Get timer output
			if (talkResult.timer) {
				document.getElementById("srec_timer").innerHTML="TIME: "+ talkResult.timer.toString();
			}
		};

		document.getElementById("sel-test").onchange = function() {
			processing();
			configDigits.nbest = document.getElementById("sel-nbest").value;
			configDigitsFSG.nbest = document.getElementById("sel-nbest").value;
			configTurtle.nbest = document.getElementById("sel-nbest").value;
			switch(this.value) {
				case "digits":
					recognizeSpeech(PATH + "test/data/numbers.wav", configDigits, showDecodingResult, true);
					enableAudioPlayback("play-default-test", "test/data/numbers.wav");
					document.getElementById("getsample").innerHTML = "<a href='"+PATH+"test/data/numbers.wav' target='_blank'>numbers.wav</a>";
				break;
				case "digits_fsg":
					recognizeSpeech(PATH + "test/data/numbers.wav", configDigitsFSG, showDecodingResult, true);
					document.getElementById("getsample").innerHTML = "<a href='"+PATH+"test/data/numbers.wav' target='_blank'>numbers.wav</a>";
					enableAudioPlayback("play-default-test", "test/data/numbers.wav");
				break;
				case "turtle":
					recognizeSpeech(PATH + "test/data/goforward.wav", configTurtle, showDecodingResult, true);
					document.getElementById("getsample").innerHTML = "<a href='"+PATH+"test/data/goforward.wav' target='_blank'>goforward.wav</a>";
					enableAudioPlayback("play-default-test", "test/data/goforward.wav");
				break;
				default: 
				document.getElementById("srec_hyp").innerHTML = "Select a testcase from the drop menu";
			}
		};
		function enableAudioPlayback(audioID, audioSRC) {
			var audioObj = document.getElementById(audioID);
			audioObj.src = audioSRC;
			audioObj.children[0].src = audioSRC; // fallback if no HTML5
			audioObj.style.display = "block";
		}

		function readRawAudio() {
		    var files = document.getElementById('raw_audio').files;
		    if (!files.length) {
		      alert('Please select a RAW/WAV audio file!');
		      return;
		    }
		    var file = files[0];
		    var start = 0;
		    var stop = file.size - 1;

		    var reader = new FileReader();
		    // If we use onloadend, we need to check the readyState.
		    reader.onloadend = function(evt) {
		      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
		      	// ---- Recognize audio using talk.js ----
		      	var crntConfig = configDic[document.getElementById("sel-model").value];
		      	crntConfig.sampleRate = document.getElementById("sel-samprate").value;
		      	crntConfig.nbest = document.getElementById("sel-nbest").value;
				recognizeSpeech(evt.target.result, crntConfig, showDecodingResult);
		      }
		    };
		    var blob = file.slice(start, stop + 1);
		    // Play uploaded audio
			var url = (window.URL || window.webkitURL).createObjectURL(blob);
			enableAudioPlayback("play-upload", url);
		    reader.readAsBinaryString(blob);
		}

		// -------------- AUDIO RECORDING -----------------
		function recognizeFromRecording(recName) {
			var crntConfig = configDic[document.getElementById("sel-model").value];
	      	crntConfig.sampleRate = document.getElementById("sel-samprate").value;
	      	crntConfig.nbest = document.getElementById("sel-nbest").value;
			recognizeSpeech(PATH + recName, crntConfig, showDecodingResult, true);
		}
		// ----------------------- WAMI -------------------
		function setupWAMI() {
			Wami.setup({id:"wami", swfUrl:"wami-recorder/Wami.swf"});
			document.getElementById("play_btn").disabled = true;
		}
		
		function recordWAMI() {
			status("Recording...");
			Wami.setSettings({sampleRate: document.getElementById("sel-samprate").value});
			Wami.startRecording("wami-recorder/record.php?name=recs%2Frec"+sessionID+".wav");
		}

		function playWAMI() {
			processing();
			var recording = "wami-recorder/recs/rec"+sessionID+".wav";
			//Wami.startPlaying(recording);
			enableAudioPlayback("play-rec", recording+"?");
			recognizeFromRecording(recording);
		}

		function stopWAMI() {
			status("");
			Wami.stopRecording();
			Wami.stopPlaying();
			document.getElementById("srec_hyp").innerHTML = "Recording stopped";
			document.getElementById("srec_timer").innerHTML = "";
			document.getElementById("srec_hyp_nbest").innerHTML = "";
			document.getElementById("play_btn").disabled = false;
		}

		function status(msg) {
			document.getElementById('status').innerHTML = msg;
		}
		</script>
	</body>
</html>