Wahter Studio Sounds

5013m TRACK 1VOLUME 75%TRACK 2VOLUME 75%

CONTROLLING TRACK 1 · SWITCH TRACKS TO CONTROL EACH PLAYER

wahter*SOUNDS / POCKET PLAYERTRACK ${this.getAttribute('deck')||1} STEREO / FILEREADY

NO TRACKS

Load your listening selection00:00 / 00:00DRAG TO SEEK DISC 01FREEOUT−∞ ▪ 0 dB WAVE ZOOM−FULL+ ${icon()}${playbackIcon(false)}${icon(true)}↺ RESET LOOP / BARS— BPM${[0,4,6,8,16,32].map(n=>`${n||'OFF'}`).join('')}OFF${[['filter','FILTER',-100,100,1,'LOW PASS','HIGH PASS']].map(([id,label,min,max,step,left,right])=>`${label}${id==='filter'?'NEUTRAL':id==='loop'?'OFF':'0%'}${left}${right}DROP`).join('')}BEAT MATCHOFFSYNCTRACK 1 MASTER
TRACK 2 FOLLOWSTRACK 2 BPM40240 BPMMANUAL LOOPREADYINOUTIN marks start
OUT closes loop PRESS PLAY. MAKE YOURSELF AT HOME.FX / LOOPTRACK SELECTIONSCROLL TO EXPLORE ↓

PLAY · DRAG THE WAVE · MOVE A SLIDER
LOOP starts on press · 4 beats per bar. Tap OFF to release.
FILTER cuts highs / lows. DROP restores the full sound. WAVE ZOOM enlarges the waveform around the playhead. Choose MASTER, then SYNC. Move BPM to adjust this track; SYNC matches the master (pitch follows speed). IN / OUT sets a manual loop.

