diff options
Diffstat (limited to 'libs')
| -rw-r--r-- | libs/music/player.d/main_static.js | 1374 |
1 files changed, 689 insertions, 685 deletions
diff --git a/libs/music/player.d/main_static.js b/libs/music/player.d/main_static.js index f4077bb..fe30cca 100644 --- a/libs/music/player.d/main_static.js +++ b/libs/music/player.d/main_static.js @@ -8,499 +8,500 @@ let NSPlayer=null; let NSUI=null; const sh={ - elem:function(e) - {return document.getElementById(e);}, - newelem:function(e) - {return document.createElement(e);}, - getcookie:function(key) - {return document.cookie.replace(new RegExp('(?:(?:^|.*;\\s*)'+key+'\\s*\\=\\s*([^;]*).*$)|^.*$'),'$1');}, - useFLAC:function() - {return sh.elem('audio').canPlayType('audio/ogg')=='';} + elem:function(e) + {return document.getElementById(e);}, + newelem:function(e) + {return document.createElement(e);}, + getcookie:function(key) + {return document.cookie.replace(new RegExp('(?:(?:^|.*;\\s*)'+key+'\\s*\\=\\s*([^;]*).*$)|^.*$'),'$1');}, + useFLAC:function() + {return sh.elem('audio').canPlayType('audio/ogg')=='';} }; class Ink { - constructor(_vx,_vy,_c) - { - this.x=NSUI.canvas.width/2;this.y=NSUI.canvas.height/2; - this.vx=_vx;this.vy=_vy; - this.color=_c>6?6:_c;this.active=true; - } - update() - { - const canvas=NSUI.canvas; - this.x+=this.vx;this.y+=this.vy; - this.vx*=0.995;this.vy*=0.995; - if(this.x<-10||this.x>canvas.width+10||this.y<-10||this.y>canvas.height+10) - this.active=false; - } - draw(cctx) - { - cctx.drawImage(NSInk.inkimg[this.color],this.x+5*window.devicePixelRatio,this.y+5*window.devicePixelRatio); - } + constructor(_vx,_vy,_c) + { + this.x=NSUI.canvas.width/2;this.y=NSUI.canvas.height/2; + this.vx=_vx;this.vy=_vy; + this.color=_c>6?6:_c;this.active=true; + } + update() + { + const canvas=NSUI.canvas; + this.x+=this.vx;this.y+=this.vy; + this.vx*=0.995;this.vy*=0.995; + if(this.x<-10||this.x>canvas.width+10||this.y<-10||this.y>canvas.height+10) + this.active=false; + } + draw(cctx) + { + cctx.drawImage(NSInk.inkimg[this.color],this.x+5*window.devicePixelRatio,this.y+5*window.devicePixelRatio); + } } NSPlayer={ - plistname:null, - tracks:null, - current:null, - shuffle:0, - repeat:0, - load_playlist:async function(pln,ord) - { - let r=null; - try{ - const resp=await fetch(new Request(`/libs/music/player.d/playlists/${pln}.playlist?${new Date().getTime()}`)); - r=await resp.text(); - }catch(e){return;} - let rarr=r.split('\n'); - let tarr=[]; - const fmt=sh.useFLAC()?'flac':'ogg'; - for(let i=1;i<rarr.length;++i) - { - let t=rarr[i].trim(); - if(!t.length)continue; - let titem={}; - titem.title=t; - titem.ord=i-1; - titem.src=`//filestorage.chrisoft.org/music/${fmt}/${t}.${fmt}`; - tarr.push(titem); - } - return ({plistname:pln,playlist:tarr,plistord:ord}); - }, - play:function(id) - { - if(!this.plistname)return; - window.history.replaceState('','The Stupid Online Player', - `#${encodeURIComponent(this.plistname)}/${encodeURIComponent(this.tracks[id].title)}`); - NSUI.iplaypause.style.backgroundPosition=`${NSUI.bpauserect}`; - this.current=id; - NSUI.lbnowplaying.innerHTML=`Now Playing: ${this.tracks[id].title}`; - if(navigator.mediaSession) - navigator.mediaSession.metadata=new MediaMetadata({title:this.tracks[id].title,album:this.plistname}); - NSUI.set_highlighted(this.plistname,this.tracks[id].title); - NSUI.audio.src=this.tracks[id].src; - NSUI.audio.load(); - NSUI.audio.play(); - }, - next:function() - { - this.current=(this.current+1)%this.tracks.length; - if(this.current==0&&this.shuffle) - NSUI.switch_playlist(this.plistname); - this.play(this.current); - }, - prev:function() - { - this.current=(this.current-1+this.tracks.length)%this.tracks.length; - this.play(this.current); - }, - switch_playlist:function(plistname,plist) - { - this.plistname=plistname; - this.tracks=plist; - }, - sort_playlist:function(shuffle,plist) - { - const tarr=plist?plist:this.tracks; - if(!tarr)return; - if(shuffle) - for(let i=0;i<tarr.length;++i) - tarr[i].sord=Math.random()*tarr.length; - tarr.sort( - (a,b)=>{ - const ra=shuffle?a.sord:a.ord; - const rb=shuffle?b.sord:b.ord; - return ra<rb?-1:1; - } - ); - if(plist)plist=tarr;else this.tracks=tarr; - } + plistname:null, + tracks:null, + current:null, + shuffle:0, + repeat:0, + load_playlist:async function(pln,ord) + { + let r=null; + try{ + const resp=await fetch(new Request(`/libs/music/player.d/playlists/${pln}.playlist?${new Date().getTime()}`)); + r=await resp.text(); + }catch(e){return;} + let rarr=r.split('\n'); + let tarr=[]; + const fmt=sh.useFLAC()?'flac':'ogg'; + for(let i=1;i<rarr.length;++i) + { + let t=rarr[i].trim(); + if(!t.length)continue; + let titem={}; + titem.title=t; + titem.ord=i-1; + titem.src=`//filestorage.chrisoft.org/music/${fmt}/${t}.${fmt}`; + tarr.push(titem); + } + return ({plistname:pln,playlist:tarr,plistord:ord}); + }, + play:function(id) + { + if(!this.plistname)return; + window.history.replaceState('','The Stupid Online Player', + `#${encodeURIComponent(this.plistname)}/${encodeURIComponent(this.tracks[id].title)}`); + NSUI.iplaypause.style.backgroundPosition=`${NSUI.bpauserect}`; + this.current=id; + NSUI.lbnowplaying.innerHTML=`Now Playing: ${this.tracks[id].title}`; + if(navigator.mediaSession) + navigator.mediaSession.metadata=new MediaMetadata({title:this.tracks[id].title,album:this.plistname}); + NSUI.set_highlighted(this.plistname,this.tracks[id].title); + NSUI.audio.src=this.tracks[id].src; + NSUI.audio.load(); + NSUI.audio.play(); + }, + next:function() + { + this.current=(this.current+1)%this.tracks.length; + if(this.current==0&&this.shuffle) + NSUI.switch_playlist(this.plistname); + this.play(this.current); + }, + prev:function() + { + this.current=(this.current-1+this.tracks.length)%this.tracks.length; + this.play(this.current); + }, + switch_playlist:function(plistname,plist) + { + this.plistname=plistname; + this.tracks=plist; + }, + sort_playlist:function(shuffle,plist) + { + const tarr=plist?plist:this.tracks; + if(!tarr)return; + if(shuffle) + for(let i=0;i<tarr.length;++i) + tarr[i].sord=Math.random()*tarr.length; + tarr.sort( + (a,b)=>{ + const ra=shuffle?a.sord:a.ord; + const rb=shuffle?b.sord:b.ord; + return ra<rb?-1:1; + } + ); + if(plist)plist=tarr;else this.tracks=tarr; + } }; NSUI={ - playlist:null, - audio:null, - canvas:null, - iplaypause:null, - irepeat:null, - ishuffle:null, - lbnowplaying:null, - playlists:null, - ulplaylists:null, - swplaylist:null, - selectedplist:null, - vissel:null, - pbnext:null, - pbprev:null, - ctrlcontainer:null, - am3u8:null, - bplayrect:"0 -48px", - bpauserect:"-24px -48px", - brallrect:"-24px -24px", - brnonrect:"-48px -24px", - bronerect:"0 0", - bsoffrect:"-24px 0", - bshonrect:"-48px 0", - plistshown:true, - setup_ui:function() - { - window.devicePixelRatio=window.devicePixelRatio?window.devicePixelRatio:1; - window.onresize=function() - { - if(window.innerWidth<768) - setupevents(); - else unsetevents(); - }; - window.onresize(); - this.playlist=sh.elem('playlist'); - this.swplaylist=sh.elem('plistsw'); - this.audio=sh.elem('audio'); - this.canvas=sh.elem('cvs'); - this.iplaypause=sh.elem('imgplaypause'); - this.irepeat=sh.elem('imgrepeat'); - this.ishuffle=sh.elem('imgshuffle'); - this.lbnowplaying=sh.elem('nowplaying'); - this.ulplaylists=sh.elem('plists'); - this.vissel=sh.elem('visualizationsel'); - this.pbnext=sh.elem('pbnext'); - this.pbprev=sh.elem('pbprev'); - this.ctrlcontainer=sh.elem('ctrlcontainer'); - this.am3u8=sh.elem('am3u8'); - NSUI.canvas.width=NSUI.canvas.clientWidth*window.devicePixelRatio; - NSUI.canvas.height=NSUI.canvas.clientHeight*window.devicePixelRatio; - NSUI.vissel.onchange=function(){ - if(this.value!='none'&&this.oldvalue=='none')requestAnimationFrame(NSVisualization.updateVisualization); - else NSUI.canvas.getContext('2d').clearRect(0,0,NSUI.canvas.width,NSUI.canvas.height); - document.cookie='playervisualization='+this.value; - this.oldvalue=this.value; - }; - document.getElementById('shufflesw').onclick=function(){ - NSUI.shuffle_switch(NSPlayer.shuffle=1-NSPlayer.shuffle); - NSUI.ishuffle.style.backgroundPosition=`${NSPlayer.shuffle?NSUI.bshonrect:NSUI.bsoffrect}`; - document.cookie=`playershuffle=${NSPlayer.shuffle}`; - }; - document.getElementById('repeatsw').onclick=function(){ - NSPlayer.repeat=1-NSPlayer.repeat; - NSUI.audio.loop=NSPlayer.repeat?true:false; - NSUI.irepeat.style.backgroundPosition=`${NSPlayer.repeat?NSUI.bronerect:NSUI.brallrect}`; - document.cookie=`playerrepeat=${NSPlayer.repeat}`; - }; - document.getElementById('plistsw').onclick=NSUI.togglePlist; - document.getElementById('tsliderbase').onclick= - document.getElementById('tsliderbase').onmousemove=function(e) - { - if(e.type=='click'||(e.type=='mousemove'&&e.buttons==1)) - { - const sr=this.getBoundingClientRect(); - const p=(e.clientX-sr.left)/sr.width; - NSUI.audio.currentTime=NSUI.audio.duration*p; - } - }; - const playpausef=function() - { - if(NSUI.audio.src=='') - { - if(NSUI.selectedplist) - { - NSUI.switch_playlist(NSUI.selectedplist); - NSUI.switch_track(0); - } - return; - } - if(NSUI.audio.paused) - { - NSUI.audio.play(); - NSUI.iplaypause.style.backgroundPosition=`${NSUI.bpauserect}`; - } - else - { - NSUI.audio.pause(); - NSUI.iplaypause.style.backgroundPosition=`${NSUI.bplayrect}`; - } - }; - NSUI.iplaypause.onclick=playpausef; - NSUI.pbprev.onclick=function() - { - if(NSUI.audio.currentTime>10)NSUI.audio.currentTime=0; - else NSPlayer.prev(); - }; - NSUI.pbnext.onclick=NSPlayer.next.bind(NSPlayer); - if(navigator.mediaSession) - { - navigator.mediaSession.setActionHandler('previoustrack',NSUI.pbprev.onclick); - navigator.mediaSession.setActionHandler('nexttrack',NSUI.pbnext.onclick); - } - window.onkeydown=function(e) - { - if(e.key==' ') - { - playpausef(); - return false; - } - if(e.key=='c') - if(NSUI.audio.audioTracks.length==2) - { - const t=NSUI.audio.currentTime; - NSUI.audio.audioTracks[0].enabled^=1; - NSUI.audio.audioTracks[1].enabled^=1; - NSUI.audio.currentTime=t; - } - return true; - }; - }, - load_playlists:async function() - { - const moi=this; - let r=null; - try{ - const resp=await fetch(new Request(`/libs/music/player.d/playlists/playlists?${new Date().getTime()}`)); - r=await resp.text(); - }catch(e){return;} - let rarr=r.split('\n'); - let tarr=[]; - let cnt=0; - for(let i=0;i<rarr.length;++i) - if(rarr[i].trim().length)++cnt; - const p=new Promise((a,b)=>{ - for(let i=0;i<rarr.length;++i) - { - let t=rarr[i].trim(); - if(!t.length)continue; - NSPlayer.load_playlist(t,i).then((rp)=>{ - tarr[rp.plistord]=rp; - if(--cnt<=0)a(null); - }); - } - }); - await p; - for(let i=0;i<tarr.length;++i) - { - const e=sh.newelem('li'); - const ea=sh.newelem('a'); - ea.innerHTML=tarr[i].plistname; - ea.classList.add('listitem'); - ea.href='javascript:void(0);'; - ea.pid=i; - ea.onclick=function(e){ - e.preventDefault(); - for(let i=0;i<NSUI.ulplaylists.childNodes.length;++i) - { - const ta=NSUI.ulplaylists.childNodes[i].firstChild; - if(ta.pid==this.pid) - {ta.classList.add('highlighted');ta.classList.add('active');} - else{ta.classList.remove('highlighted');ta.classList.remove('active');} - } - NSUI.present_playlist.bind(NSUI,this.pid)(); - if(NSPlayer.current) - NSUI.set_highlighted(NSPlayer.plistname,NSPlayer.tracks[NSPlayer.current].title); - }; - e.appendChild(ea); - NSUI.ulplaylists.appendChild(e); - } - moi.playlists=tarr; - }, - present_playlist:function(id) - { - while(this.playlist.firstChild) - this.playlist.removeChild(this.playlist.firstChild); - const list=this.playlists[id].playlist; - for(let i=0;i<list.length;++i) - { - const l=sh.newelem('li'); - const a=sh.newelem('a'); - a.innerHTML=list[i].title; - a.href=list[i].src; - a.ord=i; - a.onclick=function(e){e.preventDefault();NSUI.switch_track.bind(NSUI,this.ord)();}; - l.appendChild(a); - this.playlist.appendChild(l); - } - const d=sh.newelem('div');d.style.height=`${NSUI.ctrlcontainer.getBoundingClientRect().height+16}px`; - this.playlist.appendChild(d); - this.selectedplist=this.playlists[id].plistname; - this.am3u8.href=`https://chrisoft.org/libs/music/player.d/cgi-bin/m3u8.cgi?plist=${this.playlists[id].plistname}`; - }, - switch_playlist:function(pl,setactive) - { - let cid=0; - for(;cid<this.playlists.length;++cid) - if(this.playlists[cid].plistname==pl)break; - if(cid>=this.playlists.length)return; - if(setactive) - { - NSUI.ulplaylists.childNodes[cid].firstChild.classList.add('highlighted'); - NSUI.ulplaylists.childNodes[cid].firstChild.classList.add('active'); - } - //VERY stupid design, but it _should_ work. - NSPlayer.switch_playlist(pl,this.playlists[cid].playlist); - NSPlayer.sort_playlist(NSPlayer.shuffle); - this.playlists[cid].playlist=NSPlayer.tracks; - this.present_playlist(cid); - this.selectedplist=pl; - }, - switch_track:function(id) - { - if(NSPlayer.plistname!=this.selectedplist) - this.switch_playlist(this.selectedplist); - NSPlayer.play(id); - }, - set_highlighted:function(pl,t) - { - if(pl!=this.selectedplist)return; - let cid=0; - for(;cid<this.playlists.length;++cid) - if(this.playlists[cid].plistname==pl)break; - const clist=this.playlists[cid].playlist; - for(let i=0;i<clist.length;++i) - if(clist[i].title==t) - this.playlist.childNodes[i].firstChild.classList.add('highlighted'); - else - this.playlist.childNodes[i].firstChild.classList.remove('highlighted'); - }, - shuffle_switch:function(shuffle) - { - for(let i=0;i<this.playlists.length;++i) - { - NSPlayer.sort_playlist(shuffle,this.playlists[i].playlist); - if(i==this.selectedplist)this.present_playlist(i); - } - NSPlayer.sort_playlist(shuffle); - }, - togglePlist:function() - { - NSUI.plistshown=!NSUI.plistshown; - NSUI.swplaylist.innerHTML=`[${NSUI.plistshown?'Hide':'Show'} Playlist]`; - NSUI.playlist.style.opacity=NSUI.plistshown?'1':'0'; - NSUI.playlist.style.pointerEvents=NSUI.plistshown?'auto':'none'; - }, - formatTime:function(t) - { - if(isNaN(t))return '-:--'; - let m=Math.floor(t/60),s=Math.round(t-Math.floor(t/60)*60); - if(s<10)return `${m}:0${s}`; - else if(s==60)return `${m+1}:00`; - else return `${m}:${s}`; - }, - bufferedUpdate:function() - { - let r=0; - for(let i=0;i<NSUI.audio.buffered.length;++i) - r=r<NSUI.audio.buffered.end(i)?NSUI.audio.buffered.end(i):r; - document.getElementById('cbuff').style.width=r/NSUI.audio.duration*100+'%'; - }, - timeUpdate:function() - { - document.getElementById('timenow').innerHTML=NSUI.formatTime(NSUI.audio.currentTime); - document.getElementById('timeleft').innerHTML=`-${NSUI.formatTime(NSUI.audio.duration-NSUI.audio.currentTime)}`; - document.getElementById('ctime').style.width=NSUI.audio.currentTime/NSUI.audio.duration*100+'%'; - NSUI.bufferedUpdate(); - } + playlist:null, + audio:null, + canvas:null, + iplaypause:null, + irepeat:null, + ishuffle:null, + lbnowplaying:null, + playlists:null, + ulplaylists:null, + swplaylist:null, + selectedplist:null, + vissel:null, + pbnext:null, + pbprev:null, + ctrlcontainer:null, + am3u8:null, + bplayrect:"0 -48px", + bpauserect:"-24px -48px", + brallrect:"-24px -24px", + brnonrect:"-48px -24px", + bronerect:"0 0", + bsoffrect:"-24px 0", + bshonrect:"-48px 0", + plistshown:true, + setup_ui:function() + { + window.devicePixelRatio=window.devicePixelRatio?window.devicePixelRatio:1; + window.onresize=function() + { + if(window.innerWidth<768) + setupevents(); + else unsetevents(); + }; + window.onresize(); + this.playlist=sh.elem('playlist'); + this.swplaylist=sh.elem('plistsw'); + this.audio=sh.elem('audio'); + this.canvas=sh.elem('cvs'); + this.iplaypause=sh.elem('imgplaypause'); + this.irepeat=sh.elem('imgrepeat'); + this.ishuffle=sh.elem('imgshuffle'); + this.lbnowplaying=sh.elem('nowplaying'); + this.ulplaylists=sh.elem('plists'); + this.vissel=sh.elem('visualizationsel'); + this.pbnext=sh.elem('pbnext'); + this.pbprev=sh.elem('pbprev'); + this.ctrlcontainer=sh.elem('ctrlcontainer'); + this.am3u8=sh.elem('am3u8'); + NSUI.canvas.width=NSUI.canvas.clientWidth*window.devicePixelRatio; + NSUI.canvas.height=NSUI.canvas.clientHeight*window.devicePixelRatio; + NSUI.vissel.onchange=function(){ + if(this.value!='none'&&this.oldvalue=='none')requestAnimationFrame(NSVisualization.updateVisualization); + else NSUI.canvas.getContext('2d').clearRect(0,0,NSUI.canvas.width,NSUI.canvas.height); + document.cookie='playervisualization='+this.value; + this.oldvalue=this.value; + }; + document.getElementById('shufflesw').onclick=function(){ + NSUI.shuffle_switch(NSPlayer.shuffle=1-NSPlayer.shuffle); + NSUI.ishuffle.style.backgroundPosition=`${NSPlayer.shuffle?NSUI.bshonrect:NSUI.bsoffrect}`; + document.cookie=`playershuffle=${NSPlayer.shuffle}`; + }; + document.getElementById('repeatsw').onclick=function(){ + NSPlayer.repeat=1-NSPlayer.repeat; + NSUI.audio.loop=NSPlayer.repeat?true:false; + NSUI.irepeat.style.backgroundPosition=`${NSPlayer.repeat?NSUI.bronerect:NSUI.brallrect}`; + document.cookie=`playerrepeat=${NSPlayer.repeat}`; + }; + document.getElementById('plistsw').onclick=NSUI.togglePlist; + document.getElementById('tsliderbase').onclick= + document.getElementById('tsliderbase').onmousemove=function(e) + { + if(e.type=='click'||(e.type=='mousemove'&&e.buttons==1)) + { + const sr=this.getBoundingClientRect(); + const p=(e.clientX-sr.left)/sr.width; + NSUI.audio.currentTime=NSUI.audio.duration*p; + } + }; + const playpausef=function() + { + if(NSUI.audio.src=='') + { + if(NSUI.selectedplist) + { + NSUI.switch_playlist(NSUI.selectedplist); + NSUI.switch_track(0); + } + return; + } + if(NSUI.audio.paused) + { + NSUI.audio.play(); + NSUI.iplaypause.style.backgroundPosition=`${NSUI.bpauserect}`; + } + else + { + NSUI.audio.pause(); + NSUI.iplaypause.style.backgroundPosition=`${NSUI.bplayrect}`; + } + }; + NSUI.iplaypause.onclick=playpausef; + NSUI.pbprev.onclick=function() + { + if(NSUI.audio.currentTime>10)NSUI.audio.currentTime=0; + else NSPlayer.prev(); + }; + NSUI.pbnext.onclick=NSPlayer.next.bind(NSPlayer); + if(navigator.mediaSession) + { + navigator.mediaSession.setActionHandler('previoustrack',NSUI.pbprev.onclick); + navigator.mediaSession.setActionHandler('nexttrack',NSUI.pbnext.onclick); + } + window.onkeydown=function(e) + { + if(e.key==' ') + { + playpausef(); + return false; + } + if(e.key=='c') + if(NSUI.audio.audioTracks.length==2) + { + const t=NSUI.audio.currentTime; + NSUI.audio.audioTracks[0].enabled^=1; + NSUI.audio.audioTracks[1].enabled^=1; + NSUI.audio.currentTime=t; + } + return true; + }; + }, + load_playlists:async function() + { + const moi=this; + let r=null; + try{ + const resp=await fetch(new Request(`/libs/music/player.d/playlists/playlists?${new Date().getTime()}`)); + r=await resp.text(); + }catch(e){return;} + let rarr=r.split('\n'); + let tarr=[]; + let cnt=0; + for(let i=0;i<rarr.length;++i) + if(rarr[i].trim().length)++cnt; + const p=new Promise((a,b)=>{ + for(let i=0;i<rarr.length;++i) + { + let t=rarr[i].trim(); + if(!t.length)continue; + NSPlayer.load_playlist(t,i).then((rp)=>{ + tarr[rp.plistord]=rp; + if(--cnt<=0)a(null); + }); + } + }); + await p; + for(let i=0;i<tarr.length;++i) + { + const e=sh.newelem('li'); + const ea=sh.newelem('a'); + ea.innerHTML=tarr[i].plistname; + ea.classList.add('listitem'); + ea.href='javascript:void(0);'; + ea.pid=i; + ea.onclick=function(e){ + e.preventDefault(); + for(let i=0;i<NSUI.ulplaylists.childNodes.length;++i) + { + const ta=NSUI.ulplaylists.childNodes[i].firstChild; + if(ta.pid==this.pid) + {ta.classList.add('highlighted');ta.classList.add('active');} + else{ta.classList.remove('highlighted');ta.classList.remove('active');} + } + NSUI.present_playlist.bind(NSUI,this.pid)(); + if(NSPlayer.current) + NSUI.set_highlighted(NSPlayer.plistname,NSPlayer.tracks[NSPlayer.current].title); + }; + e.appendChild(ea); + NSUI.ulplaylists.appendChild(e); + } + moi.playlists=tarr; + }, + present_playlist:function(id) + { + while(this.playlist.firstChild) + this.playlist.removeChild(this.playlist.firstChild); + const list=this.playlists[id].playlist; + for(let i=0;i<list.length;++i) + { + const l=sh.newelem('li'); + const a=sh.newelem('a'); + a.innerHTML=list[i].title; + a.href=list[i].src; + a.ord=i; + a.onclick=function(e){e.preventDefault();NSUI.switch_track.bind(NSUI,this.ord)();}; + l.appendChild(a); + this.playlist.appendChild(l); + } + const d=sh.newelem('div');d.style.height=`${NSUI.ctrlcontainer.getBoundingClientRect().height+16}px`; + this.playlist.appendChild(d); + this.selectedplist=this.playlists[id].plistname; + this.am3u8.href=`https://chrisoft.org/libs/music/player.d/cgi-bin/m3u8.cgi?plist=${this.playlists[id].plistname}`; + }, + switch_playlist:function(pl,setactive) + { + let cid=0; + for(;cid<this.playlists.length;++cid) + if(this.playlists[cid].plistname==pl)break; + if(cid>=this.playlists.length)return; + if(setactive) + { + NSUI.ulplaylists.childNodes[cid].firstChild.classList.add('highlighted'); + NSUI.ulplaylists.childNodes[cid].firstChild.classList.add('active'); + } + //VERY stupid design, but it _should_ work. + NSPlayer.switch_playlist(pl,this.playlists[cid].playlist); + NSPlayer.sort_playlist(NSPlayer.shuffle); + this.playlists[cid].playlist=NSPlayer.tracks; + this.present_playlist(cid); + this.selectedplist=pl; + }, + switch_track:function(id) + { + if(NSPlayer.plistname!=this.selectedplist) + this.switch_playlist(this.selectedplist); + NSPlayer.play(id); + }, + set_highlighted:function(pl,t) + { + if(pl!=this.selectedplist)return; + let cid=0; + for(;cid<this.playlists.length;++cid) + if(this.playlists[cid].plistname==pl)break; + const clist=this.playlists[cid].playlist; + for(let i=0;i<clist.length;++i) + if(clist[i].title==t) + this.playlist.childNodes[i].firstChild.classList.add('highlighted'); + else + this.playlist.childNodes[i].firstChild.classList.remove('highlighted'); + }, + shuffle_switch:function(shuffle) + { + for(let i=0;i<this.playlists.length;++i) + { + NSPlayer.sort_playlist(shuffle,this.playlists[i].playlist); + if(i==this.selectedplist)this.present_playlist(i); + } + NSPlayer.sort_playlist(shuffle); + }, + togglePlist:function() + { + NSUI.plistshown=!NSUI.plistshown; + NSUI.swplaylist.innerHTML=`[${NSUI.plistshown?'Hide':'Show'} Playlist]`; + NSUI.playlist.style.opacity=NSUI.plistshown?'1':'0'; + NSUI.playlist.style.pointerEvents=NSUI.plistshown?'auto':'none'; + }, + formatTime:function(t) + { + if(isNaN(t))return '-:--'; + let m=Math.floor(t/60),s=Math.round(t-Math.floor(t/60)*60); + if(s<10)return `${m}:0${s}`; + else if(s==60)return `${m+1}:00`; + else return `${m}:${s}`; + }, + bufferedUpdate:function() + { + let r=0; + for(let i=0;i<NSUI.audio.buffered.length;++i) + r=r<NSUI.audio.buffered.end(i)?NSUI.audio.buffered.end(i):r; + document.getElementById('cbuff').style.width=r/NSUI.audio.duration*100+'%'; + }, + timeUpdate:function() + { + document.getElementById('timenow').innerHTML=NSUI.formatTime(NSUI.audio.currentTime); + document.getElementById('timeleft').innerHTML=`-${NSUI.formatTime(NSUI.audio.duration-NSUI.audio.currentTime)}`; + document.getElementById('ctime').style.width=NSUI.audio.currentTime/NSUI.audio.duration*100+'%'; + NSUI.bufferedUpdate(); + } }; NSAudio={ - audioctx:null, - srcnode:null, - anlznode:null, - audioInit:function() - { - window.AudioContext=window.AudioContext||window.webkitAudioContext||window.mozAudioContext||window.msAudioContext; - if(!window.AudioContext)alert('This page requires Web Audio API to work...'); - this.audioctx=new AudioContext; - this.anlznode=this.audioctx.createAnalyser(); - this.anlznode.fftSize=2*NSVisualization.nbins; - NSUI.audio.volume=1; - }, - connect:function() - { - this.srcnode=this.audioctx.createMediaElementSource(NSUI.audio); - this.srcnode.connect(this.anlznode); - this.anlznode.connect(this.audioctx.destination); - }, + audioctx:null, + srcnode:null, + anlznode:null, + audioInit:function() + { + window.AudioContext=window.AudioContext||window.webkitAudioContext||window.mozAudioContext||window.msAudioContext; + if(!window.AudioContext)alert('This page requires Web Audio API to work...'); + this.audioctx=new AudioContext; + this.anlznode=this.audioctx.createAnalyser(); + this.anlznode.fftSize=2*NSVisualization.nbins; + NSUI.audio.volume=1; + }, + connect:function() + { + this.srcnode=this.audioctx.createMediaElementSource(NSUI.audio); + this.srcnode.connect(this.anlznode); + this.anlznode.connect(this.audioctx.destination); + }, }; NSVisualization={ - nbinsp:10, - nbins:Math.pow(2,10), - spectgrmw:1200, - spectrw:0.7, - spectrm:0.08125, - caps:[], - cctx:null, - spectgrmp:0, - _61spbins:29, - _61spfintv:Math.pow(1024,1./29), - _61spbinw:9, - _61spaccel:.35, - _61spmaxvel:6.17274873, - _61spgvel:.025, - _61spelas:1.33*.617274873, - _61spf:6.17274873, - _61spelasth:.017274873, - _61spcaps:new Float32Array(29), - _61spcapsv:new Float32Array(29), + nbinsp:10, + nbins:Math.pow(2,10), + spectgrmw:1200, + spectrw:0.7, + spectrm:0.08125, + caps:[], + cctx:null, + spectgrmp:0, + _61spbins:29, + _61spfintv:Math.pow(1024,1./29), + _61spbinw:9, + _61spaccel:.617274873, + _61spdamp:Math.pow(.617274873,6.17274873), + _61spvelcap:2*6.17274873, + _61spgvel:.025, + _61spelas:.617274873, + _61spf:6.17274873*6.17274873, + _61spelasth:.017274873, + _61spcaps:new Float32Array(29), + _61spcapsv:new Float32Array(29), _61spft:new Date(), - init:function() - { - window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame; - this.cctx=NSUI.canvas.getContext('2d'); - this.spectrw=NSUI.canvas.width/this.nbins; - this.spectrm=this.spectrw/10;this.spectrw*=0.9; - for(let i=0;i<this.nbins;++i)this.caps[i]=0; - }, - update_spectrum:function() - { - const cctx=this.cctx,canvas=NSUI.canvas; - cctx.clearRect(0,0,canvas.width,canvas.height); - try{ - let freqdomv=new Uint8Array(NSAudio.anlznode.frequencyBinCount); - NSAudio.anlznode.getByteFrequencyData(freqdomv); - for(let i=0;i<this.nbins;++i) - { - cctx.fillStyle='hsl('+i*360.0/this.nbins+',100%,50%)'; - cctx.fillRect(i*(this.spectrw+this.spectrm),canvas.height-(canvas.height*freqdomv[i]/255.),this.spectrw,canvas.height*freqdomv[i]/255.); - if(this.caps[i]<freqdomv[i])this.caps[i]=freqdomv[i];else if(this.caps[i]>0)--this.caps[i]; - cctx.fillStyle='hsl('+i*360.0/this.nbins+',100%,25%)'; - cctx.fillRect(i*(this.spectrw+this.spectrm),canvas.height-(canvas.height*this.caps[i]/255.)-1,this.spectrw,1); - } - }catch(e){ - for(let i=0;i<this.nbins;++i) - { - if(this.caps[i]>0)--this.caps[i]; - cctx.fillStyle='hsl('+i*360.0/this.nbins+',100%,25%)'; - cctx.fillRect(i*(this.spectrw+this.spectrm),canvas.height-this.caps[i]-1,this.spectrw,1); - } - } - }, - update_61_spectrum:function() - { - const cctx=this.cctx,canvas=NSUI.canvas; - cctx.clearRect(0,0,canvas.width,canvas.height); - try{ - let freqdomv=new Float32Array(NSAudio.anlznode.frequencyBinCount); - NSAudio.anlznode.getFloatFrequencyData(freqdomv); - let binl=Math.pow(2,(this._61spbinw-1)*this.nbinsp/(this._61spbins-1+this._61spbinw))-1; - let _61spfdomv=new Float32Array(this._61spbins); + init:function() + { + window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame; + this.cctx=NSUI.canvas.getContext('2d'); + this.spectrw=NSUI.canvas.width/this.nbins; + this.spectrm=this.spectrw/10;this.spectrw*=0.9; + for(let i=0;i<this.nbins;++i)this.caps[i]=0; + }, + update_spectrum:function() + { + const cctx=this.cctx,canvas=NSUI.canvas; + cctx.clearRect(0,0,canvas.width,canvas.height); + try{ + let freqdomv=new Uint8Array(NSAudio.anlznode.frequencyBinCount); + NSAudio.anlznode.getByteFrequencyData(freqdomv); + for(let i=0;i<this.nbins;++i) + { + cctx.fillStyle='hsl('+i*360.0/this.nbins+',100%,50%)'; + cctx.fillRect(i*(this.spectrw+this.spectrm),canvas.height-(canvas.height*freqdomv[i]/255.),this.spectrw,canvas.height*freqdomv[i]/255.); + if(this.caps[i]<freqdomv[i])this.caps[i]=freqdomv[i];else if(this.caps[i]>0)--this.caps[i]; + cctx.fillStyle='hsl('+i*360.0/this.nbins+',100%,25%)'; + cctx.fillRect(i*(this.spectrw+this.spectrm),canvas.height-(canvas.height*this.caps[i]/255.)-1,this.spectrw,1); + } + }catch(e){ + for(let i=0;i<this.nbins;++i) + { + if(this.caps[i]>0)--this.caps[i]; + cctx.fillStyle='hsl('+i*360.0/this.nbins+',100%,25%)'; + cctx.fillRect(i*(this.spectrw+this.spectrm),canvas.height-this.caps[i]-1,this.spectrw,1); + } + } + }, + update_61_spectrum:function() + { + const cctx=this.cctx,canvas=NSUI.canvas; + cctx.clearRect(0,0,canvas.width,canvas.height); + try{ + let freqdomv=new Float32Array(NSAudio.anlznode.frequencyBinCount); + NSAudio.anlznode.getFloatFrequencyData(freqdomv); + let binl=Math.pow(2,(this._61spbinw-1)*this.nbinsp/(this._61spbins-1+this._61spbinw))-1; + let _61spfdomv=new Float32Array(this._61spbins); const ft=new Date()-this._61spft; this._61spft=new Date(); const rft=ft/1000*24; - for(let i=0;i<this._61spbins;++i) - { - let binr=Math.pow(2,(i+this._61spbinw)*this.nbinsp/(this._61spbins-1+this._61spbinw))-1; - if(Math.floor(binr)<=Math.floor(binl))binr=binl+1; + for(let i=0;i<this._61spbins;++i) + { + let binr=Math.pow(2,(i+this._61spbinw)*this.nbinsp/(this._61spbins-1+this._61spbinw))-1; + if(Math.floor(binr)<=Math.floor(binl))binr=binl+1; let binli=Math.floor(binl); let binri=Math.floor(binr); const clamp=(x)=>Math.max(0,Math.min(1,x)); - _61spfdomv[i]=Math.pow(freqdomv. - slice(binli,binri+1). - reduce( + _61spfdomv[i]=Math.pow(freqdomv. + slice(binli,binri+1). + reduce( (s,c)=>s+ clamp( (c-NSAudio.anlznode.minDecibels) /(NSAudio.anlznode.maxDecibels-NSAudio.anlznode.minDecibels) )/(binri-binli+1) ,0),2);//iS tHiS dBv^2? - binl=binr; + binl=binr; if(ft>1000) { @@ -508,235 +509,238 @@ NSVisualization={ this._61spcapsv[i]=0; continue; } - let vel=this._61spgvel*this._61spcapsv[i]; - if(this._61spcaps[i]-vel*rft<=_61spfdomv[i]) - { - let elf=0; - if(vel>rft*this._61spelasth) - elf=this._61spcapsv[i]*this._61spelas; - this._61spcapsv[i]=(this._61spcaps[i]-vel*rft-_61spfdomv[i])*this._61spf-elf; - this._61spcaps[i]=_61spfdomv[i]; - } - else - { - if(this._61spcapsv[i]+rft*this._61spaccel<=this._61spmaxvel) - this._61spcapsv[i]+=rft*this._61spaccel; - else this._61spcapsv[i]=this._61spmaxvel; + let vel=this._61spgvel*this._61spcapsv[i]; + if(this._61spcaps[i]-vel*rft<=_61spfdomv[i]) + { + let elf=0; + if(vel>this._61spgvel*this._61spvelcap) + { + vel=this._61spgvel*this._61spvelcap;//cap this so that Newton could rest in peace. + this._61spcapsv[i]=this._61spvelcap; + } + if(vel>rft*this._61spelasth) + elf=this._61spcapsv[i]*this._61spelas; + this._61spcapsv[i]=(this._61spcaps[i]-vel*rft-_61spfdomv[i])*this._61spf-elf; + this._61spcaps[i]=_61spfdomv[i]; + } + else + { + this._61spcapsv[i]+=rft*(this._61spaccel-this._61spdamp*Math.sign(this._61spcapsv[i])*Math.pow(this._61spcapsv[i],2)); vel=this._61spgvel*this._61spcapsv[i]; - this._61spcaps[i]-=Math.min(rft*vel,this._61spcaps[i]); - } + this._61spcaps[i]-=Math.min(rft*vel,this._61spcaps[i]); + } - cctx.fillStyle=`rgba(70,130,180,${0.36+0.64*_61spfdomv[i]})`; - cctx.fillRect(i*(canvas.width/this._61spbins),canvas.height-(canvas.height*_61spfdomv[i]),canvas.width/this._61spbins*0.96,canvas.height*_61spfdomv[i]); + cctx.fillStyle=`rgba(70,130,180,${0.36+0.64*_61spfdomv[i]})`; + cctx.fillRect(i*(canvas.width/this._61spbins),canvas.height-(0.617274873*canvas.height*_61spfdomv[i]),canvas.width/this._61spbins*0.96,0.617274873*canvas.height*_61spfdomv[i]); - cctx.fillStyle='rgb(110,139,161)'; - cctx.fillRect(i*(canvas.width/this._61spbins),canvas.height-(canvas.height*this._61spcaps[i])-4,canvas.width/this._61spbins*0.96,4); - } - }catch(e){} - }, - update_scope:function() - { - const cctx=this.cctx,canvas=NSUI.canvas; - cctx.clearRect(0,0,canvas.width,canvas.height); - try{ - let timedomv=new Uint8Array(NSAudio.anlznode.frequencyBinCount); - NSAudio.anlznode.getByteTimeDomainData(timedomv); - cctx.lineWidth=window.devicePixelRatio; - cctx.strokeStyle='#000'; - if(athm)cctx.strokeStyle='#FFF'; - cctx.beginPath(); - for(let i=0,x=0;i<this.nbins;++i) - { - if(i==0)cctx.moveTo(x,timedomv[i]/128.*canvas.height/2); - else cctx.lineTo(x,timedomv[i]/128.*canvas.height/2); - x+=canvas.width*1./this.nbins; - } - cctx.stroke(); - }catch(e){ - cctx.beginPath(); - cctx.moveTo(0,canvas.height/2); - cctx.lineTo(canvas.width,canvas.height/2); - cctx.stroke(); - } - }, - update_spectrogram:function() - { - const cctx=this.cctx,canvas=NSUI.canvas; - try{ - let freqdomv=new Uint8Array(NSAudio.anlznode.frequencyBinCount); - NSAudio.anlznode.getByteFrequencyData(freqdomv); - cctx.clearRect(this.spectgrmp/this.spectgrmw*canvas.width,0,canvas.width/this.spectgrmw,canvas.height); - for(let i=0;i<this.nbins;++i) - { - let color=(athm?'rgba(255,255,255,':'rgba(0,0,0,')+freqdomv[i]/256.+')'; - cctx.fillStyle=color; - cctx.fillRect(this.spectgrmp/this.spectgrmw*canvas.width,(this.nbins-i)/this.nbins*canvas.height,canvas.width/this.spectgrmw,canvas.height/this.nbins); - } - if(!NSUI.audio.paused)++this.spectgrmp; - if(this.spectgrmp>=this.spectgrmw)this.spectgrmp=0; - }catch(e){ - this.spectgrmp=0; - cctx.clearRect(0,0,canvas.width,canvas.height); - } - }, - updateVisualization:function() - { - switch(NSUI.vissel.value) - { - case 'spectrum': - NSVisualization.update_spectrum(); - break; - case 'spspectrum': - NSVisualization.update_61_spectrum(); - break; - case 'scope': - NSVisualization.update_scope(); - break; - case 'spectrogram': - NSVisualization.update_spectrogram(); - break; - case 'inkfountain': - NSInk.update(); - break; - } - if(NSUI.vissel.value!='none') - requestAnimationFrame(NSVisualization.updateVisualization); - } + cctx.fillStyle='rgb(110,139,161)'; + cctx.fillRect(i*(canvas.width/this._61spbins),canvas.height-(0.617274873*canvas.height*this._61spcaps[i])-4,canvas.width/this._61spbins*0.96,4); + } + }catch(e){} + }, + update_scope:function() + { + const cctx=this.cctx,canvas=NSUI.canvas; + cctx.clearRect(0,0,canvas.width,canvas.height); + try{ + let timedomv=new Uint8Array(NSAudio.anlznode.frequencyBinCount); + NSAudio.anlznode.getByteTimeDomainData(timedomv); + cctx.lineWidth=window.devicePixelRatio; + cctx.strokeStyle='#000'; + if(athm)cctx.strokeStyle='#FFF'; + cctx.beginPath(); + for(let i=0,x=0;i<this.nbins;++i) + { + if(i==0)cctx.moveTo(x,timedomv[i]/128.*canvas.height/2); + else cctx.lineTo(x,timedomv[i]/128.*canvas.height/2); + x+=canvas.width*1./this.nbins; + } + cctx.stroke(); + }catch(e){ + cctx.beginPath(); + cctx.moveTo(0,canvas.height/2); + cctx.lineTo(canvas.width,canvas.height/2); + cctx.stroke(); + } + }, + update_spectrogram:function() + { + const cctx=this.cctx,canvas=NSUI.canvas; + try{ + let freqdomv=new Uint8Array(NSAudio.anlznode.frequencyBinCount); + NSAudio.anlznode.getByteFrequencyData(freqdomv); + cctx.clearRect(this.spectgrmp/this.spectgrmw*canvas.width,0,canvas.width/this.spectgrmw,canvas.height); + for(let i=0;i<this.nbins;++i) + { + let color=(athm?'rgba(255,255,255,':'rgba(0,0,0,')+freqdomv[i]/256.+')'; + cctx.fillStyle=color; + cctx.fillRect(this.spectgrmp/this.spectgrmw*canvas.width,(this.nbins-i)/this.nbins*canvas.height,canvas.width/this.spectgrmw,canvas.height/this.nbins); + } + if(!NSUI.audio.paused)++this.spectgrmp; + if(this.spectgrmp>=this.spectgrmw)this.spectgrmp=0; + }catch(e){ + this.spectgrmp=0; + cctx.clearRect(0,0,canvas.width,canvas.height); + } + }, + updateVisualization:function() + { + switch(NSUI.vissel.value) + { + case 'spectrum': + NSVisualization.update_spectrum(); + break; + case 'spspectrum': + NSVisualization.update_61_spectrum(); + break; + case 'scope': + NSVisualization.update_scope(); + break; + case 'spectrogram': + NSVisualization.update_spectrogram(); + break; + case 'inkfountain': + NSInk.update(); + break; + } + if(NSUI.vissel.value!='none') + requestAnimationFrame(NSVisualization.updateVisualization); + } }; NSInk={ - ic1:['#FF3333','#FF8800','#FFFF00','#CCFF00','#33CCFF','#0000FF','#9966FF'], - ic2:['rgba(204,51,51,0.6)','rgba(187,85,0,0.6)','rgba(255,204,0,0.6)','rgba(153,204,0,0.6)','rgba(51,153,255,0.6)','rgba(0,0,102,0.6)','rgba(153,51,204,0.6)'], - inks:[], - inkimg:[], - ifcaps:[], - nbinsif:128, - inkPrepare:function() - { - for(let i=0;i<7;++i) - { - this.inkimg[i]=document.createElement('canvas'); - this.inkimg[i].width=this.inkimg[i].height=10*window.devicePixelRatio; - const cctx=this.inkimg[i].getContext('2d'); - cctx.fillStyle=this.ic1[i]; - cctx.beginPath(); - cctx.arc(5*window.devicePixelRatio,5*window.devicePixelRatio,3*window.devicePixelRatio,0,2*Math.PI); - cctx.fill(); - cctx.fillStyle=this.ic2[i]; - cctx.beginPath(); - cctx.arc(5*window.devicePixelRatio,5*window.devicePixelRatio,5*window.devicePixelRatio,0,2*Math.PI); - cctx.fill(); - } - for(let i=0;i<NSVisualization.nbins;++i)this.ifcaps[i]=0; - this.nbinsif=NSVisualization.nbins/8; - }, - createInk:function(_vx,_vy,_c1,_c2) - { - let f=false; - for(let i=0;i<this.inks.length;++i) - { - if(!this.inks[i].active) - {this.inks[i]=new Ink(_vx,_vy,_c1,_c2);f=true;break;} - } - if(!f&&this.inks.length<512)this.inks.push(new Ink(_vx,_vy,_c1,_c2)); - }, - frms:0,lastfpsupd:null,fps:0, - update:function() - { - const canvas=NSUI.canvas; - const cctx=canvas.getContext('2d'),ts=Date.now(); - cctx.clearRect(0,0,canvas.width,canvas.height); - ++this.frms;if(Date.now()-this.lastfpsupd>500) - { - if(this.lastfpsupd) - this.fps=1000*this.frms/(Date.now()-this.lastfpsupd),this.frms=0; - this.lastfpsupd=Date.now(); - } - try{ - let freqarr=new Uint8Array(NSAudio.anlznode.frequencyBinCount); - NSAudio.anlznode.getByteFrequencyData(freqarr); - for(let i=0;i<this.nbinsif;++i) - { - let r=0; - for(let j=0;j<8;++j)r+=freqarr[i*8+j]; - r/=8.; - if(r-this.ifcaps[i]>7) - { - let color=Math.floor(i*8.0/this.nbinsif),rad=Math.random()*Math.PI*2; - let ndrops=(128-i)/128.*3+1;ndrops*=(r/128.);ndrops=Math.floor(ndrops);if(ndrops<1)ndrops=1; - for(let k=0;k<ndrops;++k) - { - this.createInk(((r-this.ifcaps[i]-7)/32*24+12)*Math.cos(rad),((r-this.ifcaps[i]-7)/32*24+12)*Math.sin(rad),color); - rad=Math.random()*Math.PI*2; - } - } - if(r>this.ifcaps[i])this.ifcaps[i]=r;else this.ifcaps[i]-=2; - } - }catch(e){ - cctx.clearRect(0,0,canvas.width,canvas.height); - } - const tu=Date.now(); - let aa=0; - for(let i=0;i<this.inks.length;++i) - if(this.inks[i].active){this.inks[i].update();this.inks[i].draw(cctx);++aa;} - cctx.fillStyle='#000'; - cctx.font="1em 'CMU Typewriter Text w', 'CMU Typewriter Text', 'TeX Gyre Cursor', 'FreeMono', 'Courier New', Courier, monospace"; - cctx.fillText('Active droplets '+aa+', '+this.fps.toFixed(2)+' FPS',0,10); - cctx.fillText('Update time '+(tu-ts)+'ms, render time '+(Date.now()-tu)+'ms',0,24); - } + ic1:['#FF3333','#FF8800','#FFFF00','#CCFF00','#33CCFF','#0000FF','#9966FF'], + ic2:['rgba(204,51,51,0.6)','rgba(187,85,0,0.6)','rgba(255,204,0,0.6)','rgba(153,204,0,0.6)','rgba(51,153,255,0.6)','rgba(0,0,102,0.6)','rgba(153,51,204,0.6)'], + inks:[], + inkimg:[], + ifcaps:[], + nbinsif:128, + inkPrepare:function() + { + for(let i=0;i<7;++i) + { + this.inkimg[i]=document.createElement('canvas'); + this.inkimg[i].width=this.inkimg[i].height=10*window.devicePixelRatio; + const cctx=this.inkimg[i].getContext('2d'); + cctx.fillStyle=this.ic1[i]; + cctx.beginPath(); + cctx.arc(5*window.devicePixelRatio,5*window.devicePixelRatio,3*window.devicePixelRatio,0,2*Math.PI); + cctx.fill(); + cctx.fillStyle=this.ic2[i]; + cctx.beginPath(); + cctx.arc(5*window.devicePixelRatio,5*window.devicePixelRatio,5*window.devicePixelRatio,0,2*Math.PI); + cctx.fill(); + } + for(let i=0;i<NSVisualization.nbins;++i)this.ifcaps[i]=0; + this.nbinsif=NSVisualization.nbins/8; + }, + createInk:function(_vx,_vy,_c1,_c2) + { + let f=false; + for(let i=0;i<this.inks.length;++i) + { + if(!this.inks[i].active) + {this.inks[i]=new Ink(_vx,_vy,_c1,_c2);f=true;break;} + } + if(!f&&this.inks.length<512)this.inks.push(new Ink(_vx,_vy,_c1,_c2)); + }, + frms:0,lastfpsupd:null,fps:0, + update:function() + { + const canvas=NSUI.canvas; + const cctx=canvas.getContext('2d'),ts=Date.now(); + cctx.clearRect(0,0,canvas.width,canvas.height); + ++this.frms;if(Date.now()-this.lastfpsupd>500) + { + if(this.lastfpsupd) + this.fps=1000*this.frms/(Date.now()-this.lastfpsupd),this.frms=0; + this.lastfpsupd=Date.now(); + } + try{ + let freqarr=new Uint8Array(NSAudio.anlznode.frequencyBinCount); + NSAudio.anlznode.getByteFrequencyData(freqarr); + for(let i=0;i<this.nbinsif;++i) + { + let r=0; + for(let j=0;j<8;++j)r+=freqarr[i*8+j]; + r/=8.; + if(r-this.ifcaps[i]>7) + { + let color=Math.floor(i*8.0/this.nbinsif),rad=Math.random()*Math.PI*2; + let ndrops=(128-i)/128.*3+1;ndrops*=(r/128.);ndrops=Math.floor(ndrops);if(ndrops<1)ndrops=1; + for(let k=0;k<ndrops;++k) + { + this.createInk(((r-this.ifcaps[i]-7)/32*24+12)*Math.cos(rad),((r-this.ifcaps[i]-7)/32*24+12)*Math.sin(rad),color); + rad=Math.random()*Math.PI*2; + } + } + if(r>this.ifcaps[i])this.ifcaps[i]=r;else this.ifcaps[i]-=2; + } + }catch(e){ + cctx.clearRect(0,0,canvas.width,canvas.height); + } + const tu=Date.now(); + let aa=0; + for(let i=0;i<this.inks.length;++i) + if(this.inks[i].active){this.inks[i].update();this.inks[i].draw(cctx);++aa;} + cctx.fillStyle='#000'; + cctx.font="1em 'CMU Typewriter Text w', 'CMU Typewriter Text', 'TeX Gyre Cursor', 'FreeMono', 'Courier New', Courier, monospace"; + cctx.fillText('Active droplets '+aa+', '+this.fps.toFixed(2)+' FPS',0,10); + cctx.fillText('Update time '+(tu-ts)+'ms, render time '+(Date.now()-tu)+'ms',0,24); + } }; function init() { - if(!window.devicePixelRatio)window.devicePixelRatio=1; - NSUI.setup_ui(); - NSUI.load_playlists() - .then(()=>{ - sh.elem('overlaytext').innerHTML+="Done!<br>Click or tap anywhere to start." - sh.elem('overlay').onclick=function(){ - NSAudio.audioInit();NSAudio.connect(); - if(window.location.hash.length) - { - let p=window.location.hash.substr(1).split('/'); - for(let i=0;i<p.length;++i)p[i]=decodeURIComponent(p[i]); - NSUI.switch_playlist(p[0],true); - let id=0; - for(;id<NSPlayer.tracks.length&&NSPlayer.tracks[id].title!=p[1];++id); - if(id<NSPlayer.tracks.length)NSUI.switch_track(id); - } - sh.elem('overlay').style.display='none'; - } - }); - NSVisualization.init();NSInk.inkPrepare(); - NSUI.audio.ontimeupdate=NSUI.timeUpdate; - NSUI.audio.onended=NSPlayer.next.bind(NSPlayer); - NSUI.audio.onplay=NSUI.audio.ondurationchange=function(){ - if(NSUI.audio.audioTracks.length==2) - sh.elem('mt').style.display='inline'; - else - sh.elem('mt').style.display='none'; - }; - switch(sh.getcookie('playershuffle')) - { - case '1':NSPlayer.shuffle=1;break; - default: - case '0':NSPlayer.shuffle=0;break; - } - switch(sh.getcookie('playerrepeat')) - { - case '1': - NSPlayer.repeat=1; - NSUI.audio.loop=true; - break; - default: - case '0': - NSPlayer.repeat=0; - NSUI.audio.loop=false; - break; - } - NSUI.ishuffle.style.backgroundPosition=`${NSPlayer.shuffle?NSUI.bshonrect:NSUI.bsoffrect}`; - NSUI.irepeat.style.backgroundPosition=`${NSPlayer.repeat?NSUI.bronerect:NSUI.brallrect}`; - if(sh.getcookie('playervisualization').length!==0) - NSUI.vissel.value=sh.getcookie('playervisualization'); - requestAnimationFrame(NSVisualization.updateVisualization); + if(!window.devicePixelRatio)window.devicePixelRatio=1; + NSUI.setup_ui(); + NSUI.load_playlists() + .then(()=>{ + sh.elem('overlaytext').innerHTML+="Done!<br>Click or tap anywhere to start." + sh.elem('overlay').onclick=function(){ + NSAudio.audioInit();NSAudio.connect(); + if(window.location.hash.length) + { + let p=window.location.hash.substr(1).split('/'); + for(let i=0;i<p.length;++i)p[i]=decodeURIComponent(p[i]); + NSUI.switch_playlist(p[0],true); + let id=0; + for(;id<NSPlayer.tracks.length&&NSPlayer.tracks[id].title!=p[1];++id); + if(id<NSPlayer.tracks.length)NSUI.switch_track(id); + } + sh.elem('overlay').style.display='none'; + } + }); + NSVisualization.init();NSInk.inkPrepare(); + NSUI.audio.ontimeupdate=NSUI.timeUpdate; + NSUI.audio.onended=NSPlayer.next.bind(NSPlayer); + NSUI.audio.onplay=NSUI.audio.ondurationchange=function(){ + if(NSUI.audio.audioTracks.length==2) + sh.elem('mt').style.display='inline'; + else + sh.elem('mt').style.display='none'; + }; + switch(sh.getcookie('playershuffle')) + { + case '1':NSPlayer.shuffle=1;break; + default: + case '0':NSPlayer.shuffle=0;break; + } + switch(sh.getcookie('playerrepeat')) + { + case '1': + NSPlayer.repeat=1; + NSUI.audio.loop=true; + break; + default: + case '0': + NSPlayer.repeat=0; + NSUI.audio.loop=false; + break; + } + NSUI.ishuffle.style.backgroundPosition=`${NSPlayer.shuffle?NSUI.bshonrect:NSUI.bsoffrect}`; + NSUI.irepeat.style.backgroundPosition=`${NSPlayer.repeat?NSUI.bronerect:NSUI.brallrect}`; + if(sh.getcookie('playervisualization').length!==0) + NSUI.vissel.value=sh.getcookie('playervisualization'); + requestAnimationFrame(NSVisualization.updateVisualization); } |