bricks/bricks/audio.js
2024-02-01 17:54:04 +08:00

206 lines
5.2 KiB
JavaScript
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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);