`; this.$=s=>this.shadowRoot.querySelector(s); this.audio=new BufferTransport(); this.audio.addEventListener('loadedmetadata',()=>{this.$('#duration').textContent=time(this.audio.duration);this.$('.seek').disabled=!Number.isFinite(this.audio.duration);this.update();}); this.audio.addEventListener('timeupdate',()=>this.update()); this.audio.addEventListener('play',()=>{this.paintState('PLAYING');this.animate();}); this.audio.addEventListener('pause',()=>{this.paintState('PAUSED');this.stopAnimation();}); this.audio.addEventListener('ended',()=>{if(this.values.loop){this.audio.currentTime=this.loopStart;this.start();return;}if(this.index{this.paintState('ERROR');this.tell('AUDIO UNAVAILABLE · Check the file URL and CORS access.');this.pending=false;this.loopStart=0;}); this.audio.addEventListener('waiting',()=>{if(!this.audio.paused)this.paintState('BUFFERING');}); this.audio.addEventListener('playing',()=>this.paintState('PLAYING')); this.$('#beat-match').onclick=()=>this.onBeatMatch?.(); this.$('#tempo-slider').oninput=e=>this.onTempo?.(Number(e.target.value)); this.$('#play').onclick=()=>this.toggle(); this.$('#prev').onclick=()=>this.load((this.index-1+this._tracks.length)%this._tracks.length,!this.audio.paused); this.$('#next').onclick=()=>this.load((this.index+1)%this._tracks.length,!this.audio.paused); this.$('#reset').onclick=()=>{Object.keys(this.values).forEach(k=>this.setEffect(k,0));this.onSyncReset?.();this.tell('EFFECTS AND LOOPS RESET.');}; this.shadowRoot.querySelectorAll('[data-zero]').forEach(b=>b.onclick=()=>this.setEffect(b.dataset.zero,0)); ['filter'].forEach(k=>this.$('#'+k).oninput=e=>this.setEffect(k,+e.target.value)); this.shadowRoot.querySelectorAll('[data-bars]').forEach(b=>{b.onpointerdown=e=>{if(e.button!==0)return;e.preventDefault();b.focus();this.setEffect('loop',+b.dataset.bars);};b.onclick=e=>{if(e.detail===0)this.setEffect('loop',+b.dataset.bars);};}); ['in','out'].forEach(mark=>{const b=this.$('#loop-'+mark);const act=()=>this.markLoop(mark);b.onpointerdown=e=>{if(e.button!==0)return;e.preventDefault();e.stopPropagation();if(b.getAttribute('aria-disabled')==='true')return;b.setPointerCapture?.(e.pointerId);b.focus({preventScroll:true});act();};b.onclick=e=>{e.preventDefault();e.stopPropagation();if(e.detail===0&&b.getAttribute('aria-disabled')!=='true')act();};}); const zoomStep=delta=>{this.waveZoom=Math.max(0,Math.min(3,(this.waveZoom||0)+delta));this.seekWindow=null;this.update();}; this.$('#zoom-out').onclick=()=>zoomStep(-1);this.$('#zoom-in').onclick=()=>zoomStep(1); this.$('.seek').onpointerdown=()=>{this.seekWindow=this.waveWindow();}; ['pointerup','pointercancel','blur'].forEach(event=>this.$('.seek').addEventListener(event,()=>{this.seekWindow=null;this.update();})); this.$('.seek').oninput=e=>{if(Number.isFinite(this.audio.duration)){const view=this.seekWindow||this.waveWindow(),position=view.start+Number(e.target.value)/1000*view.length;if(this.values.loop)this.anchorLoop(position);this.audio.currentTime=this.values.loop?this.loopStart:position;this.update();}}; // Keep composed control clicks out of Cargo's delegated page navigation. this.shadowRoot.addEventListener('click',e=>{e.stopPropagation();if(e.composedPath().some(n=>n.tagName==='BUTTON'))e.preventDefault();}); this.renderList();this.load(this.index,false);this.resize=new ResizeObserver(()=>this.draw());this.resize.observe(this);this.draw(); } disconnectedCallback(){this.generation++;this.abort?.abort();this.stopAnimation();this.resize?.disconnect();if(this.audio){this.audio.pause();this.audio.removeAttribute('src');this.audio.load();this.audio=null;}this.ctx?.close();this.ctx=null;this.pending=false;this.values={filter:0,loop:0};} tell(s){this.$('#status').textContent=s;} renderList(){const list=this.$('.list'),scrollTop=list.scrollTop;list.replaceChildren();this._tracks.forEach((t,i)=>{const b=document.createElement('button');b.type='button';b.className='track';b.setAttribute('aria-current',String(i===this.index));b.setAttribute('aria-label',`Select track ${i+1}: ${t.title||'Untitled'}`);const n=document.createElement('span');n.className='number';n.textContent=String(i+1).padStart(2,'0');const title=document.createElement('span');title.className='track-title';title.textContent=t.title||'UNTITLED';const note=document.createElement('span');note.className='track-note';note.textContent=t.note||t.artist||'';b.append(n,title,note);b.onclick=()=>this.load(i,!this.audio.paused);list.append(b);});list.scrollTop=scrollTop;['#play','#prev','#next'].forEach(s=>this.$(s).disabled=!this._tracks.length);} load(i,play){ if(!this._tracks.length){this.audio.pause();this.audio.removeAttribute('src');this.audio.load();this.$('#title').textContent='NO TRACKS';this.$('#artist').textContent='Add tracks to the configuration';this.$('.seek').disabled=true;return;} this.generation++;this.abort?.abort();this.pending=false;this.audio.pause();this.setEffect("loop",0);this.index=i;this.peaks=[];this.waveLevels=null;this.waveBuffer=null;this.seekWindow=null;this.$('.seek').disabled=true;this.$('.seek').value=0;this.$('#elapsed').textContent='00:00';this.$('#duration').textContent='00:00'; const t=this._tracks[i];if(Array.isArray(t.peaks))this.peaks=t.peaks.map(x=>Math.max(0,Math.min(1,Number(x)||0)));this.$('#title').textContent=`${String(i+1).padStart(2,'0')} — ${t.title||'UNTITLED'}`;this.$('#artist').textContent=t.artist||'';this.$('#bpm').textContent=t.bpm+' BPM';this.$('#discno').textContent=String(i+1).padStart(2,'0');this.audio.src=t.file;this.audio.playbackRate=1;this.audio.load();this.renderList();this.paintState('READY');this.tell(t.note?`${t.note.toUpperCase()} · PRESS PLAY TO EXPLORE.`:'PRESS PLAY. MAKE YOURSELF AT HOME.');this.draw();this.update();if(play)this.start(); } setVolume(value){this.volume=Math.max(0,Math.min(100,Number(value)||0));if(this.master){const now=this.ctx.currentTime;this.master.gain.cancelScheduledValues(now);this.master.gain.setTargetAtTime(.5*this.volume/100,now,.01);}} notifyDeck(){this.dispatchEvent(new CustomEvent('deckchange',{detail:{title:this._tracks[this.index]?.title||'—',state:this.$('#state').textContent}}));} async engine(){ if(this.ctx){await this.ctx.resume();return;} const Context=window.AudioContext||window.webkitAudioContext;if(!Context)throw Error('Web Audio is not available in this browser.'); this.ctx=new Context();const c=this.ctx;this.source=c.createGain();this.audio.connect(c,this.source);this.low=c.createBiquadFilter();this.low.type='lowpass';this.low.Q.value=.55;this.high=c.createBiquadFilter();this.high.type='highpass';this.high.Q.value=.55;this.bus=c.createGain();this.master=c.createGain();this.master.gain.value=.5*this.volume/100;this.analyser=c.createAnalyser();this.analyser.fftSize=256;this.analyser.smoothingTimeConstant=.7; this.source.connect(this.low);this.low.connect(this.high);this.high.connect(this.bus);this.bus.connect(this.master);this.master.connect(this.analyser).connect(c.destination);this.apply();await c.resume(); } apply(){ if(!this.ctx)return;const c=this.ctx,n=c.currentTime,v=this.values;const smooth=(p,x)=>{p.cancelScheduledValues(n);p.setTargetAtTime(x,n,.015);}; // Allpass at center preserves neutral magnitude; LP/HP engage on either side. this.low.type=v.filter0?'highpass':'allpass'; smooth(this.low.frequency,v.filter0?30*Math.pow(3500/30,v.filter/100):10); } loopLength(){if(this.values.loop===-1)return this.loopEnd-this.loopStart;return this.values.loop*4*60/this._tracks[this.index]?.bpm||0;} anchorLoop(position){const duration=this.audio.duration,rate=this.audio.buffer?.sampleRate||48000,length=Math.round(this.loopLength()*rate)/rate;if(!length||!Number.isFinite(duration))return;this.loopStart=Math.max(0,Math.min(Math.round(position*rate)/rate,Math.max(0,duration-length)));this.loopEnd=this.loopStart+length;this.audio.setLoop(this.loopStart,this.loopEnd);this.drawWave();} markLoop(mark){ if(!this.audio.buffer){this.tell('PRESS PLAY TO LOAD THE TRACK, THEN SET A LOOP.');return;} const rate=this.audio.buffer.sampleRate,position=Math.min(this.audio.duration,Math.round(this.audio.currentTime*rate)/rate); if(mark==='in'){ this.setEffect('loop',0);this.manualIn=position;this.$('#loop-in').setAttribute('aria-pressed','true');this.$('#loop-out').setAttribute('aria-disabled','false');this.$('#manual-value').textContent='IN SET';this.tell('IN SET · TAP OUT TO CLOSE THE LOOP.');return; } if(this.manualIn===undefined)return; if(position-this.manualInb.setAttribute('aria-pressed','false'));this.tell('MANUAL LOOP · TAP OFF TO RELEASE.');this.update(); } setEffect(k,v){ const previous=this.values[k]; if(k==='loop'){ if(![0,4,6,8,16,32].includes(v))return; if(v&&!this.audio.buffer){this.tell('PRESS PLAY TO LOAD THE TRACK, THEN SET A LOOP.');return;} this.manualIn=undefined;this.$('#manual-value').textContent='READY';this.$('#loop-in').setAttribute('aria-pressed','false');this.$('#loop-out').setAttribute('aria-disabled','true');this.values.loop=v; if(v){this.anchorLoop(previous?this.loopStart:this.audio.currentTime);this.tell(`LOOP ${v} BARS · TAP OFF TO RELEASE.`);} else{this.audio.setLoop(0,0);this.loopStart=0;this.loopEnd=undefined;if(previous)this.tell('LOOP OFF · CONTINUOUS PLAYBACK.');} this.$('#loop-value').textContent=v?`${v} BARS / LOOP ACTIVE`:'OFF'; this.$('#loopstate').textContent=v?`↻ ${v}B`:'FREE'; this.shadowRoot.querySelectorAll('[data-bars]').forEach(b=>b.setAttribute('aria-pressed',String(+b.dataset.bars===v)));this.drawWave();return; } this.values[k]=v;this.$('#'+k).value=v;const label=k==='filter'?(v===0?'NEUTRAL':`${vbuffer.getChannelData(i)); for(let i=0;i512){const last=levels[levels.length-1],n=Math.ceil(last.low.length/2),lo=new Float32Array(n),hi=new Float32Array(n);for(let i=0;i{let peak=0;for(let j=Math.floor(i*count/96),end=Math.min(count,Math.ceil((i+1)*count/96));j{const x=(i+.5)*w/peaks.length,y=Math.max(2,v/max*(h*.34));c.beginPath();c.moveTo(x,h/2-y);c.lineTo(x,h/2+y);c.stroke();});}else{c.fillStyle='#555';c.font='400 8px Helvetica';c.fillText('TIME / SIGNAL',8,h-9);for(let x=12;xview.length?(t-view.start)/view.length*w:0; c.fillStyle='#f5f5f5';c.fillRect(0,0,w,h);c.fillStyle='#e0edf5';c.fillRect(0,0,Math.max(0,Math.min(w,xAt(position))),h); if(this.values.loop&&view.length){c.fillStyle='#b8e9e1';c.fillRect(Math.max(0,xAt(this.loopStart)),0,Math.max(0,Math.min(w,xAt(this.loopEnd))-Math.max(0,xAt(this.loopStart))),h);} c.strokeStyle='#ccc';c.lineWidth=.5;c.beginPath();c.moveTo(0,h/2);c.lineTo(w,h/2);c.stroke(); if(this.waveLevels&&view.length){const rate=this.audio.buffer.sampleRate,samplesPerPixel=view.length*rate/w;let level=this.waveLevels[0];for(const candidate of this.waveLevels){if(candidate.block{ if(players.some(p=>!p.isConnected||!p.audio))return; players.forEach((p,i)=>{if(p.index!==knownSongs[i])tempos[i]=bpm(i);});knownSongs=players.map(p=>p.index); const followerIndex=1-masterIndex,valid=bpm(0)>0&&bpm(1)>0; if(!valid)synced=false; if(synced)tempos[followerIndex]=tempos[masterIndex]; players.forEach((player,i)=>{ player.baseRate=tempos[i]/bpm(i);player.audio.playbackRate=player.baseRate; const button=player.$('#beat-match');button.disabled=!valid;button.setAttribute('aria-pressed',String(synced));button.textContent=synced?'SYNC ON':'SYNC'; player.$('#sync-value').textContent=tempos[i].toFixed(2)+' BPM'; player.$('#bpm').textContent=tempos[i].toFixed(2)+' BPM'+(i===masterIndex?' · MASTER':synced?' · SYNC':''); player.$('#sync-direction').textContent='TRACK '+(masterIndex+1)+' MASTER → '+(followerIndex+1)+' FOLLOWS'; player.$('#tempo-label').textContent='TRACK '+(i+1)+' BPM'; const slider=player.$('#tempo-slider');slider.disabled=!valid;slider.value=tempos[i];slider.setAttribute('aria-label','Track '+(i+1)+' BPM');slider.setAttribute('aria-valuetext',tempos[i].toFixed(2)+' BPM'); }); root.querySelectorAll('[data-master]').forEach(b=>{const active=Number(b.dataset.master)-1===masterIndex;b.setAttribute('aria-pressed',String(active));b.textContent=active?'MASTER':'MAKE MASTER';}); }; root.querySelectorAll('[data-master]').forEach(button=>button.onclick=()=>{masterIndex=Number(button.dataset.master)-1;refreshSync();}); players.forEach(player=>{ player.onBeatMatch=()=>{synced=!synced;if(!synced)tempos[1-masterIndex]=bpm(1-masterIndex);refreshSync();player.tell(synced?'SYNC ON · FOLLOWER MATCHED TO MASTER.':'SYNC OFF · FOLLOWER ORIGINAL TEMPO.');}; player.onSyncReset=()=>{const i=players.indexOf(player);synced=false;tempos[i]=bpm(i);refreshSync();}; player.addEventListener('deckchange',refreshSync); player.onTempo=value=>{const i=players.indexOf(player);if(i!==masterIndex)synced=false;tempos[i]=Math.max(40,Math.min(240,value));refreshSync();player.tell(synced?'MASTER TEMPO · FOLLOWER MATCHED.':'TRACK '+(i+1)+' MANUAL TEMPO.');}; }); refreshSync(); players.forEach((player,i)=>{ const number=i+1,slider=root.querySelector('#deck-volume-'+number); const update=()=>{root.querySelector('#deck-song-'+number).textContent=player.tracks[player.index]?.title||'—';root.querySelector('#deck-state-'+number).textContent=player.$('#state').textContent;}; player.addEventListener('deckchange',update);update(); slider.oninput=()=>{player.setVolume(slider.value);root.querySelector('#deck-level-'+number).textContent=slider.value+'%';slider.setAttribute('aria-valuetext',slider.value+' percent');}; }); root.querySelectorAll('[data-deck]').forEach(button=>button.onclick=()=>{ const selected=Number(button.dataset.deck)-1; players.forEach((player,i)=>{player.hidden=i!==selected;}); root.querySelectorAll('[data-deck]').forEach(b=>b.setAttribute('aria-pressed',String(b===button))); root.querySelector('#deck-editing').textContent='CONTROLLING TRACK '+(selected+1)+' · PLAYBACK CONTINUES ON BOTH TRACKS'; players[selected].draw(); }); });