gistfile1.st

renderBodyContentOn: html
	|modalDOMElement microphone audioDomElement audioUrl|
	html button
		with: 'Add message';
		class: 'btn btn-primary';
		onClick: [modalDOMElement asJQuery modal: 'show'].
	
    modalDOMElement := html div class:'modal fade'; with:[
		
		html style with: '
			.microphone.recording {
				background: red;
				background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%,white 75%,white 100%);
 			}
		'.
      html div class:'modal-dialog'; with:[
		html div class:'modal-content'; with:[
		  html div class:'modal-header'; with:[
			html button
			  class:'close'; 
			  at: 'data-dismiss' put:'modal';
			  at: 'aria-hidden' put: 'true';
			  with: 'x'.
			html h4 class:'modal-title'; with:'Record New Message'.
		  ].
		  html div class:'modal-body'; with:[
			html textarea class: 'form-control'; placeholder:'Type message text here.'.

			microphone := html img src:'img/mic128.png'; class: 'microphone'; onClick: [
				window recorder isRecording 
					ifTrue: [
						microphone asJQuery removeClass: 'recording'.
						console log: 'pong'.
						window recorder stop.	
						window recorder exportWAV: [:blob | 
							audioUrl := window URL createObjectURL: blob.
							console log: audioUrl.
							audioDomElement src: audioUrl.
						].
					]
					ifFalse: [
						microphone asJQuery addClass: 'recording'.
						console log: 'ping'.
						window recorder record.	
					].	
			].
			
			audioDomElement := html audio at: 'controls' put: true.
		  ].
		  html div class:'modal-footer'; with:[
			html button 
			  class:'btn btn-default';
			  at: 'data-dismiss' put:'modal';
			  with: 'Close'.
			html button
			  class:'btn btn-primary';
			  with: 'Save changes'.
		  ].
		].
      ].
    ].