bugfix
This commit is contained in:
parent
50a166d9b1
commit
e38ccbdcdb
@ -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.stop_icon = opts.stop_icon || bricks_image('stop_recording.png');
|
||||
this.img = Image();
|
||||
this.img.src = this.start_icon;
|
||||
this.player = AudioPlayer();
|
||||
this.start_icon = opts.start_icon || bricks_resource('imgs/start_recording.png');
|
||||
this.stop_icon = opts.stop_icon || bricks_resource('imgs/stop_recording.png');
|
||||
console.log('this.start_icon=', this.start_icon, this.stop_icon);
|
||||
this.gumStream = null; //stream from getUserMedia()
|
||||
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.recorder = null;
|
||||
this.img.bind('click', this.btn_clicked.bind(this));
|
||||
this.audioContext = null;
|
||||
this.stream = null;
|
||||
this.chunks = [];
|
||||
}
|
||||
start_recording(){
|
||||
if (!this.recorder){
|
||||
navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
.then(stream => {
|
||||
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
||||
const mediaStreamSource = audioContext.createMediaStreamSource(stream);
|
||||
|
||||
this.recorder = new MediaRecorder(mediaStreamSource.stream, { mimeType: 'audio/wav' });
|
||||
|
||||
this.chunks = [];
|
||||
|
||||
this.recorder.addEventListener('dataavailable', event => {
|
||||
this.chunks.push(event.data);
|
||||
});
|
||||
|
||||
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));
|
||||
console.log("recordButton clicked", this);
|
||||
var constraints = { audio: true, video:false }
|
||||
navigator.mediaDevices.getUserMedia(constraints)
|
||||
.then(function(stream) {
|
||||
console.log("getUserMedia() success, stream created, initializing Recorder.js ...", this);
|
||||
this.img.set_url(this.stop_icon);
|
||||
this.audioContext = new AudioContext();
|
||||
this.gumStream = stream;
|
||||
/* use the stream */
|
||||
try {
|
||||
var input = this.audioContext.createMediaStreamSource(stream);
|
||||
} catch(e){
|
||||
console.log('e====', e);
|
||||
}
|
||||
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){
|
||||
|
@ -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(){
|
||||
|
@ -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 \
|
||||
|
@ -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",
|
||||
|
Binary file not shown.
@ -7,19 +7,20 @@
|
||||
const opts =
|
||||
{
|
||||
"widget": {
|
||||
"id":"videoplayer",
|
||||
"widgettype":"VideoPlayer",
|
||||
"id":"recorder",
|
||||
"widgettype":"AudioRecorder",
|
||||
"options":{
|
||||
"autoplay":true,
|
||||
"url":"http://kimird.com/video/sample-mp4-file.mp4",
|
||||
"type":"mp4"
|
||||
"height":"40px",
|
||||
"start_icon":"/bricks/imgs/start_recording.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
;
|
||||
const app = new BricksApp(opts);
|
||||
console.log('here ..........');
|
||||
app.run();
|
||||
console.log('here 1..........');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
Loading…
Reference in New Issue
Block a user