add widget for record audio answer

Author: Mikhail Baranov

package.json

@@ -23,6 +23,7 @@
     "live-server": "^1.2.0",
     "nouislider": "^10.1.0",
     "pretty-checkbox": "^3.0.3",
+    "recordrtc": "^5.4.6",
     "select2": "^4.0.4",
     "signature_pad": "^2.3.2",
     "sortablejs": "^1.6.1",

src/microphone.js

@@ -0,0 +1,166 @@
+import RecordRTC from "recordrtc";
+
+function init(Survey) {
+  var widget = {
+	
+    name: "microphone",
+    title: "Microphone",
+    iconName: "icon-microphone",
+    widgetIsLoaded: function() {
+      return typeof RecordRTC != "undefined";
+    },
+    isFit: function(question) {
+      return question.getType() === "microphone";
+    },
+    htmlTemplate:
+      "<div><button type='button'  title='Record'><i class='fa fa-microphone' aria-hidden='true'></i></button> <button type='button' title='Save'><i class='fa fa-cloud' aria-hidden='true'></i></button></div>",
+    activatedByChanged: function(activatedBy) {
+      Survey.JsonObject.metaData.addClass("microphone", [], null, "empty");
+    },
+	
+    afterRender: function(question, el) {
+      var rootWidget = this;
+	  var buttonStartEl = el.getElementsByTagName("button")[0];
+	  var buttonStopEl = el.getElementsByTagName("button")[1];
+	 
+//////////  RecordRTC logic	
+	  
+	  var successCallback = function(stream) {
+		var options={
+			type: 'audio',
+			mimeType: 'audio/webm',
+			audioBitsPerSecond: 44100,
+			sampleRate: 44100, 
+			bufferSize: 32768, 
+			numberOfAudioChannels: 1
+		};  
+		console.log("successCallback");
+		question.survey.mystream = stream;
+		question.survey.recordRTC = RecordRTC(question.survey.mystream, options);
+		if(typeof question.survey.recordRTC != "undefined"){
+			console.log("startRecording");
+			question.survey.recordRTC.startRecording();
+		}
+	  };
+
+	  var errorCallback=function() {
+		alert('No microphone');
+		question.survey.recordRTC=undefined;
+		question.survey.mystream=undefined;
+	  };
+
+	  var processAudio= function(audioVideoWebMURL) {
+		console.log("processAudio");
+		var recordedBlob = question.survey.recordRTC.getBlob();
+		console.log("Blob size:" + recordedBlob.size);
+		
+		console.log("question.id : " + question.id);
+		console.log("question.name : " + question.name);
+		
+		
+		var fileReader = new FileReader();
+        fileReader.onload = function(event){
+		  var dataUri = event.target.result;
+		  console.log("dataUri: " +dataUri);
+          //question.value = (question.value || []).concat([fileReader.result])
+		  question.value = dataUri;
+        };
+        fileReader.readAsDataURL(recordedBlob);
+
+		console.log("cleaning");
+		question.survey.recordRTC=undefined;
+		question.survey.mystream=undefined;
+	  };
+
+      var startRecording=function() {
+		  
+		 // erase previous data 
+		 question.value=undefined;
+		
+       	// if recorder open on another question	- try to stop recording		
+		if(typeof question.survey.recordRTC != "undefined"){
+			question.survey.recordRTC.stopRecording(doNothingHandler);
+			if(typeof question.survey.mystream != "undefined"){
+				question.survey.mystream.getAudioTracks().forEach(function(track) {
+				track.stop();
+				}
+				);
+			}
+		}
+			 
+		var mediaConstraints = {
+		  video: false,
+		  audio: true
+		};
+		
+		navigator.mediaDevices
+			.getUserMedia(mediaConstraints)
+			.then(successCallback.bind(this), errorCallback.bind(this));
+     };
+
+	  var stopRecording=function() {
+		  console.log("stopRecording");
+		  if(typeof question.survey.recordRTC != "undefined"){
+			question.survey.recordRTC.stopRecording(processAudio.bind(this));
+			if(typeof question.survey.mystream != "undefined"){
+				question.survey.mystream.getAudioTracks().forEach(function(track) {
+				track.stop();
+				}
+				);
+			}
+			
+		    
+		  }
+	  };
+	
+//////////////  end RTC logic //////////////////
+	  
+	  if (!question.isReadOnly) {
+        buttonStartEl.onclick = startRecording;
+      } else {
+        buttonStartEl.parentNode.removeChild(buttonStartEl);
+      }
+	  
+	  if (!question.isReadOnly) {
+        buttonStopEl.onclick = stopRecording;
+      } else {
+        buttonStopEl.parentNode.removeChild(buttonStartEl);
+      }
+	  
+      var updateValueHandler = function() {
+        
+      };
+	  
+	  var doNothingHandler = function() {
+        
+      };
+	  
+      question.valueChangedCallback = updateValueHandler;
+      updateValueHandler();
+	  
+     
+    },
+    willUnmount: function(question, el) {
+      console.log("unmount microphone no record ");
+      if(typeof question.survey.recordRTC != "undefined"){
+			question.survey.recordRTC.stopRecording(doNothingHandler);
+			if(typeof question.survey.mystream != "undefined"){
+				question.survey.mystream.getAudioTracks().forEach(function(track) {
+				track.stop();
+				});
+			}
+		question.value=undefined;
+		question.survey.recordRTC=undefined;
+		question.survey.mystream=undefined;
+	   }
+    }
+  };
+
+  Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");
+}
+
+if (typeof Survey !== "undefined") {
+  init(Survey);
+}
+
+export default init;

src/surveyjs-widgets.js

@@ -12,3 +12,4 @@ export { default as ckeditor } from "./ck-editor.js";
 export { default as autocomplete } from "./easy-autocomplete.js";
 export { default as prettycheckbox } from "./pretty-checkbox.js";
 export { default as bootstrapslider } from "./bootstrap-slider.js";
+export { default as microphone } from "./microphone.js";

webpack.config.js

@@ -34,7 +34,8 @@ var widgets = [
   "ck-editor",
   "easy-autocomplete",
   "pretty-checkbox",
-  "bootstrap-slider"
+  "bootstrap-slider",
+  "microphone"
 ];
 
 var dependencies = {
@@ -49,7 +50,8 @@ var dependencies = {
   "jquery-bar-rating": "^1.2.2",
   "easy-autocomplete": "^1.3.5",
   "pretty-checkbox": "^3.0.3",
-  "bootstrap-slider": "^10.0.0"
+  "bootstrap-slider": "^10.0.0",
+  "recordrtc": "^5.4.6"
 };
 
 var entry = {};