206 lines
5.2 KiB
JavaScript
Executable File
206 lines
5.2 KiB
JavaScript
Executable File
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:'80px'});
|
||
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.text = formatMs(bufferDuration,1);
|
||
console.log(this.rec_time.text);
|
||
|
||
}
|
||
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);
|