Blame for assets/reference.js

const host=document.getElementById('reference-clip');
const q=s=>element.querySelector(s), player=q('audio'), status=q('.reference-status');
const listeners=new AbortController(), on=(n,e,f)=>n.addEventListener(e,f,{signal:listeners.signal});
let original=null, current=null, objectURL=null, generation=0, recorder=null, stream=null, timer=0, recordStarted=0, recordingRequested=false, disposed=false;
const minutes=s=>`${Math.floor(s/60)}:${String(Math.floor(s%60)).padStart(2,'0')}`;
function busy(value) {
 host.dataset.busy=String(value); q('[data-upload]').disabled=value; q('[data-apply]').disabled=value;
 const generate=document.getElementById('generate-speech');
 if(generate)generate.disabled=(value && document.getElementById('voice-options')?.dataset.clip==='true') || document.getElementById('status-state')?.dataset.busy==='true';
}
function tell(text) { status.textContent=text; }
function setFileData(data) { host.dataset.file=JSON.stringify(data); props.value=JSON.stringify(data); }
function stopTracks() { stream?.getTracks().forEach(t=>t.stop());stream=null;clearInterval(timer); }
function wav(buffer,start,end) {
 const rate=buffer.sampleRate, first=Math.floor(start*rate), frames=Math.floor(end*rate)-first;
 const bytes=new ArrayBuffer(44+frames*2), v=new DataView(bytes);
 const str=(o,s)=>[...s].forEach((c,i)=>v.setUint8(o+i,c.charCodeAt(0)));
 str(0,'RIFF');v.setUint32(4,36+frames*2,true);str(8,'WAVE');str(12,'fmt ');v.setUint32(16,16,true);v.setUint16(20,1,true);v.setUint16(22,1,true);v.setUint32(24,rate,true);v.setUint32(28,rate*2,true);v.setUint16(32,2,true);v.setUint16(34,16,true);str(36,'data');v.setUint32(40,frames*2,true);
 const channels=Array.from({length:buffer.numberOfChannels},(_,i)=>buffer.getChannelData(i));
 for(let i=0;i<frames;i++) { let sample=0;for(const c of channels) sample+=c[first+i]/channels.length;sample=Math.max(-1,Math.min(1,sample));v.setInt16(44+i*2,sample<0?sample*32768:sample*32767,true); }
 return new File([bytes],'reference.wav',{type:'audio/wav'});
}
async function decode(file) {
 const AudioContextClass=window.AudioContext||window.webkitAudioContext;
 const context=new AudioContextClass();
 try {return await context.decodeAudioData(await file.arrayBuffer());}
 finally {await context.close();}
}
function preview(item, preserveSelection=false) {
 player.pause();if(objectURL) URL.revokeObjectURL(objectURL);
 objectURL=URL.createObjectURL(item.file);player.src=objectURL;current=item;
 q('.reference-player').hidden=false;q('[data-trim]').hidden=false;q('[data-remove]').hidden=false;
 q('[data-file-name]').textContent=item.name;q('[data-duration]').textContent=minutes(item.buffer.duration);
 if(!preserveSelection){q('[data-start]').value='0';q('[data-end]').value=original.buffer.duration.toFixed(2);}
 q('[data-start]').max=q('[data-end]').max=original.buffer.duration;
 q('[data-play]').textContent='Play';q('[data-time]').textContent='0:00';q('[data-seek]').value='0';
}
async function accept(file,fromTrim=false) {
 if(!file) return;
 const version=++generation;busy(true);tell('Preparing voice clip…');
 try {
  if(file.size>25*1024*1024) throw Error('Choose an audio file smaller than 25 MB.');
  const buffer=await decode(file);
  if(disposed || version!==generation) return;
  if(buffer.duration<.5) throw Error('The clip must be at least 0.5 seconds long.');
  if(buffer.duration>60) throw Error('Choose a clip no longer than 60 seconds.');
  tell('Uploading voice clip…');
  const uploaded=await upload(file);
  if(disposed || version!==generation) return;
  const item={file,buffer,name:file.name};if(!fromTrim) original=item;
  setFileData({...uploaded,orig_name:file.name,mime_type:file.type||'audio/wav',meta:{_type:'gradio.FileData'}});
  preview(item,fromTrim);tell('Voice clip ready.');
 } catch(error) { if(version===generation) tell((error.message||'Could not load this audio.')+(current?' Your previous clip is still selected.':'')); }
 finally {if(version===generation) busy(false);}
}
function remove() {
 generation++;recordingRequested=false;busy(false);stopTracks();if(recorder?.state==='recording') recorder.stop();recorder=null;
 player.pause();player.removeAttribute('src');player.load();if(objectURL)URL.revokeObjectURL(objectURL);objectURL=null;original=current=null;setFileData(null);
 q('[data-file]').value='';q('[data-file-name]').textContent='Drop a voice clip here';
 for(const selector of ['.reference-player','[data-trim]','[data-remove]'])q(selector).hidden=true;
 q('[data-record]').textContent='Record voice';tell('');
}
on(q('[data-upload]'),'click',()=>q('[data-file]').click());
on(q('.drop-area'),'click',()=>q('[data-file]').click());
on(q('.drop-area'),'keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();q('[data-file]').click();}});
on(q('[data-file]'),'change',e=>accept(e.target.files[0]));
on(q('.drop-area'),'dragover',e=>{e.preventDefault();q('.drop-area').dataset.over='true';});
on(q('.drop-area'),'dragleave',()=>q('.drop-area').dataset.over='false');
on(q('.drop-area'),'drop',e=>{e.preventDefault();q('.drop-area').dataset.over='false';accept(e.dataTransfer.files[0]);});
on(q('[data-remove]'),'click',remove);
on(q('[data-play]'),'click',async()=>{try{if(player.paused)await player.play();else player.pause();}catch{tell('Playback unavailable. Choose a different audio file.');}});
on(player,'play',()=>q('[data-play]').textContent='Pause');on(player,'pause',()=>q('[data-play]').textContent=player.ended?'Replay':'Play');
on(player,'timeupdate',()=>{q('[data-time]').textContent=minutes(player.currentTime);if(player.duration)q('[data-seek]').value=player.currentTime/player.duration*1000;});
on(q('[data-seek]'),'input',()=>{if(Number.isFinite(player.duration))player.currentTime=+q('[data-seek]').value/1000*player.duration;});
on(q('[data-apply]'),'click',()=>{
 if(!original)return;const start=+q('[data-start]').value,end=+q('[data-end]').value;
 if(!Number.isFinite(start+end)||start<0||end>original.buffer.duration||end-start<.5||end-start>60){tell('Select 0.5–60 seconds within the clip.');return;}
 accept(wav(original.buffer,start,end),true);
});
on(q('[data-reset]'),'click',()=>{if(original)accept(original.file);});
on(q('[data-record]'),'click',async()=>{
 if(recorder?.state==='recording'){recorder.stop();stopTracks();return;}
 if(host.dataset.busy==='true')return;
 const version=++generation;recordingRequested=true;busy(true);tell('Waiting for microphone permission…');
 try {
  if(!navigator.mediaDevices?.getUserMedia || !window.MediaRecorder)throw Error('Recording is unavailable in this browser. Choose an audio file.');
  player.pause();document.getElementById('speech-player')?.dispatchEvent(new CustomEvent('zonos:pause'));
  const acquired=await navigator.mediaDevices.getUserMedia({audio:true});
  if(disposed||version!==generation){acquired.getTracks().forEach(t=>t.stop());return;}
  stream=acquired;const type=['audio/webm;codecs=opus','audio/mp4','audio/webm'].find(t=>MediaRecorder.isTypeSupported(t));
  recorder=new MediaRecorder(stream,type?{mimeType:type}:undefined);const chunks=[];
  recorder.ondataavailable=e=>{if(e.data.size)chunks.push(e.data);};
  recorder.onerror=()=>{if(disposed||version!==generation)return;recordingRequested=false;generation++;stopTracks();if(recorder?.state==='recording')recorder.stop();q('[data-record]').textContent='Record voice';busy(false);tell('Recording failed. Try uploading a clip.');};
  recorder.onstop=()=>{
   if(disposed||version!==generation)return;
   recordingRequested=false;stopTracks();q('[data-record]').textContent='Record voice';busy(false);
   if(disposed||version!==generation)return;
   const mime=recorder.mimeType,extension=mime.includes('mp4')?'m4a':'webm';
   accept(new File(chunks,`recording.${extension}`,{type:mime}));
  };
  recorder.start();recordStarted=performance.now();q('[data-record]').textContent='Stop recording';
  timer=setInterval(()=>{const seconds=(performance.now()-recordStarted)/1000;tell('Recording · '+minutes(seconds));if(seconds>=59){recorder.stop();stopTracks();}},200);
 } catch(error){if(version!==generation)return;recordingRequested=false;stopTracks();busy(false);tell(error.message||'Microphone unavailable. Choose an audio file.');}
});
on(host,'zonos:source',e=>{if(e.detail==='Preset' && recordingRequested){recordingRequested=false;generation++;if(recorder?.state==='recording')recorder.stop();stopTracks();q('[data-record]').textContent='Record voice';busy(false);tell('Recording cancelled.');}else busy(host.dataset.busy==='true');});
function dispose(){disposed=true;generation++;stopTracks();if(recorder?.state==='recording')recorder.stop();player.pause();if(objectURL)URL.revokeObjectURL(objectURL);listeners.abort();observer.disconnect();}
const observer=new MutationObserver(()=>{if(!element.isConnected)dispose();});observer.observe(document.documentElement,{childList:true,subtree:true});
on(window,'pagehide',dispose);setFileData(null);busy(false);