bugfix

bricks/audio.js

@@ -9,7 +9,7 @@ class AudioPlayer extends JsWidget {
 
 	constructor(options){
 		super(options);
-		this.url = opt.url;
+		this.url = options.url;
 		this.audio = this._create('audio');
 		this.audio.controls = true;
 		if (this.opts.autoplay){
@@ -22,7 +22,8 @@ class AudioPlayer extends JsWidget {
 		this.dom_element.appendChild(this.audio);
 	}
 	set_source(url){
-		this.source.src = url;
+		this.audio.src = url;
+		console.log(this.source.src,' new src seted');
 	}
 	toggle_play(){
 		if (this.audio.paused){
@@ -33,49 +34,65 @@ class AudioPlayer extends JsWidget {
 	}
 }
 
+
+//webkitURL is deprecated but nevertheless
+var URL = window.URL || window.webkitURL;
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+
 class AudioRecorder extends HBox {
-	construction(opts){
+	constructor(opts){
 		super(opts);
-		this.start_icon = opts.start_icon || bricks_image('start_recording.png');
+		this.start_icon = opts.start_icon || bricks_resource('imgs/start_recording.png');
-		this.stop_icon = opts.stop_icon || bricks_image('stop_recording.png');
+		this.stop_icon = opts.stop_icon || bricks_resource('imgs/stop_recording.png');
-		this.img = Image();
+		console.log('this.start_icon=', this.start_icon, this.stop_icon);
-		this.img.src = this.start_icon;
+		this.gumStream = null; 		//stream from getUserMedia()
-		this.player = AudioPlayer();
+		this.recorder = null;
+		// shim for AudioContext when it's not avb. 
+		this.img = new Image({height:'100%', url:this.start_icon});
+		this.player = new AudioPlayer({});
+		this.player.disabled(true);
 		this.add_widget(this.img);
 		this.add_widget(this.player);
-		this.img.addListener('click', this.btn_clicked.bind(this));
+		this.img.bind('click', this.btn_clicked.bind(this));
-		this.recorder = null;
+		this.audioContext = null;
+		this.stream = null;
 		this.chunks = [];
 	}
 	start_recording(){
-		if (!this.recorder){
+		console.log("recordButton clicked", this);
-			navigator.mediaDevices.getUserMedia({ audio: true })
+		var constraints = { audio: true, video:false }
-			.then(stream => {
+		navigator.mediaDevices.getUserMedia(constraints)
-				const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+		.then(function(stream) {
-				const mediaStreamSource = audioContext.createMediaStreamSource(stream);
+			console.log("getUserMedia() success, stream created, initializing Recorder.js ...", this);
-
+			this.img.set_url(this.stop_icon);
-				this.recorder = new MediaRecorder(mediaStreamSource.stream, { mimeType: 'audio/wav' });
+			this.audioContext = new AudioContext();
-
+			this.gumStream = stream;
-				this.chunks = [];
+			/* use the stream */
-
+			try {
-				this.recorder.addEventListener('dataavailable', event => {
+				var input = this.audioContext.createMediaStreamSource(stream);
-					this.chunks.push(event.data);
+			} catch(e){
-				});
+				console.log('e====', e);
-
-				this.recorder.addEventListener('end', () => {
-					const blob = new Blob(chunks, { type: 'audio/wav' });
-					console.log('Audio recorded and saved as blob:', blob);
-					this.player.set_source(URL.createObjectURL(blob));
-				});
-			})
-			.catch(error => console.error('Error accessing the microphone:', error));
 			}
-		this.recorder.start();
+			this.recorder = new Recorder(input,{numChannels:1})
+			this.recorder.record()
+			console.log("Recording started");
+		}.bind(this)).catch(function(err) {
+			//enable the record button if getUserMedia() fails
+			this.img.set_url(this.start_icon);
+		}.bind(this));
 	}
 	stop_recording(){
-		if(this.recorder){
+		this.img.set_url(this.start_icon);
 		this.recorder.stop();
+		this.gumStream.getAudioTracks()[0].stop();
+		this.recorder.exportWAV(this.createWAV.bind(this));
 	}
+	createWAV(blob){
+		console.log('reord stoped .....', this);
+		var url = URL.createObjectURL(blob);
+		this.player.set_source(url);
+		this.player.disabled(false);
+		console.log('---------done------------', url);
 	}
 	btn_clicked(){
 		if (!this.isRecording){

bricks/bricks.js

@@ -415,17 +415,22 @@ class BricksApp {
 		this.i18n.setup_dict(d);
 	}
 	async build(){
-		console.log('build() begin', this.opts.widget, 'body=', Body);
 		var opts = structuredClone(this.opts.widget);
 		var w = await widgetBuild(opts, Body);
+		if (!w){
 			console.log('build() end', this.opts.widget, w, 'body=', Body);
-		return w
+			console.log('w=', w, 'Body=', Body, Wterm, 'Factory=', Factory)
+		}
+		return w;
 	}
 	async run(){
 		await this.change_language(this);
 		var w = await this.build();
 		this.root = w;
+		if (!w){
 			console.log('w=', w, 'Body=', Body, Wterm, 'Factory=', Factory)
+			return null;
+		}
 		Body.add_widget(w);
 	}
 	textsize_bigger(){

bricks/build.sh

@@ -1,5 +1,5 @@
 SOURCES="uitypesdef.js utils.js i18n.js factory.js widget.js \
-	bricks.js image.js \
+	bricks.js image.js recorder.js \
 	jsoncall.js myoperator.js layout.js menu.js modal.js \
 	markdown_viewer.js video.js audio.js toolbar.js tab.js \
 	input.js registerfunction.js button.js accordion.js \

bricks/widget.js

@@ -26,6 +26,13 @@ class JsWidget {
 	create(){
 		this.dom_element = document.createElement('div');
 	}
+	disabled(flag){
+		if(flag){
+			this.dom_element.disabled = true;
+		} else {
+			this.dom_element.disabled = false;
+		}
+	}
 	opts_set_style(){
 		var keys = [
 			"width",

examples/recorder.html

@@ -7,19 +7,20 @@
 		const opts = 
 {
 	"widget": {
-		"id":"videoplayer",
+		"id":"recorder",
-		"widgettype":"VideoPlayer",
+		"widgettype":"AudioRecorder",
 		"options":{
-			"autoplay":true,
+			"height":"40px",
-			"url":"http://kimird.com/video/sample-mp4-file.mp4",
+			"start_icon":"/bricks/imgs/start_recording.png"
-			"type":"mp4"
 		}
 	}
 }
 
 		;
 		const app = new BricksApp(opts);
+		console.log('here ..........');
 		app.run();
+		console.log('here 1..........');
 	</script>
 </body>
 </html>