var bricks = window.bricks || {}; var formatMs=function(ms,all){ var ss=ms%1000;ms=(ms-ss)/1000; var s=ms%60;ms=(ms-s)/60; var m=ms%60;ms=(ms-m)/60; var h=ms; var t=(h?h+":":"") +(all||h+m?("0"+m).substr(-2)+":":"") +(all||h+m+s?("0"+s).substr(-2)+"″":"") +("00"+ss).substr(-3); return t; }; bricks.AudioPlayer = class oops extends bricks.JsWidget { /* { url: autoplay: } */ constructor(options){ super(options); this.url = options.url; this.audio = this._create('audio'); this.audio.controls = true; if (this.opts.autoplay){ this.audio.addEventListener('canplay', this.play_audio.bind(this)); } this.audio.style.width = "100%" this.source = this._create('source'); this.source.src = this.opts.url; this.audio.appendChild(this.source); this.dom_element.appendChild(this.audio); } set_source(url){ this.audio.src = url; console.log(this.audio.src,' new src seted'); } toggle_play(){ if (this.audio.paused){ this.audio.play(); } else { this.audio.pause(); } } } bricks.AudioRecorder = class oops extends bricks.HBox { /* events: record_started record_finished wavdata */ constructor(opts){ super(opts); this.start_icon = opts.start_icon || bricks_resource('imgs/start_recording.png'); this.stop_icon = opts.stop_icon || bricks_resource('imgs/stop_recording.png'); this.rec_btn = new bricks.Icon({url:this.start_icon }); this.player = new bricks.AudioPlayer({url:"",width:'40px'}); this.rec_time = new bricks.Text({text:"", i18n:false, width:'120px'}); this.rec_btn.bind('click', this.rec_btn_pressed.bind(this)) this.URL = window.URL||webkitURL; this.rec = null; this.wave = null; this.mic_opened = false; this.add_widget(this.rec_btn); this.add_widget(this.rec_time); this.add_widget(this.player); this.recordData = null; } rec_btn_pressed(){ console.log(this.rec_btn.url, ':url:', this.start_icon, this.stop_icon); if(this.rec_btn.url == this.start_icon){ this.rec_btn.set_url(this.stop_icon); this.start_recording(); } else { this.rec_btn.set_url(this.start_icon); this.stop_recording(); } } on_process(buffers,powerLevel, bufferDuration,bufferSampleRate, newBufferIdx,asyncEnd){ //录音实时回调,大约1秒调用12次本回调 // document.querySelector(".recpowerx").style.width=powerLevel+"%"; //可视化图形绘制 // wave.input(buffers[buffers.length-1],powerLevel,bufferSampleRate); this.rec_time.otext = formatMs(bufferDuration,1); console.log(this.rec_time.otext); } recOpen(){ this.rec=null; this.wave=null; var newRec = Recorder({ type:"wav",sampleRate:16000,bitRate:16 ,onProcess:this.on_process.bind(this) }); newRec.open(function(){//打开麦克风授权获得相关资源 this.mic_opened = true; this.rec=newRec; this.rec.start(); this.dispatch('record_started'); //此处创建这些音频可视化图形绘制浏览器支持妥妥的 //this.wave=Recorder.FrequencyHistogramView({elem:".recwave"}); }.bind(this),function(msg,isUserNotAllow){//用户拒绝未授权或不支持 console.log('open recorder failed'); }); } recClose(){ if(this.rec){ this.rec.close(); }else{ console.log('close recorder error'); }; } recoding(){ this.n } start_recording(){ this.recordData = null; if( this.recordData ){ this.URL.revokeObjectURL(this.recordData.url); } if (this.mic_opened){ this.rec.start(); this.dispatch('record_started'); } this.recOpen(); } pause_recording(){ if(this.rec&&Recorder.IsOpen()){ this.rec.pause(); }else{ console.log("gCAR::未打开录音"); }; } resume_recording(){ if(this.rec&&Recorder.IsOpen()){ this.rec.resume(); }else{ console.log("Ob6S::未打开录音"); }; } stop_recording(){ if(!(this.rec&&Recorder.IsOpen())){ console.log("5JuL::未打开录音"); return; }; this.rec.stop(function(blob,duration){ var localURL = this.URL.createObjectURL(blob); var d = { data:blob, url:localURL, duration:duration } this.recordData = d; this.player.set_source(this.recordData.url); this.dispatch('record_finished', d); }.bind(this),function(msg){ console.log("kGZO::录音失败:"); }); } async upload(){ if(!this.recordData){ console.log("DUTn::请先录音,然后停止后再上传"); return; }; var blob=this.recordData.blob; var form=new FormData(); form.append("audiofile",blob,"recorder.wav"); var hj = HttpJson() var ret = await hj.post(this.upload_url,{ params:form }); console.log('ret=', ret); this.dispatch('updated', ret) } download(){ if(!this.recordData){ console.log('recorder not opened'); return; }; var fileName="recorder-"+Date.now()+".wav"; var downA=document.createElement("A"); downA.innerHTML="下载"+fileName; downA.href=this.recordData.url; downA.download=fileName; // document.querySelector("."+cls).appendChild(downA); if(/mobile/i.test(navigator.userAgent)){ console.log('mobile device'); } downA.click(); //不用了时需要revokeObjectURL,否则霸占内存 (window.URL||webkitURL).revokeObjectURL(downA.href); } } bricks.Factory.register('AudioPlayer', bricks.AudioPlayer); bricks.Factory.register('AudioRecorder', bricks.AudioRecorder);