This commit is contained in:
yumoqing 2024-01-29 17:46:32 +08:00
parent 50a166d9b1
commit e38ccbdcdb
6 changed files with 76 additions and 46 deletions

View File

@ -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));
}
this.recorder.start();
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 = 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.recorder.stop();
}
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){

View File

@ -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);
console.log('build() end', this.opts.widget, w, 'body=', Body);
return w
if (!w){
console.log('build() end', this.opts.widget, w, 'body=', Body);
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;
console.log('w=', w, 'Body=', Body, Wterm, 'Factory=', Factory)
if (!w){
console.log('w=', w, 'Body=', Body, Wterm, 'Factory=', Factory)
return null;
}
Body.add_widget(w);
}
textsize_bigger(){

View File

@ -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 \

View File

@ -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.

View File

@ -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>