VoiceRecorder.js

var apiKey = 'YOUR WHISPEAK API KEY';
var myCustomer = 'YOUR CUSTOMER NAME AT WHISPEAK';
var myApplication = 'with-asr/YOUR WHISPEAK APPLICATION ID';
function createScript(text) {
	return String("\n\
	var div = document.createElement('div'); \n\
	div.id = 'voiceRecorder'; \n\
	div.innerHTML = '<div class=\"container\">' +\n\
						'<h2>Record your voice</h2>' + \n\
						'<span style=\"font-size:20px;\">Please read the text below:</span>' + \n\
						'<div style=\"font-size:15px; font-style: italic;text-align:left\">' +\n\
						" + "'" + text + "' +" +
						"\n\
						'</div><br/><audio id=\"recorder\" muted hidden></audio>' +\n\
						'<div>' +\n\
							'<button id=\"start\">Record</button><button id=\"stop\">Stop Recording</button>' +\n\
						'</div><br/>' +\n\
						'<span>Saved Recording</span>' +\n\
						'<audio id=\"player\" controls></audio>' +\n\
						'<br/>' +\n\
					'</div>'; \n\
    var cb = document.getElementById('callbacksPanel'); \n\
    cb.insertBefore(div, cb.firstChild); \n\
    class VoiceRecorder { \n\
        constructor() { \n\
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {\n\
                console.log('getUserMedia supported')\n\
            } else {\n\
                console.log('getUserMedia is not supported on your browser!')\n\
            }\n\
            this.mediaRecorder\n\
            this.stream\n\
            this.chunks = []\n\
            this.isRecording = false\n\
            this.recorderRef = document.querySelector('#recorder')\n\
            this.playerRef = document.querySelector('#player')\n\
            this.startRef = document.querySelector('#start')\n\
            this.stopRef = document.querySelector('#stop')\n\
            this.startRef.onclick = this.startRecording.bind(this)\n\
            this.stopRef.onclick = this.stopRecording.bind(this)\n\
            this.constraints = {\n\
                audio: true,\n\
                video: false\n\
            }\n\
        }\n\
        handleSuccess(stream) {\n\
            this.stream = stream\n\
            this.stream.oninactive = () => {\n\
                console.log('Stream ended!')\n\
            };\n\
            this.recorderRef.srcObject = this.stream\n\
            this.mediaRecorder = new MediaRecorder(this.stream)\n\
            this.mediaRecorder.ondataavailable = this.onMediaRecorderDataAvailable.bind(this)\n\
            this.mediaRecorder.onstop = this.onMediaRecorderStop.bind(this)\n\
            this.recorderRef.play()\n\
            this.mediaRecorder.start()\n\
        }\n\
        handleError(error) {\n\
            console.log('navigator.getUserMedia error: ', error)\n\
        }\n\
        onMediaRecorderDataAvailable(e) { this.chunks.push(e.data) }\n\
        onMediaRecorderStop(e) { \n\
            const blob = new Blob(this.chunks, { 'type': 'audio/wav' })\n\
            const audioURL = window.URL.createObjectURL(blob)\n\
            this.playerRef.src = audioURL\n\
            this.chunks = []\n\
            this.stream.getAudioTracks().forEach(track => track.stop())\n\
            this.stream = null\n\
            var reader = new FileReader();\n\
            reader.readAsDataURL(blob);\n\
            reader.onloadend = function() {\n\
                var base64data = reader.result;\n\
                document.getElementById(\"clientScriptOutputData\").value = base64data;\n\
                document.getElementById(\"loginButton_0\").className = \"btn btn-block mt-3 btn-primary\";\n\
                document.getElementById(\"loginButton_0\").removeAttribute(\"hidden\");\n\
				document.getElementById(\"loginButton_0\").onclick =  function() {  document.getElementById(\"voiceRecorder\").remove(); };\n\
            }\n\
        }\n\
        startRecording() {\n\
            if (this.isRecording) return\n\
            this.isRecording = true\n\
            this.startRef.innerHTML = 'Recording...'\n\
    		this.playerRef.src = ''\n\
    		navigator.mediaDevices\n\
    			.getUserMedia(this.constraints)\n\
    			.then(this.handleSuccess.bind(this))\n\
    			.catch(this.handleError.bind(this))\n\
    	}\n\
    	stopRecording() {\n\
    		if (!this.isRecording) return\n\
    		this.isRecording = false\n\
    		this.startRef.innerHTML = 'Record'\n\
    		this.recorderRef.pause()\n\
    		this.mediaRecorder.stop()\n\
    	}\n\
    }\n\
    window.voiceRecorder = new VoiceRecorder()\n\
");
}

var fr = JavaImporter(
    org.forgerock.openam.auth.node.api,
    com.sun.identity.authentication.callbacks.ScriptTextOutputCallback,
    com.sun.identity.authentication.callbacks.HiddenValueCallback
);

with (fr) {
    if (callbacks.isEmpty()) {
		var requestGetToken = new org.forgerock.http.protocol.Request();
		requestGetToken.setMethod('GET');
		requestGetToken.setUri('https://' + myCustomer + '.whispeak.io/v1/apps/' + myApplication + '/auth');
		requestGetToken.getHeaders().add("Authorization","Bearer " + apiKey);
		requestGetToken.getHeaders().add("Content-Type","application/json");
		requestGetToken.getHeaders().add("Accept-Language","fr");
		
		var responseGetToken = httpClient.send(requestGetToken).get();
		var jsonResultGetToken = JSON.parse(responseGetToken.getEntity().getString())
		token = jsonResultGetToken.token;
		text = jsonResultGetToken.text;
		sharedState.put("voiceRecordedtoken", token);

      	action = Action.send(new HiddenValueCallback("clientScriptOutputData", "false"),
                             new ScriptTextOutputCallback(createScript(text))).build();
    } else {
      	sharedState.put("voiceRecordedBlob", String(callbacks.get(0).getValue()));
      	action = Action.goTo("true").build();
    }
}