This commit is contained in:
yumoqing 2025-09-29 21:42:40 +08:00
parent 419cd5b329
commit e833221535
3 changed files with 84 additions and 30 deletions

1
bricks/imgs/mic.svg Normal file
View File

@ -0,0 +1 @@
<svg t="1759153280754" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4711" width="100%" height="100%"><path d="M480 704H640a64.810667 64.810667 0 0 0 64-64v-32h-96a31.146667 31.146667 0 0 1-23.04-8.96 31.146667 31.146667 0 0 1-8.96-23.04 31.146667 31.146667 0 0 1 8.96-23.04 31.146667 31.146667 0 0 1 23.04-8.96h96V448h-96a31.146667 31.146667 0 0 1-23.04-8.96 31.146667 31.146667 0 0 1-8.96-23.04 31.146667 31.146667 0 0 1 8.96-23.04 31.146667 31.146667 0 0 1 23.04-8.96h96V288h-96a31.146667 31.146667 0 0 1-23.04-8.96 31.146667 31.146667 0 0 1-8.96-23.04 31.146667 31.146667 0 0 1 8.96-23.04 31.146667 31.146667 0 0 1 23.04-8.96h96V192A64.810667 64.810667 0 0 0 640 128H384a64.810667 64.810667 0 0 0-64 64v32h96a31.146667 31.146667 0 0 1 23.04 8.96c5.973333 6.016 8.96 13.696 8.96 23.04a31.146667 31.146667 0 0 1-8.96 23.04 31.146667 31.146667 0 0 1-23.04 8.96H320V384h96a31.146667 31.146667 0 0 1 23.04 8.96c5.973333 6.016 8.96 13.696 8.96 23.04a31.146667 31.146667 0 0 1-8.96 23.04 31.146667 31.146667 0 0 1-23.04 8.96H320v96h96a31.146667 31.146667 0 0 1 23.04 8.96c5.973333 6.016 8.96 13.696 8.96 23.04a31.146667 31.146667 0 0 1-8.96 23.04 31.146667 31.146667 0 0 1-23.04 8.96H320V640A64.810667 64.810667 0 0 0 384 704h96z m64 64v128h192a31.146667 31.146667 0 0 1 23.04 8.96c5.973333 6.016 8.96 13.696 8.96 23.04a31.146667 31.146667 0 0 1-8.96 23.04 31.146667 31.146667 0 0 1-23.04 8.96H288a31.146667 31.146667 0 0 1-23.04-8.96 31.146667 31.146667 0 0 1-8.96-23.04 31.146667 31.146667 0 0 1 8.96-23.04 31.146667 31.146667 0 0 1 23.04-8.96h192v-128H384c-36.010667-0.64-66.176-13.141333-90.496-37.504-24.32-24.32-36.821333-54.485333-37.504-90.496V192c0.682667-36.010667 13.184-66.176 37.504-90.496 24.32-24.32 54.485333-36.821333 90.496-37.504h256c36.010667 0.682667 66.176 13.141333 90.496 37.504 24.32 24.32 36.821333 54.485333 37.504 90.496V640c-0.64 36.010667-13.141333 66.176-37.504 90.496-24.32 24.32-54.485333 36.821333-90.496 37.504h-96z" fill="${color}" fill-opacity=".96" p-id="4712"></path></svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -481,7 +481,6 @@ bricks.UiFile = class extends bricks.VBox {
if (opts.accept) this.input.accept = opts.accept;
if (opts.multiple) this.input.multiple = true;
this.input.addEventListener('change', this.handleFileSelect.bind(this));
// this.bind('click', this.handleClick.bind(this));
this.add_widget(new bricks.Text({text:'drop in or click to choose file'}));
this.dom_element.appendChild(this.input);
}
@ -553,9 +552,81 @@ bricks.UiFile = class extends bricks.VBox {
}
}
bricks.UiAudio =class extends bricks.UiFile {
constructor(opts){
opts.name = opts.name || 'audio_file';
opts.width = opts.width || '100%';
opts.accept = 'audio/';
super(opts);
this.uitype='video';
this.camera_w = new bricks.Svg({
url:bricks_resource('imgs/mic.svg'),
tip:'use mic to record audio',
rate:2});
this.add_widget(this.camera_w);
this.camera_w.bind('click', this.open_recorder.bind(this));
this.preview = new bricks.VBox({width: '100%'});
this.add_widget(this.preview);
this.bind('changed', this.show_audio.bind(this));
}
open_recorder(event){
event.stopPropagation();
var recorder = new bricks.SysAudioRecorder({
"archor":"cc",
"auto_open":true,
"type": "recorder",
"cheight":3,
"cwidth":20
});
recorder.bring_to_top();
recorder.bind('record_end', this.accept_audio.bind(this, recorder));
}
accept_audio(recorder, event){
recorder.dismiss();
this.value = event.params.file
console.log('record finished, value=', this.value);
this.dispatch('changed', event.params.url);
}
show_audio(event){
var params = event.params;
if (params instanceof File){
params = [ params ];
}
if (typeof params == 'string'){
params = [ params ];
}
this.preview.clear_widgets();
params.forEach( f => {
this._show_audio(f);
});
}
_show_audio(file) {
if (typeof file == 'string'){
var vw = new bricks.AudioPlayer({
url:file,
audoplay: true,
width:'100%'
});
this.preview.add_widget(vw);
return;
}
const reader = new FileReader();
reader.onload = (e) => {
var imgw = new bricks.AudioPlayer({
url:e.target.result,
autoplay: true,
width:'100%'
});
console.log('show audio', e.target.result);
this.preview.add_widget(imgw);
};
reader.readAsDataURL(file);
}
}
bricks.UiVideo =class extends bricks.UiFile {
constructor(opts){
opts.name = opts.name || 'image';
opts.name = opts.name || 'video_file';
opts.width = opts.width || '100%';
opts.accept = 'video/';
super(opts);
@ -1176,31 +1247,6 @@ bricks._Input = class {
}
}
bricks.UiAudio =class extends bricks.UiFile {
constructor(opts){
super(opts);
this.uitype = 'audio';
this.autoplay = opts.autoplay;
this.readonly = opts.readonly;
this.icon = new bricks.Svg({
url: bricks_resource('imgs/right_arrow.svg')});
this.add_widget(this.icon);
this.icon.bind('click', this.play_audio.bind(this));
this.player = new bricks.AudioPlayer({
url:this.value
});
if (this.autoplay){
schedule_once(this.autoplay_audio.bind(this), 1);
}
}
autoplay_audio(){
this.icon.dispatch('click');
}
play_audio(){
this.player.toggle_play();
}
}
var Input = new bricks._Input();
Input.register('UiAudioRecorder', 'audiorecorder', bricks.UiAudioRecorder);
Input.register('UiStr', 'str', bricks.UiStr);

View File

@ -77,8 +77,13 @@ bricks.MediaRecorder = class extends bricks.Popup {
// 1. 在本地播放
const url = URL.createObjectURL(blob);
// 2. 转成 File 对象
const file = new File([blob],
"recorded_video.webm",
if (this.mimetype == 'video/mp4'){
filename = 'recorded_video.mp4';
} else {
filename = 'recorded_audio.wav'
}
const file = new Fil e([blob],
filename,
{ type: this.mimetype });
var data = {
url: url,
@ -94,7 +99,9 @@ bricks.MediaRecorder = class extends bricks.Popup {
this.dispatch('record_started')
console.log("Recording started...");
}
file_name(){
return 'noname';
}
stop_recorder(){
this.normal_stop = true;
this.time_diff = bricks.timeDiff(this.start_time);