// An audio-reactive illustration, not an oscilloscope or a PCM preview. // Energy comes from the playing audio; shape and continuous phase are visual. function voiceEnergy(values) { if (!values.length) return 0; let sum=0, squares=0; for (const value of values) { const v=Number.isFinite(value)?value:0; sum+=v; squares+=v*v; } const rms=Math.sqrt(Math.max(0,squares/values.length-(sum/values.length)**2)); // Soft display gain makes quiet speech visible; silence still stays flat. return Math.sqrt(1-Math.exp(-36*Math.max(0,rms-.0025))); } class WaveMotion { constructor() { this.level=0; this.phase=0; } step(target,seconds) { const dt=Math.min(.05,Math.max(0,seconds)); target=Math.min(1,Math.max(0,Number.isFinite(target)?target:0)); // A quick attack follows syllables; a longer release rounds their decay. // Time-based attack/release behaves alike at 30, 60 and 120 Hz. const tau=target > this.level ? .045 : .16; this.level+=(target-this.level)*(1-Math.exp(-dt/tau)); this.phase=(this.phase+dt*(4.2+3.2*this.level))%(Math.PI*20); if(target===0 && this.level<.001)this.level=0; return this; } } function wavePath(level,phase=0) { level=Math.min(1,Math.max(0,Number.isFinite(level)?level:0)); if(level<.001)return 'M0 70 L1000 70'; function y(t) { const edge=Math.min(1,t/.16,(1-t)/.16); const fade=edge*edge*edge*(edge*(edge*6-15)+10); const broad=.6+.4*(.5+.5*Math.sin(Math.PI*2*1.5*t-phase*.7)); const bend=1.1*Math.sin(Math.PI*2*.8*t-phase*.4); const carrier=(Math.sin(Math.PI*2*5.2*t+phase+bend)+.18*Math.sin(Math.PI*2*8.6*t-phase*.6+.7))/1.18; return 70-64*level*fade*broad*carrier; } const derivative=t=>t<=0||t>=1?0:(y(t+.0001)-y(t-.0001))/.0002; // Cubics follow the analytic curve, without saturation or flattened peaks. const count=128, width=960; let d='M0 70 L20 70'; for(let i=1;i<=count;i++) { const a=(i-1)/count,b=i/count,h=(b-a)/3; d+=` C${(20+width*(a+h)).toFixed(2)} ${(y(a)+derivative(a)*h).toFixed(2)} ${ (20+width*(b-h)).toFixed(2)} ${(y(b)-derivative(b)*h).toFixed(2)} ${ (20+width*b).toFixed(2)} ${y(b).toFixed(2)}`; } return d+' L1000 70'; } // Playback follows the actual PCM texture. The activity curve above stays intact. class PlaybackWave { constructor() { this.level=0; this.shape=new Float32Array(192); this.bins=new Float32Array(256); this.filtered=new Float32Array(256); } reset(){this.level=0;this.shape.fill(0);} step(values,seconds){ const dt=Math.min(.05,Math.max(0,seconds)); const target=values?.length?voiceEnergy(values):0; this.level+=(target-this.level)*(1-Math.exp(-dt/(target > this.level ? .025 : .12))); if(target===0&&this.level<.001)this.reset(); if(!values?.length||target===0)return this; let mean=0; for(const value of values)mean+=Number.isFinite(value)?value:0; mean/=values.length; // Average adjacent PCM samples, then remove only the finest display jitter. for(let i=0;i<256;i++){ const a=Math.floor(i*values.length/256),b=Math.max(a+1,Math.floor((i+1)*values.length/256)); let sum=0; for(let j=a;j0&&slope>best){best=slope;start=i;} } const magnitudes=Array.from(this.filtered.slice(start,start+192),Math.abs).sort((a,b)=>a-b); const scale=Math.max(.012,magnitudes[182]*1.25); const mix=1-Math.exp(-dt/.028); for(let i=0;i<192;i++){ const sample=Math.tanh(this.filtered[start+i]/scale); this.shape[i]+=(sample-this.shape[i])*mix; } return this; } path(){ if(this.level<.001)return 'M0 70 L1000 70'; const count=this.shape.length; const ys=Array.from(this.shape,(value,i)=>{ const t=i/(count-1),edge=Math.min(1,t/.12,(1-t)/.12); const fade=edge*edge*edge*(edge*(edge*6-15)+10); return 70-64*this.level*value*fade; }); // Monotone cubic interpolation keeps small ripples without pointed corners. const slope=ys.slice(1).map((y,i)=>y-ys[i]); const tangent=ys.map((_,i)=>i===0||i===count-1?0: slope[i-1]*slope[i]<=0?0:2*slope[i-1]*slope[i]/(slope[i-1]+slope[i])); const dx=960/(count-1);let d='M0 70 L20 70'; for(let i=1;inull,playing=()=>false,clock=()=>{},paintTransport=()=>{}; function animate(now) { activityFrame=0; if(!element.isConnected)return; const dt=lastFrame?Math.min(.05,(now-lastFrame)/1000):1/60;lastFrame=now; const isPlaying=playing();if(isPlaying)clock(); const path=element.querySelector('.wave path'); if(isPlaying)paintTransport(); if(reducedMotion.matches){motion.level=0;playbackWave.reset();path.setAttribute('d',wavePath(active ? .27 : 0,.6));} else if(active){ motion.step(.32+.055*Math.sin(now/1300),dt); path.setAttribute('d',wavePath(motion.level,motion.phase)); }else if(isPlaying||playbackWave.level>0){ motion.level=0;playbackWave.step(isPlaying?signal():null,dt); path.setAttribute('d',playbackWave.path()); }else{ motion.step(0,dt);path.setAttribute('d',wavePath(motion.level,motion.phase)); } if(isPlaying || (active&&!reducedMotion.matches) || motion.level>0 || playbackWave.level>0)activityFrame=requestAnimationFrame(animate); else lastFrame=0; } function scheduleWave(){if(!activityFrame)activityFrame=requestAnimationFrame(animate);} function setActivity(busy){ active=busy;if(busy)playbackWave.reset(); element.querySelector('.wave').setAttribute('aria-label',busy?'Request activity indicator; not an audio preview':'Voice-reactive visualization'); host.dataset.busy=String(busy); if(!busy){ const generate=document.getElementById('generate-speech'); if(generate)generate.disabled=document.getElementById('voice-options')?.dataset.clip==='true'&&document.getElementById('reference-clip')?.dataset.busy==='true'; queueMicrotask(tryAutoplay); } scheduleWave(); } const globalListeners=new AbortController(); const on=(target,name,handler,options={})=>target?.addEventListener(name,handler,{...options,signal:globalListeners.signal}); // Keep one media element and AudioContext across takes. WebKit grants playback // permission per element; replacing it after an asynchronous request loses that. const player=element.querySelector('audio'),controls=element.querySelector('.playback'); const button=element.querySelector('[data-play]'),seek=element.querySelector('[data-seek]'); const notice=element.querySelector('.audio-notice'); let context=null,analyser=null,source=null,data={},revision=0,disposed=false; let requested=false,autoplayCandidate=false,playPending=false; const samples=new Float32Array(4096); const minutes=seconds=>`${Math.floor(seconds/60)}:${String(Math.floor(seconds%60)).padStart(2,'0')}`; const autoplayEnabled=()=>document.getElementById('autoplay-result')?.checked===true; playing=()=>Boolean(data.url)&&!player.paused&&!player.ended; signal=()=>{if(!analyser)return null;analyser.getFloatTimeDomainData(samples);return samples;}; clock=()=>{if(data.url)document.getElementById('script-input')?.dispatchEvent(new CustomEvent('zonos:clock',{detail:{time:player.currentTime||0,playing:playing()}}));}; function prepareAudio(){ const AudioContextClass=window.AudioContext||window.webkitAudioContext; if(!context&&AudioContextClass){ try{context=new AudioContextClass();analyser=context.createAnalyser();analyser.fftSize=4096; source=context.createMediaElementSource(player);source.connect(analyser);analyser.connect(context.destination); }catch{source?.disconnect();analyser?.disconnect();context?.close().catch(()=>{});context=null;analyser=null;source=null;} } return context?.state==='suspended'?context.resume():Promise.resolve(); } function silentWav(){ const buffer=new ArrayBuffer(44+1600),view=new DataView(buffer); const str=(offset,text)=>{for(let i=0;i{}); if(!data.url){ primerURL ||= silentWav();player.src=primerURL; player.play().catch(()=>{}); // Silent 100 ms permission primer; never a result. } } function transport(){ const ended=player.ended||(Number.isFinite(player.duration)&&player.duration>0&&player.currentTime>=player.duration-.01); const label=playing()?'Pause':ended?'Replay':'Play'; button.dataset.state=label.toLowerCase();button.setAttribute('aria-label',label+' generated speech');button.title=label; button.querySelector('[data-play-label]').textContent=label; } paintTransport=()=>{ if(!data.url)return; const current=player.currentTime||0,duration=Number.isFinite(player.duration)?player.duration:(data.duration||0); element.querySelector('[data-time]').textContent=minutes(current); if(duration>0){ const progress=Math.min(1000,Math.max(0,Math.round(current/duration*1000))); seek.value=String(progress);seek.style.setProperty('--seek-progress',`${progress/10}%`); seek.setAttribute('aria-valuetext',`${minutes(current)} of ${minutes(duration)}`); } }; function updateTime(){ if(!data.url)return; clock();transport();paintTransport(); } async function startPlayback(automatic=false){ if(!data.url||playPending||disposed)return; const take=revision;playPending=true; try{ // Start both during the gesture for manual playback, without yielding first. const ready=prepareAudio();const started=player.play(); await Promise.all([ready,started]); if(disposed||take!==revision)return; if(context&&context.state!=='running')throw new Error('Audio context is suspended'); notice.hidden=true;player.controls=false;player.hidden=true;transport();scheduleWave(); }catch(error){ if(disposed||take!==revision||error?.name==='AbortError')return; player.pause();transport(); notice.textContent=automatic?'Auto-play was blocked. Tap Play to listen.':'Tap Play to listen, or download the WAV.'; notice.hidden=false; // Our Play control remains available; expose native controls for media errors. if(error?.name!=='NotAllowedError'){player.hidden=false;player.controls=true;} }finally{if(take===revision)playPending=false;} } function tryAutoplay(){ if(active||!autoplayCandidate)return; autoplayCandidate=false; if(!requested||!autoplayEnabled())return; requested=false; if(document.visibilityState==='hidden'){ notice.textContent='Audio is ready. Tap Play to listen.';notice.hidden=false;return; } startPlayback(true); } on(button,'click',()=>{ requested=false;autoplayCandidate=false; if(playing()){player.pause();return;} if(player.ended||(player.duration>0&&player.currentTime>=player.duration-.01))player.currentTime=0; startPlayback(); }); on(document,'click',event=>{ if(event.target.closest('#generate-speech'))armPlayback(); if(event.target.closest('#cancel-speech')){requested=false;autoplayCandidate=false;} },{capture:true}); on(host,'zonos:pause',()=>{if(data.url)player.pause();}); on(host,'zonos:activity',event=>setActivity(event.detail===true)); for(const event of ['play','playing','pause','ended','seeked'])on(player,event,()=>{updateTime();scheduleWave();}); on(player,'timeupdate',updateTime); on(player,'loadedmetadata',()=>{if(data.url){element.querySelector('[data-duration]').textContent=minutes(player.duration);updateTime();}}); on(player,'error',()=>{if(data.url){notice.hidden=false;notice.textContent='This audio is no longer available. Generate a new take.';scheduleWave();}}); on(seek,'input',()=>{if(data.url&&Number.isFinite(player.duration)){player.currentTime=Number(seek.value)/1000*player.duration;updateTime();}}); const statusObserver=new MutationObserver(()=>{ const status=document.getElementById('status-state'); if(status?.getAttribute('role')==='alert'){requested=false;autoplayCandidate=false;} if(status&&(status.dataset.busy==='true')!==active)setActivity(status.dataset.busy==='true'); }); statusObserver.observe(document.getElementById('request-status')||document.documentElement,{childList:true,subtree:true,attributes:true,attributeFilter:['data-busy']}); const removalObserver=new MutationObserver(()=>{if(!element.isConnected)cleanup();}); removalObserver.observe(document.documentElement,{childList:true,subtree:true}); function cleanup(){ if(disposed)return;disposed=true;player.pause();player.removeAttribute('src');player.load(); source?.disconnect();analyser?.disconnect();context?.close().catch(()=>{}); if(primerURL)URL.revokeObjectURL(primerURL); cancelAnimationFrame(activityFrame);statusObserver.disconnect();removalObserver.disconnect();globalListeners.abort(); } on(window,'pagehide',event=>{requested=false;autoplayCandidate=false;player.pause();if(!event.persisted)cleanup();}); on(reducedMotion,'change',scheduleWave); function mount(){ let next;try{next=JSON.parse(props.value||'{}');}catch{return;} if(!next.url)return; let url;try{url=new URL(next.url,document.baseURI);}catch{return;} if(url.origin!==location.origin||!url.pathname.includes('/gradio_api/file='))return; if(next.url===data.url)return; player.pause();revision++;playPending=false;data=next; player.controls=false;player.hidden=true;notice.hidden=true;controls.hidden=false; playbackWave.reset();player.src=url.href;seek.value='0';seek.style.setProperty('--seek-progress','0%');element.querySelector('[data-time]').textContent='0:00'; element.querySelector('[data-duration]').textContent=minutes(data.duration||0); const link=element.querySelector('[data-download]');link.href=url.href;link.download=data.download_name||'zonos3.wav'; document.getElementById('script-input')?.dispatchEvent(new CustomEvent('zonos:take',{detail:data})); document.getElementById('voice-options')?.dispatchEvent(new CustomEvent('zonos:seed',{detail:data.seed})); autoplayCandidate=requested;transport();scheduleWave();queueMicrotask(tryAutoplay); } watch('value',mount);mount(); host.dataset.ready='true';