diff --git a/404.html b/404.html index bb28642f..358a658f 100644 --- a/404.html +++ b/404.html @@ -43,7 +43,7 @@
Web synths

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home
With ❤️ by Chromatone and Playtronica
- + \ No newline at end of file diff --git a/README.html b/README.html index b995a81b..74da89b4 100644 --- a/README.html +++ b/README.html @@ -46,7 +46,7 @@
Web synths

Appearance

On this page

WEB SYNTHS ​

TO DO ​

  • SEO proof texts
  • Logos
  • save state
  • favourites
  • ranks + reviews

Last updated:

With ❤️ by Chromatone and Playtronica
- + \ No newline at end of file diff --git a/assets/index.md.41cab868.js b/assets/index.md.41cab868.js deleted file mode 100644 index f50f6ea9..00000000 --- a/assets/index.md.41cab868.js +++ /dev/null @@ -1 +0,0 @@ -import{u as at,a as ut,b as pt,c as gt,d as mt}from"./chunks/theme.10ba8259.js";import{r as x,b as ot,w as rt,f as ht,h as I,a2 as k,i as g,j as b,u,a0 as bt,I as yt,B as h,p as L,l as z,x as M,M as C,v as w,C as xt,D as vt,_ as wt,q as W,J as _t,K as Tt,S as St,a3 as R,a4 as It,m as T,k as A,a5 as Y,a6 as X,Z as q,T as $t}from"./chunks/framework.7c22cbc0.js";const O=x(!1),U=x(!1),Ct=x(!1),B=at("storedEmail",""),V=at("storedName",""),Z=x(!1),$=x(""),H=x(""),kt=ot(()=>dt($.value)),J=x(!1);function dt(t){return/^[^@]+@\w+(\.\w+)+\w$/.test(t)}function Ot(){B.value="",V.value="",Z.value=!1,O.value=!1}function K(){return J.value||(rt(O,t=>{t&&(U.value=!1)}),ht(()=>{B.value&&(O.value=!0)}),J.value=!0),{isAccessGranted:O,isValidEmail:kt,email:$,name:H,grantAccess:Lt,isSent:Z,isFormOpen:U,checkAvailability:Ct,storedEmail:B,storedName:V,resetEmail:Ot}}const Et="https://db.chromatone.center/flows/trigger/f36a3461-c476-4ce5-88c9-eba2216083b0";async function Lt(){if(!(!$.value&&!dt($.value))&&(O.value=!0,!Z.value)){Z.value=!0;try{const t={email:$.value,name:H.value.slice(0,30)};B.value=$.value,V.value=H.value;const e=await fetch(Et,{method:"POST",mode:"cors",cache:"no-cache",credentials:"same-origin",headers:{"Content-Type":"application/json"},redirect:"follow",referrerPolicy:"no-referrer",body:JSON.stringify(t)});console.log(e==null?void 0:e.json())}catch(t){console.error(t)}}}const Dt=JSON.parse('[{"id":1,"status":"published","sort":1,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.730Z","title":"Dotpiano","url":"https://dotpiano.com/","content":null,"cover":"fd81d5c3-4cb6-41eb-9689-d5f7aba2b8a6","tags":null},{"id":3,"status":"published","sort":3,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.748Z","title":"TouchME by Chromatone","url":"https://touchme.chromatone.center/","content":null,"cover":"6e97f4ab-c2f7-4e90-9c26-7518dbfddb3a","tags":null},{"id":14,"status":"published","sort":4,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.765Z","title":"Juno-106","url":"http://juno-106.js.org/","content":null,"cover":"d4fad441-c1a0-4ccc-9c0d-d8bfb79f9094","tags":null},{"id":26,"status":"published","sort":5,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.816Z","title":"Learning synths with Ableton","url":"https://learningsynths.ableton.com/","content":null,"cover":"f5c81f00-fc0e-40ad-96ce-a1834709253a","tags":null},{"id":30,"status":"published","sort":5,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.800Z","title":"DX7 Synth","url":"https://mmontag.github.io/dx7-synth-js/","content":null,"cover":"01eacfd8-892d-41de-b928-50b686a87400","tags":null},{"id":32,"status":"published","sort":5,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.784Z","title":"Sampler synth","url":"https://play.playtronica.com/","content":null,"cover":"749cb332-eb5e-40c6-bb36-fb87bb25a834","tags":null},{"id":10,"status":"published","sort":6,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.837Z","title":"Websynths","url":"http://websynths.com/","content":null,"cover":"072cf912-9966-4d3f-9823-36e75fb8ada9","tags":null},{"id":19,"status":"published","sort":6,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.859Z","title":"Theremin","url":"https://www.femurdesign.com/theremin/","content":null,"cover":"f4ca5ef9-132a-4e56-80fb-21bd0fd0b3f6","tags":null},{"id":29,"status":"published","sort":6,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.891Z","title":"Elementary synth","url":"https://chromatone.center/practice/synth/elementary/","content":null,"cover":"14f5d908-fba2-451f-8bec-a922cc5672c7","tags":null},{"id":22,"status":"published","sort":7,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.875Z","title":"Disco-computer","url":"http://www.disco-computer.com/synthesizer/synth.html","content":null,"cover":"1ac14701-0530-4ca6-b516-45d5f9523819","tags":null},{"id":31,"status":"published","sort":12,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.906Z","title":"Video Sampler","url":"https://seeing-sound.netlify.app/","content":null,"cover":"a4e5d9b7-1b64-4c31-aed4-467e2c6cba32","tags":null},{"id":27,"status":"published","sort":14,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.918Z","title":"Viktor NV-1","url":"http://nicroto.github.io/viktor/","content":null,"cover":"1c104eeb-dc14-4d3b-bb8e-14accb2184c3","tags":null},{"id":17,"status":"published","sort":30,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.930Z","title":"Sound Trap","url":"https://www.soundtrap.com/","content":null,"cover":"328c8c51-e7d4-48bd-9c3d-6dea5184cad5","tags":null},{"id":6,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.181Z","title":"MIDI–driven Web Audio","url":"https://webaudiodemos.appspot.com/midi-synth/index.html","content":null,"cover":"f268f0dc-b091-4799-885b-0a5eecfdcbec","tags":null},{"id":8,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.088Z","title":"Meet the Heisenberg","url":"https://www.audiotool.com/product/device/heisenberg/","content":null,"cover":"88c6fe9d-033c-4aac-a946-278e729e5f05","tags":null},{"id":9,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.141Z","title":"Cardboard Synth","url":"https://www.gsn-lib.org/apps/cardboardsynth/index.html","content":null,"cover":"3406a3fa-5e4d-4efc-a5ac-c6c8ee3abf72","tags":null},{"id":11,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.126Z","title":"Tanguy synth","url":"http://tanguysynth.com/","content":null,"cover":"16a499c4-661f-48b5-b308-dd7ea77f335d","tags":null},{"id":12,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.109Z","title":"MOD synth","url":"http://mod-synth.io/","content":null,"cover":"dd13c72f-d1ee-4197-b8a2-f24c162d5858","tags":null},{"id":13,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.076Z","title":"OLIF SY1K","url":"http://perso.numericable.fr/olivier.friker/synth/O3-synth%20V1.3.html","content":null,"cover":"44234157-4872-4e35-baec-a7d073a7258d","tags":null},{"id":15,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.059Z","title":"Note Sculptor","url":"http://www.noisesculptor.com/","content":null,"cover":"3b9d921b-79da-4923-9cd2-bbc826561a93","tags":null},{"id":16,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.159Z","title":"WebAudioSynth V2","url":"http://aikelab.net/websynthv2/","content":null,"cover":"7980d0af-e534-4383-a36c-0b116a06499e","tags":null},{"id":18,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.944Z","title":"Samplestich","url":"http://samplestitch.com.s3-website-us-east-1.amazonaws.com/","content":null,"cover":"0f272d97-7882-4797-9890-97c3b75149a4","tags":null},{"id":20,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.032Z","title":"Omni","url":"https://femurdesign.com/omni/","content":null,"cover":"82c94f42-0449-45ea-924d-7365ba51af20","tags":null},{"id":21,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.016Z","title":"Web Modular","url":"https://www.g200kg.com/docs/webmodular/","content":null,"cover":"5bb158d2-cfcc-46d9-acd5-6cf3312d7678","tags":null},{"id":23,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.000Z","title":"Online sequencer","url":"https://onlinesequencer.net/369477","content":null,"cover":"efdc67a4-4cfc-4a4b-a704-1b939fbe7fc4","tags":null},{"id":24,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.987Z","title":"PixelSynth","url":"https://ojack.github.io/PIXELSYNTH/","content":null,"cover":"59ec0d0b-6bcf-4c50-8d76-5fe624105c0c","tags":null},{"id":25,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.970Z","title":"Acid Machine 2","url":"http://errozero.co.uk/acid-machine/","content":null,"cover":"380cdb0d-4a68-44a7-b24c-2b655f26ebcd","tags":null},{"id":28,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.958Z","title":"WebSID Commodore 64","url":"http://www.igorski.nl/experiment/websid","content":null,"cover":"e39565a0-15fa-4c3a-9bc7-aa5a613dd19f","tags":null}]'),Nt=I({inject:["manager"],props:{index:{type:Number,required:!0},disabled:{type:Boolean,default:!1}},data(){return{}},watch:{index(t){this.$el&&this.$el.sortableInfo&&(this.$el.sortableInfo.index=t)},disabled(t){t?this.removeDraggable():this.setDraggable(this.index)}},mounted(){const{disabled:t,index:e}=this.$props;t||this.setDraggable(e)},beforeUnmount(){this.disabled||this.removeDraggable()},methods:{setDraggable(t){const e=this.$el;e.sortableInfo={index:t,manager:this.manager},this.ref={node:e},this.manager.add(this.ref)},removeDraggable(){this.manager.remove(this.ref)}}});class Mt{constructor(){this.refs=[],this.active=null}add(e){this.refs||(this.refs=[]),this.refs.push(e)}remove(e){const s=this.getIndex(e);s!==-1&&this.refs.splice(s,1)}isActive(){return!!this.active}getActive(){return this.refs.find(({node:e})=>{var s,i;return((s=e==null?void 0:e.sortableInfo)===null||s===void 0?void 0:s.index)==((i=this===null||this===void 0?void 0:this.active)===null||i===void 0?void 0:i.index)})||null}getIndex(e){return this.refs.indexOf(e)}getRefs(){return this.refs}getOrderedRefs(){return this.refs.sort((e,s)=>e.node.sortableInfo.index-s.node.sortableInfo.index)}}const E=t=>t.touches!=null;function j(t,e){return!!t&&Object.prototype.hasOwnProperty.call(t,e)}function Wt(t,e,s){const i=t.slice(0);if(s>=i.length){let n=s-i.length;for(;n--+1;)i.push(void 0)}return i.splice(s,0,i.splice(e,1)[0]),i}function At(t,e){const s=t.slice(0);return e>=s.length||s.splice(e,1),s}function Bt(t,e,s){const i=t.slice(0);return e===i.length?i.push(s):i.splice(e,0,s),i}const _={start:["touchstart","mousedown"],move:["touchmove","mousemove"],end:["touchend","mouseup"],cancel:["touchcancel","keyup"]};function Q(t,e){for(;t;){if(e(t))return t;t=t.parentNode}}function tt(t,e,s){return se?e:s}function D(t){return t.substr(-2)==="px"?parseFloat(t):0}function et(t){const e=window.getComputedStyle(t);return{top:D(e.marginTop),right:D(e.marginRight),bottom:D(e.marginBottom),left:D(e.marginLeft)}}function N(t,e="page"){const s=`${e}X`,i=`${e}Y`;return{x:E(t)?t.touches[0][s]:t[s],y:E(t)?t.touches[0][i]:t[i]}}function st(t){const e=[t];for(;t;t=t.offsetParent)e.unshift(t);return e}function Zt(t,e){const s=st(t),i=st(e);if(s[0]!=i[0])throw"No common ancestor!";for(let n=0;n{n.type!=="file"&&e[a]&&(n.value=e[a].value)}),s}function Pt(t,e,s){if(typeof t=="string"&&(t=+t),Array.isArray(t)||(t=[t,t]),t.length!==2)throw new Error(`lockOffset prop of SortableContainer should be a single value or an array of exactly two values. Given ${t}`);const[i,n]=t;return[nt(i,e,s),nt(n,e,s)]}function nt(t,e,s){let i=t,n=t,a="px";if(typeof t=="string"){const l=/^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(t);if(l===null)throw new Error(`lockOffset value should be a number or a string of a number followed by "px" or "%". Given ${t}`);i=n=parseFloat(t),a=l[1]}if(!isFinite(i)||!isFinite(n))throw new Error(`lockOffset value should be a finite. Given ${t}`);return a==="%"&&(i=i*e/100,n=n*s/100),{x:i,y:n}}function lt(t=[]){for(let e=0,s=t.length;e[]},lockAxis:{type:String,default:""},helperClass:{type:String,default:""},contentWindow:{type:Object,default:null},shouldCancelStart:{type:Function,default:t=>["input","textarea","select","option","button"].indexOf(t.target.tagName.toLowerCase())!==-1},getHelperDimensions:{type:Function,default:({node:t})=>({width:t.offsetWidth,height:t.offsetHeight})}},emits:["sort-start","sort-move","sort-end","sort-cancel","sort-insert","sort-remove","update:list"],data(){let t=!1;return this.group&&this.SlicksortHub&&(t=!0),{sorting:!1,hub:t?this.SlicksortHub:null,manager:new Mt}},mounted(){this.hub&&(this.id=this.hub.getId()),this.container=this.$el,this.document=this.container.ownerDocument||document,this._window=this.contentWindow||window,this.scrollContainer=this.useWindowAsScrollContainer?{scrollLeft:0,scrollTop:0}:this.container,this.events={start:this.handleStart,move:this.handleMove,end:this.handleEnd};for(const t in this.events)j(this.events,t)&&_[t].forEach(e=>this.container.addEventListener(e,this.events[t]));this.hub&&this.hub.addContainer(this)},beforeUnmount(){for(const t in this.events)j(this.events,t)&&_[t].forEach(e=>this.container.removeEventListener(e,this.events[t]));this.hub&&this.hub.removeContainer(this),this.dragendTimer&&clearTimeout(this.dragendTimer),this.cancelTimer&&clearTimeout(this.cancelTimer),this.pressTimer&&clearTimeout(this.pressTimer),this.autoscrollInterval&&clearInterval(this.autoscrollInterval)},methods:{handleStart(t){const{distance:e,shouldCancelStart:s}=this.$props;if(!E(t)&&t.button===2||s(t))return!1;this._touched=!0,this._pos=N(t);const i=t.target,n=Q(i,a=>a.sortableInfo!=null);if(n&&n.sortableInfo&&this.nodeIsChild(n)&&!this.sorting){const{useDragHandle:a}=this.$props,{index:l}=n.sortableInfo;if(a&&!Q(i,c=>c.sortableHandle!=null))return;this.manager.active={index:l},i.tagName.toLowerCase()==="a"&&t.preventDefault(),e||(this.pressDelay===0?this.handlePress(t):this.pressTimer=G(()=>this.handlePress(t),this.pressDelay))}},nodeIsChild(t){return t.sortableInfo.manager===this.manager},handleMove(t){const{distance:e,pressThreshold:s}=this.$props;if(!this.sorting&&this._touched){const i=N(t);this._delta={x:this._pos.x-i.x,y:this._pos.y-i.y};const n=Math.abs(this._delta.x)+Math.abs(this._delta.y);!e&&(!s||s&&n>=s)?(this.cancelTimer&&clearTimeout(this.cancelTimer),this.cancelTimer=G(this.cancel,0)):e&&n>=e&&this.manager.isActive()&&this.handlePress(t)}},handleEnd(){if(!this._touched)return;const{distance:t}=this.$props;this._touched=!1,t||this.cancel()},cancel(){this.sorting||(this.pressTimer&&clearTimeout(this.pressTimer),this.manager.active=null,this.hub&&this.hub.cancel())},handleSortCancel(t){(E(t)||t.key===this.cancelKey)&&(this.newIndex=this.index,this.canceling=!0,this.translate={x:0,y:0},this.animateNodes(),this.handleSortEnd(t))},handlePress(t){t.stopPropagation();const e=this.manager.getActive();if(e){const{getHelperDimensions:s,helperClass:i,hideSortableGhost:n,appendTo:a}=this.$props,{node:l}=e,{index:c}=l.sortableInfo,f=et(l),o=this.container.getBoundingClientRect(),m=s({index:c,node:l});this.node=l,this.margin=f,this.width=m.width,this.height=m.height,this.marginOffset={x:this.margin.left+this.margin.right,y:Math.max(this.margin.top,this.margin.bottom)},this.boundingClientRect=l.getBoundingClientRect(),this.containerBoundingRect=o,this.index=c,this.newIndex=c;const y=it(l);this.helper=this.document.querySelector(a).appendChild(y),this.helper.style.position="fixed",this.helper.style.top=`${this.boundingClientRect.top-f.top}px`,this.helper.style.left=`${this.boundingClientRect.left-f.left}px`,this.helper.style.width=`${this.width}px`,this.helper.style.height=`${this.height}px`,this.helper.style.boxSizing="border-box",this.helper.style.pointerEvents="none",n&&(this.sortableGhost=l,l.style.visibility="hidden",l.style.opacity="0"),this.hub&&(this.hub.sortStart(this),this.hub.helper=this.helper,this.hub.ghost=this.sortableGhost),this.intializeOffsets(t,this.boundingClientRect),this.offsetEdge=S(l,this.container),i&&this.helper.classList.add(...i.split(" ")),this.listenerNode=E(t)?l:this._window,_.move.forEach(r=>this.listenerNode.addEventListener(r,this.handleSortMove)),_.end.forEach(r=>this.listenerNode.addEventListener(r,this.handleSortEnd)),_.cancel.forEach(r=>this.listenerNode.addEventListener(r,this.handleSortCancel)),this.sorting=!0,this.$emit("sort-start",{event:t,node:l,index:c})}},handleSortMove(t){if(t.preventDefault(),this.updatePosition(t),this.hub){const e=this.list[this.index];this.hub.handleSortMove(t,e)}(!this.hub||this.hub.isDest(this))&&(this.animateNodes(),this.autoscroll()),this.$emit("sort-move",{event:t})},handleDropOut(){const t=this.list[this.index],e=At(this.list,this.index);return this.$emit("sort-remove",{oldIndex:this.index}),this.$emit("update:list",e),t},handleDropIn(t){const e=Bt(this.list,this.newIndex,t);this.$emit("sort-insert",{newIndex:this.newIndex,value:t}),this.$emit("update:list",e),this.handleDragEnd()},handleDragOut(){this.autoscrollInterval&&(clearInterval(this.autoscrollInterval),this.autoscrollInterval=null),this.hub.isSource(this)?(this.translate={x:1e4,y:1e4},this.animateNodes()):(this.manager.getRefs().forEach(t=>{t.node.style.transform=""}),this.dragendTimer=G(this.handleDragEnd,this.transitionDuration||0))},handleDragEnd(){this.autoscrollInterval&&(clearInterval(this.autoscrollInterval),this.autoscrollInterval=null),lt(this.manager.getRefs()),this.sortableGhost&&(this.sortableGhost.remove(),this.sortableGhost=null),this.dragendTimer&&(clearTimeout(this.dragendTimer),this.dragendTimer=null),this.manager.active=null,this._touched=!1,this.sorting=!1},intializeOffsets(t,e){const{useWindowAsScrollContainer:s,containerBoundingRect:i,_window:n}=this;this.marginOffset={x:this.margin.left+this.margin.right,y:Math.max(this.margin.top,this.margin.bottom)},this._axis={x:this.axis.indexOf("x")>=0,y:this.axis.indexOf("y")>=0},this.initialOffset=N(t),this.initialScroll={top:this.scrollContainer.scrollTop,left:this.scrollContainer.scrollLeft},this.initialWindowScroll={top:window.pageYOffset,left:window.pageXOffset},this.translate={x:0,y:0},this.minTranslate={},this.maxTranslate={},this._axis.x&&(this.minTranslate.x=(s?0:i.left)-e.left-this.width/2,this.maxTranslate.x=(s?n.innerWidth:i.left+i.width)-e.left-this.width/2),this._axis.y&&(this.minTranslate.y=(s?0:i.top)-e.top-this.height/2,this.maxTranslate.y=(s?n.innerHeight:i.top+i.height)-e.top-this.height/2)},handleDragIn(t,e,s){if(this.hub.isSource(this))return;this.dragendTimer&&(this.handleDragEnd(),clearTimeout(this.dragendTimer),this.dragendTimer=null);const i=this.manager.getRefs();this.index=i.length,this.manager.active={index:this.index};const n=this.container.getBoundingClientRect(),a=s.getBoundingClientRect();this.containerBoundingRect=n,this.sortableGhost=it(e),this.container.appendChild(this.sortableGhost);const l=this.sortableGhost.getBoundingClientRect();this.boundingClientRect=l,this.margin=et(this.sortableGhost),this.width=l.width,this.height=l.height,this.offsetEdge=S(this.sortableGhost,this.container),this.intializeOffsets(t,l),this.initialOffset.x+=l.x-a.x,this.initialOffset.y+=l.y-a.y,this.sorting=!0},handleSortEnd(t){this.listenerNode&&(_.move.forEach(i=>this.listenerNode.removeEventListener(i,this.handleSortMove)),_.end.forEach(i=>this.listenerNode.removeEventListener(i,this.handleSortEnd)),_.cancel.forEach(i=>this.listenerNode.removeEventListener(i,this.handleSortCancel)));const e=this.manager.getRefs();this.helper&&this.helperClass&&this.helper.classList.remove(...this.helperClass.split(" ")),this.autoscrollInterval&&clearInterval(this.autoscrollInterval),this.autoscrollInterval=null;const s=()=>{this.helper&&(this.helper.remove(),this.helper=null),this.hideSortableGhost&&this.sortableGhost&&(this.sortableGhost.style.visibility="",this.sortableGhost.style.opacity=""),lt(e),this.hub&&!this.hub.isDest(this)?this.canceling?this.hub.cancel():this.hub.handleSortEnd():this.canceling?this.$emit("sort-cancel",{event:t}):(this.$emit("sort-end",{event:t,oldIndex:this.index,newIndex:this.newIndex}),this.$emit("update:list",Wt(this.list,this.index,this.newIndex))),this.manager.active=null,this._touched=!1,this.canceling=!1,this.sorting=!1};this.transitionDuration||this.draggedSettlingDuration?this.transitionHelperIntoPlace(e,s):s()},transitionHelperIntoPlace(t,e){if(this.draggedSettlingDuration===0||t.length===0||!this.helper)return Promise.resolve();const s=t[this.index].node;let i=0,n=0;const a={top:window.pageYOffset-this.initialWindowScroll.top,left:window.pageXOffset-this.initialWindowScroll.left};if(this.hub&&!this.hub.isDest(this)&&!this.canceling){const o=this.hub.getDest();if(!o)return;const m=o.newIndex,y=o.manager.getOrderedRefs(),r=m0?i+=o.offsetLeft+o.offsetWidth-(s.offsetLeft+s.offsetWidth):i+=o.offsetLeft-s.offsetLeft,n=-m.top,this.translate&&this.translate.y>0?n+=o.offsetTop+o.offsetHeight-(s.offsetTop+s.offsetHeight):n+=o.offsetTop-s.offsetTop}const l=this.draggedSettlingDuration!==null?this.draggedSettlingDuration:this.transitionDuration;F(this.helper,`translate3d(${i}px,${n}px, 0)`,`${l}ms`);const c=o=>{(!o||o.propertyName==="transform")&&(clearTimeout(f),F(this.helper),e())},f=setTimeout(c,l+10);this.helper.addEventListener("transitionend",c)},updatePosition(t){const{lockAxis:e,lockToContainerEdges:s}=this.$props,i=N(t),n={x:i.x-this.initialOffset.x,y:i.y-this.initialOffset.y};if(n.y-=window.pageYOffset-this.initialWindowScroll.top,n.x-=window.pageXOffset-this.initialWindowScroll.left,this.translate=n,s){const[a,l]=Pt(this.lockOffset,this.height,this.width),c={x:this.width/2-a.x,y:this.height/2-a.y},f={x:this.width/2-l.x,y:this.height/2-l.y};this.minTranslate.x&&this.maxTranslate.x&&(n.x=tt(this.minTranslate.x+c.x,this.maxTranslate.x-f.x,n.x)),this.minTranslate.y&&this.maxTranslate.y&&(n.y=tt(this.minTranslate.y+c.y,this.maxTranslate.y-f.y,n.y))}e==="x"?n.y=0:e==="y"&&(n.x=0),this.helper&&(this.helper.style.transform=`translate3d(${n.x}px,${n.y}px, 0)`)},animateNodes(){const{transitionDuration:t,hideSortableGhost:e}=this.$props,s=this.manager.getOrderedRefs(),i={left:this.scrollContainer.scrollLeft-this.initialScroll.left,top:this.scrollContainer.scrollTop-this.initialScroll.top},n={left:this.offsetEdge.left+this.translate.x+i.left,top:this.offsetEdge.top+this.translate.y+i.top},a={top:window.pageYOffset-this.initialWindowScroll.top,left:window.pageXOffset-this.initialWindowScroll.left};this.newIndex=null;for(let l=0,c=s.length;lm?m/2:this.width/2,height:this.height>y?y/2:this.height/2},d={x:0,y:0};let{edgeOffset:p}=s[l];p||(s[l].edgeOffset=p=S(f,this.container));const v=l0&&s[l-1];if(v&&!v.edgeOffset&&(v.edgeOffset=S(v.node,this.container)),o===this.index){e&&(this.sortableGhost=f,f.style.visibility="hidden",f.style.opacity="0");continue}t&&(f.style.transitionDuration=`${t}ms`),this._axis.x?this._axis.y?othis.containerBoundingRect.width-r.width&&v&&(d.x=v.edgeOffset.left-p.left,d.y=v.edgeOffset.top-p.top),this.newIndex===null&&(this.newIndex=o)):o>this.index&&(n.left+a.left+r.width>=p.left&&n.top+a.top+r.height>=p.top||n.top+a.top+r.height>=p.top+y)&&(d.x=-(this.width+this.marginOffset.x),p.left+d.xthis.index&&n.left+a.left+r.width>=p.left?(d.x=-(this.width+this.marginOffset.x),this.newIndex=o):othis.index&&n.top+a.top+r.height>=p.top?(d.y=-(this.height+this.marginOffset.y),this.newIndex=o):o=this.maxTranslate.y-this.height/2?(e.y=1,s.y=i.y*Math.abs((this.maxTranslate.y-this.height/2-t.y)/this.height)):t.x>=this.maxTranslate.x-this.width/2?(e.x=1,s.x=i.x*Math.abs((this.maxTranslate.x-this.width/2-t.x)/this.width)):t.y<=this.minTranslate.y+this.height/2?(e.y=-1,s.y=i.y*Math.abs((t.y-this.height/2-this.minTranslate.y)/this.height)):t.x<=this.minTranslate.x+this.width/2&&(e.x=-1,s.x=i.x*Math.abs((t.x-this.width/2-this.minTranslate.x)/this.width)),this.autoscrollInterval&&(clearInterval(this.autoscrollInterval),this.autoscrollInterval=null),(e.x!==0||e.y!==0)&&(this.autoscrollInterval=window.setInterval(()=>{const n={left:1*s.x*e.x,top:1*s.y*e.y};this.useWindowAsScrollContainer?this._window.scrollBy(n.left,n.top):(this.scrollContainer.scrollTop+=n.top,this.scrollContainer.scrollLeft+=n.left),this.translate.x+=n.left,this.translate.y+=n.top,this.animateNodes()},5))}}}),ct=I({name:"SlickItem",mixins:[Nt],props:{tag:{type:String,default:"div"}},render(){var t,e;return k(this.tag,(e=(t=this.$slots).default)===null||e===void 0?void 0:e.call(t))}}),Gt=I({name:"SlickList",mixins:[Rt],props:{tag:{type:String,default:"div"},itemKey:{type:[String,Function],default:"id"}},render(){var t,e;return this.$slots.item?k(this.tag,this.list.map((s,i)=>{let n;if(s!=null){if(typeof this.itemKey=="function")n=this.itemKey(s);else if(typeof s=="object"&&j(s,this.itemKey)&&typeof s[this.itemKey]=="string")n=s[this.itemKey];else if(typeof s=="string")n=s;else throw new Error("Cannot find key for item, use the item-key prop and pass a function or string");return k(ct,{key:n,index:i},{default:()=>{var a,l;return(l=(a=this.$slots).item)===null||l===void 0?void 0:l.call(a,{item:s,index:i})}})}})):k(this.tag,(e=(t=this.$slots).default)===null||e===void 0?void 0:e.call(t))}}),zt=I({props:{tag:{type:String,default:"span"}},mounted(){this.$el.sortableHandle=!0},render(){var t,e;return k(this.tag,(e=(t=this.$slots).default)===null||e===void 0?void 0:e.call(t))}}),Ht={key:0,d:"M30.336 12.547l-10.172-1.074L16 2.133l-4.164 9.34l-10.172 1.074l7.598 6.848L7.14 29.398L16 24.29l8.86 5.11l-2.122-10.004z",fill:"#ffaa00"},jt={key:1,d:"M16 2.125l-.906 2.063l-3.25 7.28l-7.938.845l-2.25.25l1.688 1.5l5.906 5.343l-1.656 7.813l-.469 2.187l1.969-1.125l6.906-4l6.906 4l1.969 1.125l-.469-2.187l-1.656-7.813l5.906-5.343l1.688-1.5l-2.25-.25l-7.938-.844l-3.25-7.281zm0 4.906l2.563 5.782l.25.53l.562.063l6.281.656l-4.687 4.22l-.438.405l.125.563l1.313 6.156l-5.469-3.125l-.5-.312l-.5.312l-5.469 3.125l1.313-6.156l.125-.563l-.438-.406l-4.687-4.218l6.281-.657l.563-.062l.25-.531z",fill:"#888888"},Ft=I({__name:"SynthFav",props:{url:{type:String,default:""}},setup(t){const s=ut("fav:"+t.url,!1);function i(n){s.value=!s.value,console.log(s.value)}return(n,a)=>(g(),b("svg",{onClick:a[0]||(a[0]=bt(l=>i(t.url),["stop","prevent"])),xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32"},[u(s)?(g(),b("path",Ht)):(g(),b("path",jt))]))}}),ft=t=>(xt("data-v-2d995d47"),t=t(),vt(),t),Vt=["src","alt"],Kt=ft(()=>h("div",{class:"flex-1"},null,-1)),Yt={class:"p-4 flex items-center justify-between w-full"},Xt={class:"text-md font-bold flex items-center gap-2 flex-1"},qt={class:"flex-1"},Ut=ft(()=>h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32"},[h("path",{d:"M4 7v2h24V7zm0 8v2h24v-2zm0 8v2h24v-2z",fill:"#888888"})],-1)),Jt=I({__name:"SynthCard",props:{off:{type:Boolean,default:!1},title:{type:String,default:""},description:{type:String,default:""},cover:{type:String,default:""},url:{type:String,default:""}},setup(t){const e=t,{checkAvailability:s,isFormOpen:i}=K(),n=x(null);rt(s,async l=>{try{(await fetch("https://corsproxy.io/?"+e.url)).status==200?n.value=!0:n.value=!1}catch{n.value=!1}});function a(){e.off?i.value=!i.value:window.open(e.url,"_blank")}return(l,c)=>{const f=yt("ClientOnly");return g(),b("button",{class:"flex flex-col text-left relative min-h-50 card p-0 bg-light-300 shadow-lg flex flex-col dark-bg-dark-300 -hover-translate-y-2px transition hover-shadow-xl rounded-xl overflow-hidden relative",onClick:a},[(g(),b("img",{key:t.title,height:"200",width:"1000",src:`/cover/${t.title.toLowerCase().split(" ").join("-")}.webp`,alt:`${t.title} illustration`},null,8,Vt)),Kt,h("div",Yt,[h("div",Xt,[h("div",qt,L(t.title),1),u(s)?(g(),b("div",{key:0,class:z(["w-2 h-2 rounded-full shadow-inset",{"bg-green-500":n.value===!0,"bg-red-500":n.value===!1}])},null,2)):M("",!0),C(f,null,{default:w(()=>[C(Ft,{class:"scale-70 w-10",url:t.url},null,8,["url"])]),_:1}),C(u(zt),{class:"scale-80 opacity-40 cursor-grab absolute top-2 right-2"},{default:w(()=>[Ut]),_:1})])])])}}});const Qt=wt(Jt,[["__scopeId","data-v-2d995d47"]]);const te={__name:"SynthList",setup(t){const{isAccessGranted:e}=K(),s=x(Dt);function i(n){return!e.value&&n>5}return(n,a)=>(g(),W(u(Gt),{class:"flex flex-wrap items-stretch gap-4 md-gap-6 m-2 lg-m-8",list:s.value,"onUpdate:list":a[0]||(a[0]=l=>s.value=l),axis:"xy","use-drag-handle":""},{default:w(()=>[(g(!0),b(_t,null,Tt(s.value,(l,c)=>(g(),W(u(ct),{class:"flex",style:{flex:"1 1 240px"},key:l.id,index:c},{default:w(()=>[(g(),W(Qt,{style:St({opacity:i(c)?.8:1}),title:l.title,description:l.description,cover:l.cover,url:l.url,key:l.id,off:i(c)},null,8,["style","title","description","cover","url","off"]))]),_:2},1032,["index"]))),128))]),_:1},8,["list"]))}};const ee=h("path",{d:"M7.219 5.781L5.78 7.22L14.563 16L5.78 24.781L7.22 26.22L16 17.437l8.781 8.782l1.438-1.438L17.437 16l8.782-8.781L24.78 5.78L16 14.563z",fill:"#888888"},null,-1),se=[ee],ie={key:0,class:"flex flex-col gap-4 max-w-45ch text-center"},ne={class:"text-3xl font-bold"},le=h("div",{class:"text-xl"},"Enjoy your web-synthesizers hub",-1),ae={class:"text-sm flex gap-2 justify-center"},oe=h("svg",{class:"absolute",xmlns:"http://www.w3.org/2000/svg",width:"100",height:"100",viewBox:"0 0 32 32"},[h("path",{d:"M16 4.688L3.781 16.905l1.438 1.407L16 7.53l10.781 10.782l1.438-1.407zm0 7L3.781 23.905l1.438 1.407L16 14.53l10.781 10.781l1.438-1.406z",fill:"#888888"})],-1),re=[oe],he={key:1,class:"flex flex-col gap-8 relative pt-8 items-center"},de={class:"text-center max-w-45ch",for:"email"},ce={class:"flex gap-4 flex-col w-full"},fe={class:"flex items-center gap-2"},ue=h("div",{class:"p-2 w-20 font-bold text-right"},"E-mail*",-1),pe={class:"flex items-center gap-2"},ge=h("div",{class:"p-2 w-20 font-bold text-right"},"Name",-1),me=["disabled"],be={class:"text-xs opacity-60 text-center max-w-45ch mx-auto"},ye={__name:"TheForm",setup(t){const{name:e,email:s,isValidEmail:i,isFormOpen:n,grantAccess:a,storedEmail:l,storedName:c,resetEmail:f,isAccessGranted:o}=K();function m(){window.scrollTo({top:0,left:0,behavior:"smooth"})}return(y,r)=>(g(),W($t,{name:"slide"},{default:w(()=>[h("div",{class:z(["z-10 min-h-40dvh bottom-0 right-0 left-0 bg-light-800 bg-opacity-80 backdrop-blur flex flex-col items-center gap-4 justify-center dark-bg-dark-200 dark-bg-opacity-80 p-8 shadow",{sticky:u(n)}])},[R((g(),b("svg",{class:"absolute top-4 right-4 text-4xl cursor-pointer",onClick:r[0]||(r[0]=d=>n.value=!1),xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 32 32"},se,512)),[[It,u(n)]]),u(o)?(g(),b("div",ie,[h("div",ne,"Hello, "+L(u(c))+"!",1),le,h("div",ae,[T(L(u(l)),1),h("span",{class:"opacity-20 hover-opacity-50 transition cursor-pointer",onClick:r[1]||(r[1]=(...d)=>u(f)&&u(f)(...d))},"Log out")]),h("div",{class:"flex justify-center cursor-pointer p-2 opacity-50 hover-opacity-100 transition",onClick:r[2]||(r[2]=d=>m())},re)])):(g(),b("div",he,[h("label",de,[A(y.$slots,"default")]),h("div",ce,[h("label",fe,[ue,R(h("input",{class:"flex-1 p-4 md-p-4 rounded-xl bg-light-200 shadow-md dark-bg-dark-400 flex-1",ref:"target",maxlength:"30","onUpdate:modelValue":r[3]||(r[3]=d=>X(s)?s.value=d:null),id:"email",name:"email",type:"email",onKeydown:r[4]||(r[4]=q(d=>u(a)(),["enter"])),placeholder:"your@gmail.com"},null,544),[[Y,u(s)]])]),h("label",pe,[ge,R(h("input",{class:"flex-1 p-4 md-p-4 rounded-xl bg-light-200 shadow-md dark-bg-dark-400","onUpdate:modelValue":r[5]||(r[5]=d=>X(e)?e.value=d:null),id:"name",name:"name",type:"text",onKeydown:r[6]||(r[6]=q(d=>u(a)(),["enter"])),placeholder:"optional"},null,544),[[Y,u(e)]])]),h("button",{class:z(["text-sm md-text-md p-4 font-bold md-p-4 rounded-xl shadow-xl hover-shadow-2xl transition -hover-translate-y-2px active-translate-y-0 active-shadow-md bg-green-400 dark-bg-green-700",{"grayscale-50":!u(i)}]),onClick:r[7]||(r[7]=d=>u(a)()),disabled:!u(i)},[A(y.$slots,"button",{},()=>[T("GET ACCESS")])],10,me)]),h("div",be,[A(y.$slots,"notice",{},()=>[T("Your access status will be saved per device and you won't need to enter your e-mail again.")])])]))],2)]),_:3}))}},xe={class:"bg-light-300 dark-bg-dark-700 dark-text-light-200 text-center line-height-loose text-md py-16"},ve={class:"mx-auto max-w-75ch intro md-text-lg"},we={key:0,class:"p-2 flex flex-col mt-8"},_e={class:"text-4xl font-bold"},Te=h("div",{class:"text-lg"},"web synths",-1),Se={key:1,class:"p-2 flex flex-col mt-8"},Ie={class:"text-4xl font-bold"},$e=h("div",{class:"text-lg"},"web musicians",-1),Ce={__name:"AboutUs",props:{synths:{type:Number,default:30}},setup(t){const e=x(),s=x([]),i=ot(()=>s.value.length),n=pt(i);ht(()=>{fetch("https://corsproxy.io/?https://db.chromatone.center/items/players?limit=-1").then(o=>o.json()).then(({data:o})=>s.value=o)});const a=gt(e),{share:l,isSupported:c}=mt();function f(){l({title:"Web synths collection",text:"Look at this online synthesizer collection. No need to install anything - just your browser and any MIDI controller will do.",url:location.href})}return(o,m)=>(g(),b("div",xe,[h("div",ve,[A(o.$slots,"default"),h("div",{class:"flex justify-center",ref_key:"counters",ref:e},[u(a)?(g(),b("div",we,[h("div",_e,L(t.synths),1),Te])):M("",!0),u(a)&&i.value>0?(g(),b("div",Se,[h("div",Ie,L(u(n).toFixed())+"+",1),$e])):M("",!0)],512),u(c)?(g(),b("button",{key:0,class:"text-white py-2 px-4 mt-6 shadow-lg rounded-lg cursor-pointer bg-green-600 -hover-translate-y-2px transition",onClick:m[0]||(m[0]=y=>f())},"Share now to save for later")):M("",!0)])]))}},ke=h("h2",{class:"text-lg font-bold"},"Welcome to our free web synth collection!",-1),Oe=h("p",null,[h("a",{href:"https://playtronica.com",target:"_blank",rel:"noopener"},"Playtronica"),T(" is a digital playground that explores the possibilities of the material world through technology, creating gadgets that make the world musical. "),h("a",{href:"https://chromatone.center",target:"_blank",rel:"noopener"},"Chromatone"),T(" is a visual language for music education, research, and performance. We share our passion for web-based music instruments. Welcome to the community!")],-1),Ne=JSON.parse('{"title":"Web synths","description":"Web synthesizers to play with MIDI controllers","frontmatter":{"title":"Web synths","description":"Web synthesizers to play with MIDI controllers","date":"2023-06-22T00:00:00.000Z","layout":"home"},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1692108519000}'),Ee={name:"index.md"},Me=Object.assign(Ee,{setup(t){return(e,s)=>(g(),b("div",null,[C(te),C(Ce,null,{default:w(()=>[ke,Oe]),_:1}),C(ye,null,{button:w(()=>[T("JOIN THE COMMUNITY")]),notice:w(()=>[T("Your access status will be saved per device and you won't need to enter your e-mail again.")]),default:w(()=>[T(" We are building a community of web-based musicians. Type in your e-mail to instantly get full access to the collection and occasionally receive community updates. ")]),_:1})]))}});export{Ne as __pageData,Me as default}; diff --git a/assets/index.md.41cab868.lean.js b/assets/index.md.41cab868.lean.js deleted file mode 100644 index f50f6ea9..00000000 --- a/assets/index.md.41cab868.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{u as at,a as ut,b as pt,c as gt,d as mt}from"./chunks/theme.10ba8259.js";import{r as x,b as ot,w as rt,f as ht,h as I,a2 as k,i as g,j as b,u,a0 as bt,I as yt,B as h,p as L,l as z,x as M,M as C,v as w,C as xt,D as vt,_ as wt,q as W,J as _t,K as Tt,S as St,a3 as R,a4 as It,m as T,k as A,a5 as Y,a6 as X,Z as q,T as $t}from"./chunks/framework.7c22cbc0.js";const O=x(!1),U=x(!1),Ct=x(!1),B=at("storedEmail",""),V=at("storedName",""),Z=x(!1),$=x(""),H=x(""),kt=ot(()=>dt($.value)),J=x(!1);function dt(t){return/^[^@]+@\w+(\.\w+)+\w$/.test(t)}function Ot(){B.value="",V.value="",Z.value=!1,O.value=!1}function K(){return J.value||(rt(O,t=>{t&&(U.value=!1)}),ht(()=>{B.value&&(O.value=!0)}),J.value=!0),{isAccessGranted:O,isValidEmail:kt,email:$,name:H,grantAccess:Lt,isSent:Z,isFormOpen:U,checkAvailability:Ct,storedEmail:B,storedName:V,resetEmail:Ot}}const Et="https://db.chromatone.center/flows/trigger/f36a3461-c476-4ce5-88c9-eba2216083b0";async function Lt(){if(!(!$.value&&!dt($.value))&&(O.value=!0,!Z.value)){Z.value=!0;try{const t={email:$.value,name:H.value.slice(0,30)};B.value=$.value,V.value=H.value;const e=await fetch(Et,{method:"POST",mode:"cors",cache:"no-cache",credentials:"same-origin",headers:{"Content-Type":"application/json"},redirect:"follow",referrerPolicy:"no-referrer",body:JSON.stringify(t)});console.log(e==null?void 0:e.json())}catch(t){console.error(t)}}}const Dt=JSON.parse('[{"id":1,"status":"published","sort":1,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.730Z","title":"Dotpiano","url":"https://dotpiano.com/","content":null,"cover":"fd81d5c3-4cb6-41eb-9689-d5f7aba2b8a6","tags":null},{"id":3,"status":"published","sort":3,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.748Z","title":"TouchME by Chromatone","url":"https://touchme.chromatone.center/","content":null,"cover":"6e97f4ab-c2f7-4e90-9c26-7518dbfddb3a","tags":null},{"id":14,"status":"published","sort":4,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.765Z","title":"Juno-106","url":"http://juno-106.js.org/","content":null,"cover":"d4fad441-c1a0-4ccc-9c0d-d8bfb79f9094","tags":null},{"id":26,"status":"published","sort":5,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.816Z","title":"Learning synths with Ableton","url":"https://learningsynths.ableton.com/","content":null,"cover":"f5c81f00-fc0e-40ad-96ce-a1834709253a","tags":null},{"id":30,"status":"published","sort":5,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.800Z","title":"DX7 Synth","url":"https://mmontag.github.io/dx7-synth-js/","content":null,"cover":"01eacfd8-892d-41de-b928-50b686a87400","tags":null},{"id":32,"status":"published","sort":5,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.784Z","title":"Sampler synth","url":"https://play.playtronica.com/","content":null,"cover":"749cb332-eb5e-40c6-bb36-fb87bb25a834","tags":null},{"id":10,"status":"published","sort":6,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.837Z","title":"Websynths","url":"http://websynths.com/","content":null,"cover":"072cf912-9966-4d3f-9823-36e75fb8ada9","tags":null},{"id":19,"status":"published","sort":6,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.859Z","title":"Theremin","url":"https://www.femurdesign.com/theremin/","content":null,"cover":"f4ca5ef9-132a-4e56-80fb-21bd0fd0b3f6","tags":null},{"id":29,"status":"published","sort":6,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.891Z","title":"Elementary synth","url":"https://chromatone.center/practice/synth/elementary/","content":null,"cover":"14f5d908-fba2-451f-8bec-a922cc5672c7","tags":null},{"id":22,"status":"published","sort":7,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.875Z","title":"Disco-computer","url":"http://www.disco-computer.com/synthesizer/synth.html","content":null,"cover":"1ac14701-0530-4ca6-b516-45d5f9523819","tags":null},{"id":31,"status":"published","sort":12,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.906Z","title":"Video Sampler","url":"https://seeing-sound.netlify.app/","content":null,"cover":"a4e5d9b7-1b64-4c31-aed4-467e2c6cba32","tags":null},{"id":27,"status":"published","sort":14,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.918Z","title":"Viktor NV-1","url":"http://nicroto.github.io/viktor/","content":null,"cover":"1c104eeb-dc14-4d3b-bb8e-14accb2184c3","tags":null},{"id":17,"status":"published","sort":30,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.930Z","title":"Sound Trap","url":"https://www.soundtrap.com/","content":null,"cover":"328c8c51-e7d4-48bd-9c3d-6dea5184cad5","tags":null},{"id":6,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.181Z","title":"MIDI–driven Web Audio","url":"https://webaudiodemos.appspot.com/midi-synth/index.html","content":null,"cover":"f268f0dc-b091-4799-885b-0a5eecfdcbec","tags":null},{"id":8,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.088Z","title":"Meet the Heisenberg","url":"https://www.audiotool.com/product/device/heisenberg/","content":null,"cover":"88c6fe9d-033c-4aac-a946-278e729e5f05","tags":null},{"id":9,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.141Z","title":"Cardboard Synth","url":"https://www.gsn-lib.org/apps/cardboardsynth/index.html","content":null,"cover":"3406a3fa-5e4d-4efc-a5ac-c6c8ee3abf72","tags":null},{"id":11,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.126Z","title":"Tanguy synth","url":"http://tanguysynth.com/","content":null,"cover":"16a499c4-661f-48b5-b308-dd7ea77f335d","tags":null},{"id":12,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.109Z","title":"MOD synth","url":"http://mod-synth.io/","content":null,"cover":"dd13c72f-d1ee-4197-b8a2-f24c162d5858","tags":null},{"id":13,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.076Z","title":"OLIF SY1K","url":"http://perso.numericable.fr/olivier.friker/synth/O3-synth%20V1.3.html","content":null,"cover":"44234157-4872-4e35-baec-a7d073a7258d","tags":null},{"id":15,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.059Z","title":"Note Sculptor","url":"http://www.noisesculptor.com/","content":null,"cover":"3b9d921b-79da-4923-9cd2-bbc826561a93","tags":null},{"id":16,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.159Z","title":"WebAudioSynth V2","url":"http://aikelab.net/websynthv2/","content":null,"cover":"7980d0af-e534-4383-a36c-0b116a06499e","tags":null},{"id":18,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.944Z","title":"Samplestich","url":"http://samplestitch.com.s3-website-us-east-1.amazonaws.com/","content":null,"cover":"0f272d97-7882-4797-9890-97c3b75149a4","tags":null},{"id":20,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.032Z","title":"Omni","url":"https://femurdesign.com/omni/","content":null,"cover":"82c94f42-0449-45ea-924d-7365ba51af20","tags":null},{"id":21,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.016Z","title":"Web Modular","url":"https://www.g200kg.com/docs/webmodular/","content":null,"cover":"5bb158d2-cfcc-46d9-acd5-6cf3312d7678","tags":null},{"id":23,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.000Z","title":"Online sequencer","url":"https://onlinesequencer.net/369477","content":null,"cover":"efdc67a4-4cfc-4a4b-a704-1b939fbe7fc4","tags":null},{"id":24,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.987Z","title":"PixelSynth","url":"https://ojack.github.io/PIXELSYNTH/","content":null,"cover":"59ec0d0b-6bcf-4c50-8d76-5fe624105c0c","tags":null},{"id":25,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.970Z","title":"Acid Machine 2","url":"http://errozero.co.uk/acid-machine/","content":null,"cover":"380cdb0d-4a68-44a7-b24c-2b655f26ebcd","tags":null},{"id":28,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.958Z","title":"WebSID Commodore 64","url":"http://www.igorski.nl/experiment/websid","content":null,"cover":"e39565a0-15fa-4c3a-9bc7-aa5a613dd19f","tags":null}]'),Nt=I({inject:["manager"],props:{index:{type:Number,required:!0},disabled:{type:Boolean,default:!1}},data(){return{}},watch:{index(t){this.$el&&this.$el.sortableInfo&&(this.$el.sortableInfo.index=t)},disabled(t){t?this.removeDraggable():this.setDraggable(this.index)}},mounted(){const{disabled:t,index:e}=this.$props;t||this.setDraggable(e)},beforeUnmount(){this.disabled||this.removeDraggable()},methods:{setDraggable(t){const e=this.$el;e.sortableInfo={index:t,manager:this.manager},this.ref={node:e},this.manager.add(this.ref)},removeDraggable(){this.manager.remove(this.ref)}}});class Mt{constructor(){this.refs=[],this.active=null}add(e){this.refs||(this.refs=[]),this.refs.push(e)}remove(e){const s=this.getIndex(e);s!==-1&&this.refs.splice(s,1)}isActive(){return!!this.active}getActive(){return this.refs.find(({node:e})=>{var s,i;return((s=e==null?void 0:e.sortableInfo)===null||s===void 0?void 0:s.index)==((i=this===null||this===void 0?void 0:this.active)===null||i===void 0?void 0:i.index)})||null}getIndex(e){return this.refs.indexOf(e)}getRefs(){return this.refs}getOrderedRefs(){return this.refs.sort((e,s)=>e.node.sortableInfo.index-s.node.sortableInfo.index)}}const E=t=>t.touches!=null;function j(t,e){return!!t&&Object.prototype.hasOwnProperty.call(t,e)}function Wt(t,e,s){const i=t.slice(0);if(s>=i.length){let n=s-i.length;for(;n--+1;)i.push(void 0)}return i.splice(s,0,i.splice(e,1)[0]),i}function At(t,e){const s=t.slice(0);return e>=s.length||s.splice(e,1),s}function Bt(t,e,s){const i=t.slice(0);return e===i.length?i.push(s):i.splice(e,0,s),i}const _={start:["touchstart","mousedown"],move:["touchmove","mousemove"],end:["touchend","mouseup"],cancel:["touchcancel","keyup"]};function Q(t,e){for(;t;){if(e(t))return t;t=t.parentNode}}function tt(t,e,s){return se?e:s}function D(t){return t.substr(-2)==="px"?parseFloat(t):0}function et(t){const e=window.getComputedStyle(t);return{top:D(e.marginTop),right:D(e.marginRight),bottom:D(e.marginBottom),left:D(e.marginLeft)}}function N(t,e="page"){const s=`${e}X`,i=`${e}Y`;return{x:E(t)?t.touches[0][s]:t[s],y:E(t)?t.touches[0][i]:t[i]}}function st(t){const e=[t];for(;t;t=t.offsetParent)e.unshift(t);return e}function Zt(t,e){const s=st(t),i=st(e);if(s[0]!=i[0])throw"No common ancestor!";for(let n=0;n{n.type!=="file"&&e[a]&&(n.value=e[a].value)}),s}function Pt(t,e,s){if(typeof t=="string"&&(t=+t),Array.isArray(t)||(t=[t,t]),t.length!==2)throw new Error(`lockOffset prop of SortableContainer should be a single value or an array of exactly two values. Given ${t}`);const[i,n]=t;return[nt(i,e,s),nt(n,e,s)]}function nt(t,e,s){let i=t,n=t,a="px";if(typeof t=="string"){const l=/^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(t);if(l===null)throw new Error(`lockOffset value should be a number or a string of a number followed by "px" or "%". Given ${t}`);i=n=parseFloat(t),a=l[1]}if(!isFinite(i)||!isFinite(n))throw new Error(`lockOffset value should be a finite. Given ${t}`);return a==="%"&&(i=i*e/100,n=n*s/100),{x:i,y:n}}function lt(t=[]){for(let e=0,s=t.length;e[]},lockAxis:{type:String,default:""},helperClass:{type:String,default:""},contentWindow:{type:Object,default:null},shouldCancelStart:{type:Function,default:t=>["input","textarea","select","option","button"].indexOf(t.target.tagName.toLowerCase())!==-1},getHelperDimensions:{type:Function,default:({node:t})=>({width:t.offsetWidth,height:t.offsetHeight})}},emits:["sort-start","sort-move","sort-end","sort-cancel","sort-insert","sort-remove","update:list"],data(){let t=!1;return this.group&&this.SlicksortHub&&(t=!0),{sorting:!1,hub:t?this.SlicksortHub:null,manager:new Mt}},mounted(){this.hub&&(this.id=this.hub.getId()),this.container=this.$el,this.document=this.container.ownerDocument||document,this._window=this.contentWindow||window,this.scrollContainer=this.useWindowAsScrollContainer?{scrollLeft:0,scrollTop:0}:this.container,this.events={start:this.handleStart,move:this.handleMove,end:this.handleEnd};for(const t in this.events)j(this.events,t)&&_[t].forEach(e=>this.container.addEventListener(e,this.events[t]));this.hub&&this.hub.addContainer(this)},beforeUnmount(){for(const t in this.events)j(this.events,t)&&_[t].forEach(e=>this.container.removeEventListener(e,this.events[t]));this.hub&&this.hub.removeContainer(this),this.dragendTimer&&clearTimeout(this.dragendTimer),this.cancelTimer&&clearTimeout(this.cancelTimer),this.pressTimer&&clearTimeout(this.pressTimer),this.autoscrollInterval&&clearInterval(this.autoscrollInterval)},methods:{handleStart(t){const{distance:e,shouldCancelStart:s}=this.$props;if(!E(t)&&t.button===2||s(t))return!1;this._touched=!0,this._pos=N(t);const i=t.target,n=Q(i,a=>a.sortableInfo!=null);if(n&&n.sortableInfo&&this.nodeIsChild(n)&&!this.sorting){const{useDragHandle:a}=this.$props,{index:l}=n.sortableInfo;if(a&&!Q(i,c=>c.sortableHandle!=null))return;this.manager.active={index:l},i.tagName.toLowerCase()==="a"&&t.preventDefault(),e||(this.pressDelay===0?this.handlePress(t):this.pressTimer=G(()=>this.handlePress(t),this.pressDelay))}},nodeIsChild(t){return t.sortableInfo.manager===this.manager},handleMove(t){const{distance:e,pressThreshold:s}=this.$props;if(!this.sorting&&this._touched){const i=N(t);this._delta={x:this._pos.x-i.x,y:this._pos.y-i.y};const n=Math.abs(this._delta.x)+Math.abs(this._delta.y);!e&&(!s||s&&n>=s)?(this.cancelTimer&&clearTimeout(this.cancelTimer),this.cancelTimer=G(this.cancel,0)):e&&n>=e&&this.manager.isActive()&&this.handlePress(t)}},handleEnd(){if(!this._touched)return;const{distance:t}=this.$props;this._touched=!1,t||this.cancel()},cancel(){this.sorting||(this.pressTimer&&clearTimeout(this.pressTimer),this.manager.active=null,this.hub&&this.hub.cancel())},handleSortCancel(t){(E(t)||t.key===this.cancelKey)&&(this.newIndex=this.index,this.canceling=!0,this.translate={x:0,y:0},this.animateNodes(),this.handleSortEnd(t))},handlePress(t){t.stopPropagation();const e=this.manager.getActive();if(e){const{getHelperDimensions:s,helperClass:i,hideSortableGhost:n,appendTo:a}=this.$props,{node:l}=e,{index:c}=l.sortableInfo,f=et(l),o=this.container.getBoundingClientRect(),m=s({index:c,node:l});this.node=l,this.margin=f,this.width=m.width,this.height=m.height,this.marginOffset={x:this.margin.left+this.margin.right,y:Math.max(this.margin.top,this.margin.bottom)},this.boundingClientRect=l.getBoundingClientRect(),this.containerBoundingRect=o,this.index=c,this.newIndex=c;const y=it(l);this.helper=this.document.querySelector(a).appendChild(y),this.helper.style.position="fixed",this.helper.style.top=`${this.boundingClientRect.top-f.top}px`,this.helper.style.left=`${this.boundingClientRect.left-f.left}px`,this.helper.style.width=`${this.width}px`,this.helper.style.height=`${this.height}px`,this.helper.style.boxSizing="border-box",this.helper.style.pointerEvents="none",n&&(this.sortableGhost=l,l.style.visibility="hidden",l.style.opacity="0"),this.hub&&(this.hub.sortStart(this),this.hub.helper=this.helper,this.hub.ghost=this.sortableGhost),this.intializeOffsets(t,this.boundingClientRect),this.offsetEdge=S(l,this.container),i&&this.helper.classList.add(...i.split(" ")),this.listenerNode=E(t)?l:this._window,_.move.forEach(r=>this.listenerNode.addEventListener(r,this.handleSortMove)),_.end.forEach(r=>this.listenerNode.addEventListener(r,this.handleSortEnd)),_.cancel.forEach(r=>this.listenerNode.addEventListener(r,this.handleSortCancel)),this.sorting=!0,this.$emit("sort-start",{event:t,node:l,index:c})}},handleSortMove(t){if(t.preventDefault(),this.updatePosition(t),this.hub){const e=this.list[this.index];this.hub.handleSortMove(t,e)}(!this.hub||this.hub.isDest(this))&&(this.animateNodes(),this.autoscroll()),this.$emit("sort-move",{event:t})},handleDropOut(){const t=this.list[this.index],e=At(this.list,this.index);return this.$emit("sort-remove",{oldIndex:this.index}),this.$emit("update:list",e),t},handleDropIn(t){const e=Bt(this.list,this.newIndex,t);this.$emit("sort-insert",{newIndex:this.newIndex,value:t}),this.$emit("update:list",e),this.handleDragEnd()},handleDragOut(){this.autoscrollInterval&&(clearInterval(this.autoscrollInterval),this.autoscrollInterval=null),this.hub.isSource(this)?(this.translate={x:1e4,y:1e4},this.animateNodes()):(this.manager.getRefs().forEach(t=>{t.node.style.transform=""}),this.dragendTimer=G(this.handleDragEnd,this.transitionDuration||0))},handleDragEnd(){this.autoscrollInterval&&(clearInterval(this.autoscrollInterval),this.autoscrollInterval=null),lt(this.manager.getRefs()),this.sortableGhost&&(this.sortableGhost.remove(),this.sortableGhost=null),this.dragendTimer&&(clearTimeout(this.dragendTimer),this.dragendTimer=null),this.manager.active=null,this._touched=!1,this.sorting=!1},intializeOffsets(t,e){const{useWindowAsScrollContainer:s,containerBoundingRect:i,_window:n}=this;this.marginOffset={x:this.margin.left+this.margin.right,y:Math.max(this.margin.top,this.margin.bottom)},this._axis={x:this.axis.indexOf("x")>=0,y:this.axis.indexOf("y")>=0},this.initialOffset=N(t),this.initialScroll={top:this.scrollContainer.scrollTop,left:this.scrollContainer.scrollLeft},this.initialWindowScroll={top:window.pageYOffset,left:window.pageXOffset},this.translate={x:0,y:0},this.minTranslate={},this.maxTranslate={},this._axis.x&&(this.minTranslate.x=(s?0:i.left)-e.left-this.width/2,this.maxTranslate.x=(s?n.innerWidth:i.left+i.width)-e.left-this.width/2),this._axis.y&&(this.minTranslate.y=(s?0:i.top)-e.top-this.height/2,this.maxTranslate.y=(s?n.innerHeight:i.top+i.height)-e.top-this.height/2)},handleDragIn(t,e,s){if(this.hub.isSource(this))return;this.dragendTimer&&(this.handleDragEnd(),clearTimeout(this.dragendTimer),this.dragendTimer=null);const i=this.manager.getRefs();this.index=i.length,this.manager.active={index:this.index};const n=this.container.getBoundingClientRect(),a=s.getBoundingClientRect();this.containerBoundingRect=n,this.sortableGhost=it(e),this.container.appendChild(this.sortableGhost);const l=this.sortableGhost.getBoundingClientRect();this.boundingClientRect=l,this.margin=et(this.sortableGhost),this.width=l.width,this.height=l.height,this.offsetEdge=S(this.sortableGhost,this.container),this.intializeOffsets(t,l),this.initialOffset.x+=l.x-a.x,this.initialOffset.y+=l.y-a.y,this.sorting=!0},handleSortEnd(t){this.listenerNode&&(_.move.forEach(i=>this.listenerNode.removeEventListener(i,this.handleSortMove)),_.end.forEach(i=>this.listenerNode.removeEventListener(i,this.handleSortEnd)),_.cancel.forEach(i=>this.listenerNode.removeEventListener(i,this.handleSortCancel)));const e=this.manager.getRefs();this.helper&&this.helperClass&&this.helper.classList.remove(...this.helperClass.split(" ")),this.autoscrollInterval&&clearInterval(this.autoscrollInterval),this.autoscrollInterval=null;const s=()=>{this.helper&&(this.helper.remove(),this.helper=null),this.hideSortableGhost&&this.sortableGhost&&(this.sortableGhost.style.visibility="",this.sortableGhost.style.opacity=""),lt(e),this.hub&&!this.hub.isDest(this)?this.canceling?this.hub.cancel():this.hub.handleSortEnd():this.canceling?this.$emit("sort-cancel",{event:t}):(this.$emit("sort-end",{event:t,oldIndex:this.index,newIndex:this.newIndex}),this.$emit("update:list",Wt(this.list,this.index,this.newIndex))),this.manager.active=null,this._touched=!1,this.canceling=!1,this.sorting=!1};this.transitionDuration||this.draggedSettlingDuration?this.transitionHelperIntoPlace(e,s):s()},transitionHelperIntoPlace(t,e){if(this.draggedSettlingDuration===0||t.length===0||!this.helper)return Promise.resolve();const s=t[this.index].node;let i=0,n=0;const a={top:window.pageYOffset-this.initialWindowScroll.top,left:window.pageXOffset-this.initialWindowScroll.left};if(this.hub&&!this.hub.isDest(this)&&!this.canceling){const o=this.hub.getDest();if(!o)return;const m=o.newIndex,y=o.manager.getOrderedRefs(),r=m0?i+=o.offsetLeft+o.offsetWidth-(s.offsetLeft+s.offsetWidth):i+=o.offsetLeft-s.offsetLeft,n=-m.top,this.translate&&this.translate.y>0?n+=o.offsetTop+o.offsetHeight-(s.offsetTop+s.offsetHeight):n+=o.offsetTop-s.offsetTop}const l=this.draggedSettlingDuration!==null?this.draggedSettlingDuration:this.transitionDuration;F(this.helper,`translate3d(${i}px,${n}px, 0)`,`${l}ms`);const c=o=>{(!o||o.propertyName==="transform")&&(clearTimeout(f),F(this.helper),e())},f=setTimeout(c,l+10);this.helper.addEventListener("transitionend",c)},updatePosition(t){const{lockAxis:e,lockToContainerEdges:s}=this.$props,i=N(t),n={x:i.x-this.initialOffset.x,y:i.y-this.initialOffset.y};if(n.y-=window.pageYOffset-this.initialWindowScroll.top,n.x-=window.pageXOffset-this.initialWindowScroll.left,this.translate=n,s){const[a,l]=Pt(this.lockOffset,this.height,this.width),c={x:this.width/2-a.x,y:this.height/2-a.y},f={x:this.width/2-l.x,y:this.height/2-l.y};this.minTranslate.x&&this.maxTranslate.x&&(n.x=tt(this.minTranslate.x+c.x,this.maxTranslate.x-f.x,n.x)),this.minTranslate.y&&this.maxTranslate.y&&(n.y=tt(this.minTranslate.y+c.y,this.maxTranslate.y-f.y,n.y))}e==="x"?n.y=0:e==="y"&&(n.x=0),this.helper&&(this.helper.style.transform=`translate3d(${n.x}px,${n.y}px, 0)`)},animateNodes(){const{transitionDuration:t,hideSortableGhost:e}=this.$props,s=this.manager.getOrderedRefs(),i={left:this.scrollContainer.scrollLeft-this.initialScroll.left,top:this.scrollContainer.scrollTop-this.initialScroll.top},n={left:this.offsetEdge.left+this.translate.x+i.left,top:this.offsetEdge.top+this.translate.y+i.top},a={top:window.pageYOffset-this.initialWindowScroll.top,left:window.pageXOffset-this.initialWindowScroll.left};this.newIndex=null;for(let l=0,c=s.length;lm?m/2:this.width/2,height:this.height>y?y/2:this.height/2},d={x:0,y:0};let{edgeOffset:p}=s[l];p||(s[l].edgeOffset=p=S(f,this.container));const v=l0&&s[l-1];if(v&&!v.edgeOffset&&(v.edgeOffset=S(v.node,this.container)),o===this.index){e&&(this.sortableGhost=f,f.style.visibility="hidden",f.style.opacity="0");continue}t&&(f.style.transitionDuration=`${t}ms`),this._axis.x?this._axis.y?othis.containerBoundingRect.width-r.width&&v&&(d.x=v.edgeOffset.left-p.left,d.y=v.edgeOffset.top-p.top),this.newIndex===null&&(this.newIndex=o)):o>this.index&&(n.left+a.left+r.width>=p.left&&n.top+a.top+r.height>=p.top||n.top+a.top+r.height>=p.top+y)&&(d.x=-(this.width+this.marginOffset.x),p.left+d.xthis.index&&n.left+a.left+r.width>=p.left?(d.x=-(this.width+this.marginOffset.x),this.newIndex=o):othis.index&&n.top+a.top+r.height>=p.top?(d.y=-(this.height+this.marginOffset.y),this.newIndex=o):o=this.maxTranslate.y-this.height/2?(e.y=1,s.y=i.y*Math.abs((this.maxTranslate.y-this.height/2-t.y)/this.height)):t.x>=this.maxTranslate.x-this.width/2?(e.x=1,s.x=i.x*Math.abs((this.maxTranslate.x-this.width/2-t.x)/this.width)):t.y<=this.minTranslate.y+this.height/2?(e.y=-1,s.y=i.y*Math.abs((t.y-this.height/2-this.minTranslate.y)/this.height)):t.x<=this.minTranslate.x+this.width/2&&(e.x=-1,s.x=i.x*Math.abs((t.x-this.width/2-this.minTranslate.x)/this.width)),this.autoscrollInterval&&(clearInterval(this.autoscrollInterval),this.autoscrollInterval=null),(e.x!==0||e.y!==0)&&(this.autoscrollInterval=window.setInterval(()=>{const n={left:1*s.x*e.x,top:1*s.y*e.y};this.useWindowAsScrollContainer?this._window.scrollBy(n.left,n.top):(this.scrollContainer.scrollTop+=n.top,this.scrollContainer.scrollLeft+=n.left),this.translate.x+=n.left,this.translate.y+=n.top,this.animateNodes()},5))}}}),ct=I({name:"SlickItem",mixins:[Nt],props:{tag:{type:String,default:"div"}},render(){var t,e;return k(this.tag,(e=(t=this.$slots).default)===null||e===void 0?void 0:e.call(t))}}),Gt=I({name:"SlickList",mixins:[Rt],props:{tag:{type:String,default:"div"},itemKey:{type:[String,Function],default:"id"}},render(){var t,e;return this.$slots.item?k(this.tag,this.list.map((s,i)=>{let n;if(s!=null){if(typeof this.itemKey=="function")n=this.itemKey(s);else if(typeof s=="object"&&j(s,this.itemKey)&&typeof s[this.itemKey]=="string")n=s[this.itemKey];else if(typeof s=="string")n=s;else throw new Error("Cannot find key for item, use the item-key prop and pass a function or string");return k(ct,{key:n,index:i},{default:()=>{var a,l;return(l=(a=this.$slots).item)===null||l===void 0?void 0:l.call(a,{item:s,index:i})}})}})):k(this.tag,(e=(t=this.$slots).default)===null||e===void 0?void 0:e.call(t))}}),zt=I({props:{tag:{type:String,default:"span"}},mounted(){this.$el.sortableHandle=!0},render(){var t,e;return k(this.tag,(e=(t=this.$slots).default)===null||e===void 0?void 0:e.call(t))}}),Ht={key:0,d:"M30.336 12.547l-10.172-1.074L16 2.133l-4.164 9.34l-10.172 1.074l7.598 6.848L7.14 29.398L16 24.29l8.86 5.11l-2.122-10.004z",fill:"#ffaa00"},jt={key:1,d:"M16 2.125l-.906 2.063l-3.25 7.28l-7.938.845l-2.25.25l1.688 1.5l5.906 5.343l-1.656 7.813l-.469 2.187l1.969-1.125l6.906-4l6.906 4l1.969 1.125l-.469-2.187l-1.656-7.813l5.906-5.343l1.688-1.5l-2.25-.25l-7.938-.844l-3.25-7.281zm0 4.906l2.563 5.782l.25.53l.562.063l6.281.656l-4.687 4.22l-.438.405l.125.563l1.313 6.156l-5.469-3.125l-.5-.312l-.5.312l-5.469 3.125l1.313-6.156l.125-.563l-.438-.406l-4.687-4.218l6.281-.657l.563-.062l.25-.531z",fill:"#888888"},Ft=I({__name:"SynthFav",props:{url:{type:String,default:""}},setup(t){const s=ut("fav:"+t.url,!1);function i(n){s.value=!s.value,console.log(s.value)}return(n,a)=>(g(),b("svg",{onClick:a[0]||(a[0]=bt(l=>i(t.url),["stop","prevent"])),xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32"},[u(s)?(g(),b("path",Ht)):(g(),b("path",jt))]))}}),ft=t=>(xt("data-v-2d995d47"),t=t(),vt(),t),Vt=["src","alt"],Kt=ft(()=>h("div",{class:"flex-1"},null,-1)),Yt={class:"p-4 flex items-center justify-between w-full"},Xt={class:"text-md font-bold flex items-center gap-2 flex-1"},qt={class:"flex-1"},Ut=ft(()=>h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32"},[h("path",{d:"M4 7v2h24V7zm0 8v2h24v-2zm0 8v2h24v-2z",fill:"#888888"})],-1)),Jt=I({__name:"SynthCard",props:{off:{type:Boolean,default:!1},title:{type:String,default:""},description:{type:String,default:""},cover:{type:String,default:""},url:{type:String,default:""}},setup(t){const e=t,{checkAvailability:s,isFormOpen:i}=K(),n=x(null);rt(s,async l=>{try{(await fetch("https://corsproxy.io/?"+e.url)).status==200?n.value=!0:n.value=!1}catch{n.value=!1}});function a(){e.off?i.value=!i.value:window.open(e.url,"_blank")}return(l,c)=>{const f=yt("ClientOnly");return g(),b("button",{class:"flex flex-col text-left relative min-h-50 card p-0 bg-light-300 shadow-lg flex flex-col dark-bg-dark-300 -hover-translate-y-2px transition hover-shadow-xl rounded-xl overflow-hidden relative",onClick:a},[(g(),b("img",{key:t.title,height:"200",width:"1000",src:`/cover/${t.title.toLowerCase().split(" ").join("-")}.webp`,alt:`${t.title} illustration`},null,8,Vt)),Kt,h("div",Yt,[h("div",Xt,[h("div",qt,L(t.title),1),u(s)?(g(),b("div",{key:0,class:z(["w-2 h-2 rounded-full shadow-inset",{"bg-green-500":n.value===!0,"bg-red-500":n.value===!1}])},null,2)):M("",!0),C(f,null,{default:w(()=>[C(Ft,{class:"scale-70 w-10",url:t.url},null,8,["url"])]),_:1}),C(u(zt),{class:"scale-80 opacity-40 cursor-grab absolute top-2 right-2"},{default:w(()=>[Ut]),_:1})])])])}}});const Qt=wt(Jt,[["__scopeId","data-v-2d995d47"]]);const te={__name:"SynthList",setup(t){const{isAccessGranted:e}=K(),s=x(Dt);function i(n){return!e.value&&n>5}return(n,a)=>(g(),W(u(Gt),{class:"flex flex-wrap items-stretch gap-4 md-gap-6 m-2 lg-m-8",list:s.value,"onUpdate:list":a[0]||(a[0]=l=>s.value=l),axis:"xy","use-drag-handle":""},{default:w(()=>[(g(!0),b(_t,null,Tt(s.value,(l,c)=>(g(),W(u(ct),{class:"flex",style:{flex:"1 1 240px"},key:l.id,index:c},{default:w(()=>[(g(),W(Qt,{style:St({opacity:i(c)?.8:1}),title:l.title,description:l.description,cover:l.cover,url:l.url,key:l.id,off:i(c)},null,8,["style","title","description","cover","url","off"]))]),_:2},1032,["index"]))),128))]),_:1},8,["list"]))}};const ee=h("path",{d:"M7.219 5.781L5.78 7.22L14.563 16L5.78 24.781L7.22 26.22L16 17.437l8.781 8.782l1.438-1.438L17.437 16l8.782-8.781L24.78 5.78L16 14.563z",fill:"#888888"},null,-1),se=[ee],ie={key:0,class:"flex flex-col gap-4 max-w-45ch text-center"},ne={class:"text-3xl font-bold"},le=h("div",{class:"text-xl"},"Enjoy your web-synthesizers hub",-1),ae={class:"text-sm flex gap-2 justify-center"},oe=h("svg",{class:"absolute",xmlns:"http://www.w3.org/2000/svg",width:"100",height:"100",viewBox:"0 0 32 32"},[h("path",{d:"M16 4.688L3.781 16.905l1.438 1.407L16 7.53l10.781 10.782l1.438-1.407zm0 7L3.781 23.905l1.438 1.407L16 14.53l10.781 10.781l1.438-1.406z",fill:"#888888"})],-1),re=[oe],he={key:1,class:"flex flex-col gap-8 relative pt-8 items-center"},de={class:"text-center max-w-45ch",for:"email"},ce={class:"flex gap-4 flex-col w-full"},fe={class:"flex items-center gap-2"},ue=h("div",{class:"p-2 w-20 font-bold text-right"},"E-mail*",-1),pe={class:"flex items-center gap-2"},ge=h("div",{class:"p-2 w-20 font-bold text-right"},"Name",-1),me=["disabled"],be={class:"text-xs opacity-60 text-center max-w-45ch mx-auto"},ye={__name:"TheForm",setup(t){const{name:e,email:s,isValidEmail:i,isFormOpen:n,grantAccess:a,storedEmail:l,storedName:c,resetEmail:f,isAccessGranted:o}=K();function m(){window.scrollTo({top:0,left:0,behavior:"smooth"})}return(y,r)=>(g(),W($t,{name:"slide"},{default:w(()=>[h("div",{class:z(["z-10 min-h-40dvh bottom-0 right-0 left-0 bg-light-800 bg-opacity-80 backdrop-blur flex flex-col items-center gap-4 justify-center dark-bg-dark-200 dark-bg-opacity-80 p-8 shadow",{sticky:u(n)}])},[R((g(),b("svg",{class:"absolute top-4 right-4 text-4xl cursor-pointer",onClick:r[0]||(r[0]=d=>n.value=!1),xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 32 32"},se,512)),[[It,u(n)]]),u(o)?(g(),b("div",ie,[h("div",ne,"Hello, "+L(u(c))+"!",1),le,h("div",ae,[T(L(u(l)),1),h("span",{class:"opacity-20 hover-opacity-50 transition cursor-pointer",onClick:r[1]||(r[1]=(...d)=>u(f)&&u(f)(...d))},"Log out")]),h("div",{class:"flex justify-center cursor-pointer p-2 opacity-50 hover-opacity-100 transition",onClick:r[2]||(r[2]=d=>m())},re)])):(g(),b("div",he,[h("label",de,[A(y.$slots,"default")]),h("div",ce,[h("label",fe,[ue,R(h("input",{class:"flex-1 p-4 md-p-4 rounded-xl bg-light-200 shadow-md dark-bg-dark-400 flex-1",ref:"target",maxlength:"30","onUpdate:modelValue":r[3]||(r[3]=d=>X(s)?s.value=d:null),id:"email",name:"email",type:"email",onKeydown:r[4]||(r[4]=q(d=>u(a)(),["enter"])),placeholder:"your@gmail.com"},null,544),[[Y,u(s)]])]),h("label",pe,[ge,R(h("input",{class:"flex-1 p-4 md-p-4 rounded-xl bg-light-200 shadow-md dark-bg-dark-400","onUpdate:modelValue":r[5]||(r[5]=d=>X(e)?e.value=d:null),id:"name",name:"name",type:"text",onKeydown:r[6]||(r[6]=q(d=>u(a)(),["enter"])),placeholder:"optional"},null,544),[[Y,u(e)]])]),h("button",{class:z(["text-sm md-text-md p-4 font-bold md-p-4 rounded-xl shadow-xl hover-shadow-2xl transition -hover-translate-y-2px active-translate-y-0 active-shadow-md bg-green-400 dark-bg-green-700",{"grayscale-50":!u(i)}]),onClick:r[7]||(r[7]=d=>u(a)()),disabled:!u(i)},[A(y.$slots,"button",{},()=>[T("GET ACCESS")])],10,me)]),h("div",be,[A(y.$slots,"notice",{},()=>[T("Your access status will be saved per device and you won't need to enter your e-mail again.")])])]))],2)]),_:3}))}},xe={class:"bg-light-300 dark-bg-dark-700 dark-text-light-200 text-center line-height-loose text-md py-16"},ve={class:"mx-auto max-w-75ch intro md-text-lg"},we={key:0,class:"p-2 flex flex-col mt-8"},_e={class:"text-4xl font-bold"},Te=h("div",{class:"text-lg"},"web synths",-1),Se={key:1,class:"p-2 flex flex-col mt-8"},Ie={class:"text-4xl font-bold"},$e=h("div",{class:"text-lg"},"web musicians",-1),Ce={__name:"AboutUs",props:{synths:{type:Number,default:30}},setup(t){const e=x(),s=x([]),i=ot(()=>s.value.length),n=pt(i);ht(()=>{fetch("https://corsproxy.io/?https://db.chromatone.center/items/players?limit=-1").then(o=>o.json()).then(({data:o})=>s.value=o)});const a=gt(e),{share:l,isSupported:c}=mt();function f(){l({title:"Web synths collection",text:"Look at this online synthesizer collection. No need to install anything - just your browser and any MIDI controller will do.",url:location.href})}return(o,m)=>(g(),b("div",xe,[h("div",ve,[A(o.$slots,"default"),h("div",{class:"flex justify-center",ref_key:"counters",ref:e},[u(a)?(g(),b("div",we,[h("div",_e,L(t.synths),1),Te])):M("",!0),u(a)&&i.value>0?(g(),b("div",Se,[h("div",Ie,L(u(n).toFixed())+"+",1),$e])):M("",!0)],512),u(c)?(g(),b("button",{key:0,class:"text-white py-2 px-4 mt-6 shadow-lg rounded-lg cursor-pointer bg-green-600 -hover-translate-y-2px transition",onClick:m[0]||(m[0]=y=>f())},"Share now to save for later")):M("",!0)])]))}},ke=h("h2",{class:"text-lg font-bold"},"Welcome to our free web synth collection!",-1),Oe=h("p",null,[h("a",{href:"https://playtronica.com",target:"_blank",rel:"noopener"},"Playtronica"),T(" is a digital playground that explores the possibilities of the material world through technology, creating gadgets that make the world musical. "),h("a",{href:"https://chromatone.center",target:"_blank",rel:"noopener"},"Chromatone"),T(" is a visual language for music education, research, and performance. We share our passion for web-based music instruments. Welcome to the community!")],-1),Ne=JSON.parse('{"title":"Web synths","description":"Web synthesizers to play with MIDI controllers","frontmatter":{"title":"Web synths","description":"Web synthesizers to play with MIDI controllers","date":"2023-06-22T00:00:00.000Z","layout":"home"},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1692108519000}'),Ee={name:"index.md"},Me=Object.assign(Ee,{setup(t){return(e,s)=>(g(),b("div",null,[C(te),C(Ce,null,{default:w(()=>[ke,Oe]),_:1}),C(ye,null,{button:w(()=>[T("JOIN THE COMMUNITY")]),notice:w(()=>[T("Your access status will be saved per device and you won't need to enter your e-mail again.")]),default:w(()=>[T(" We are building a community of web-based musicians. Type in your e-mail to instantly get full access to the collection and occasionally receive community updates. ")]),_:1})]))}});export{Ne as __pageData,Me as default}; diff --git a/assets/index.md.be2b63f2.js b/assets/index.md.be2b63f2.js new file mode 100644 index 00000000..f91810df --- /dev/null +++ b/assets/index.md.be2b63f2.js @@ -0,0 +1 @@ +import{u as oe,a as fe,b as pe,c as me,d as ge}from"./chunks/theme.10ba8259.js";import{r as v,b as le,w as re,f as de,h as I,a2 as O,i as m,j as b,u as f,a0 as be,I as ye,B as d,p as D,l as G,x as N,M as C,v as w,C as ve,D as xe,_ as we,q as P,J as _e,K as Te,S as Se,a3 as q,a4 as Ie,m as T,k as A,a5 as K,a6 as U,Z as Y,T as ke}from"./chunks/framework.7c22cbc0.js";const $=v(!1),X=v(!1),Ce=v(!1),W=oe("storedEmail",""),j=oe("storedName",""),B=v(!1),k=v(""),R=v(""),Oe=le(()=>he(k.value)),J=v(!1);function he(e){return/^[^@]+@\w+(\.\w+)+\w$/.test(e)}function $e(){W.value="",j.value="",B.value=!1,$.value=!1}function V(){return J.value||(re($,e=>{e&&(X.value=!1)}),de(()=>{W.value&&($.value=!0)}),J.value=!0),{isAccessGranted:$,isValidEmail:Oe,email:k,name:R,grantAccess:Ee,isSent:B,isFormOpen:X,checkAvailability:Ce,storedEmail:W,storedName:j,resetEmail:$e}}async function Ee(){if(!(!k.value&&!he(k.value))&&($.value=!0,!B.value)){B.value=!0;try{const e={email:k.value,name:R.value.slice(0,30)};W.value=k.value,j.value=R.value;const t=await fetch("https://db.chromatone.center/flows/trigger/f36a3461-c476-4ce5-88c9-eba2216083b0",{method:"POST",mode:"cors",cache:"no-cache",credentials:"same-origin",headers:{"Content-Type":"application/json"},redirect:"follow",referrerPolicy:"no-referrer",body:JSON.stringify(e)});console.log(t==null?void 0:t.json())}catch(e){console.error(e)}}}const De=JSON.parse(`[{"id":1,"status":"published","sort":1,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.730Z","title":"Dotpiano","url":"https://dotpiano.com/","cover":"fd81d5c3-4cb6-41eb-9689-d5f7aba2b8a6","tags":null,"content":null,"decription":null},{"id":3,"status":"published","sort":3,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.748Z","title":"TouchME by Chromatone","url":"https://touchme.chromatone.center/","cover":"6e97f4ab-c2f7-4e90-9c26-7518dbfddb3a","tags":null,"content":null,"decription":null},{"id":14,"status":"published","sort":4,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.765Z","title":"Juno-106","url":"http://juno-106.js.org/","cover":"d4fad441-c1a0-4ccc-9c0d-d8bfb79f9094","tags":null,"content":null,"decription":null},{"id":26,"status":"published","sort":5,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.816Z","title":"Learning synths with Ableton","url":"https://learningsynths.ableton.com/","cover":"f5c81f00-fc0e-40ad-96ce-a1834709253a","tags":null,"content":null,"decription":null},{"id":30,"status":"published","sort":5,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.800Z","title":"DX7 Synth","url":"https://mmontag.github.io/dx7-synth-js/","cover":"01eacfd8-892d-41de-b928-50b686a87400","tags":null,"content":null,"decription":null},{"id":32,"status":"published","sort":5,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.784Z","title":"Sampler synth","url":"https://play.playtronica.com/","cover":"749cb332-eb5e-40c6-bb36-fb87bb25a834","tags":null,"content":null,"decription":null},{"id":10,"status":"published","sort":6,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.837Z","title":"Websynths","url":"http://websynths.com/","cover":"072cf912-9966-4d3f-9823-36e75fb8ada9","tags":null,"content":null,"decription":null},{"id":19,"status":"published","sort":6,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.859Z","title":"Theremin","url":"https://www.femurdesign.com/theremin/","cover":"f4ca5ef9-132a-4e56-80fb-21bd0fd0b3f6","tags":null,"content":null,"decription":null},{"id":29,"status":"published","sort":6,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.891Z","title":"Elementary synth","url":"https://chromatone.center/practice/synth/elementary/","cover":"14f5d908-fba2-451f-8bec-a922cc5672c7","tags":null,"content":null,"decription":null},{"id":37,"status":"published","sort":6,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-21T14:18:48.099Z","title":"Sympathetic Synthesizer System Mk 1","url":"https://stuartmemo.com/synth/","cover":"9186b1e4-9929-492e-94eb-32a04aa523c8","tags":["keyboard","midi","additive"],"content":null,"decription":null},{"id":22,"status":"published","sort":7,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.875Z","title":"Disco-computer","url":"http://www.disco-computer.com/synthesizer/synth.html","cover":"1ac14701-0530-4ca6-b516-45d5f9523819","tags":null,"content":null,"decription":null},{"id":31,"status":"published","sort":12,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.906Z","title":"Video Sampler","url":"https://seeing-sound.netlify.app/","cover":"a4e5d9b7-1b64-4c31-aed4-467e2c6cba32","tags":null,"content":null,"decription":null},{"id":34,"status":"published","sort":12,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-21T14:00:50.309Z","title":"Fluoresynth by Electric Telepathy","url":"https://electrictelepathy.com/web-apps/fluoresynth/","cover":"d9c0dc12-ede0-49df-aef2-2517fd6ed961","tags":["midi","keyboard"],"content":"## How to play Fluoresynth\\n\\nThere are 3 ways to play notes with Fluoresynth:\\n\\n- Click or tap the onscreen keyboard.\\n- Play with the bottom two rows of keys on your computer keyboard (z, s, x, d, c, v, g, b, h, n, j, m, etc.)\\n- Plug in a MIDI keyboard/device to your computer. MIDI supported in Chrome and Opera.\\n\\nThis app may not load or play sound in older web browsers and operating systems. Audio may sound choppy on low-performance devices.","decription":null},{"id":27,"status":"published","sort":14,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.918Z","title":"Viktor NV-1","url":"http://nicroto.github.io/viktor/","cover":"1c104eeb-dc14-4d3b-bb8e-14accb2184c3","tags":null,"content":null,"decription":null},{"id":35,"status":"published","sort":18,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-21T14:05:27.437Z","title":"VirtualPiano.eu","url":"https://virtualpiano.eu/","cover":"e3f86bf5-68a9-4e0c-bb67-d0f31c26365b","tags":["midi","keyboard"],"content":"VirtualPiano.eu is the online synthesizer that allows you to play 128 musical instruments for free using your PC keyboard, the mouse or by connecting an external MIDI keyboard.\\n\\nYou can adjust Volume, Reverb, Loop and quality. Use the sustain and adjust the octaves, you can also select and set different channels including the one for the drums.\\n\\nCreate your own melodies, have fun playing or use VirtualPiano to learn how to play the Piano online on your own. ","decription":"Professional GM mapped WebAudio Piano Synthesizer Engine / MIDI Player"},{"id":36,"status":"published","sort":20,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-21T14:14:48.036Z","title":"Online sequencer","url":"https://onlinesequencer.net/","cover":"d55b5de1-f912-432f-a4e5-8c601643ecb9","tags":["sequencer"],"content":"**Online Sequencer** is a web-based music sequencer that allows users to create music saved online, or on their computer. The piano roll is essential to the sequencer, which is on the left of the screen, with 72 notes from C2-B7 (labelled differently from a piano, C2 on the sequencer corresponds to C1 on a piano). In addition to several parameters which can be modified to change the sound of the music, additional functionality can be accessed via the console.\\n\\nUpon opening the site, users can begin composing and \\"drawing\\" notes on the grid, with the default instrument being Electric Piano. By default, a sequence's time signature is set to 4/4, and the grid spacing is set to 1/4 (16 notes per measure). The note lengths can be adjusted by dragging the dark tab on the right of each note, and precision can be afforded by changing the 'Grid' option to other note divisions. \\n\\n## History\\n\\nOnline Sequencer was created on January 2, 2013 by Jacob Morgan during a break at Georgia Tech.\\n\\nBeginning in the fall of 2013, accounts were available but were separate from the music portion of the site. They were only used in the forum and the website chat.\\n\\nIn 2015, accounts were linked to the main website and allowed songs to be saved under someone's username.\\n\\nThe World Update in 2018 added several new instruments and changed the landscape of sound design on the site. The \\"World Update Contest\\" was held for the update.\\n\\nStarting in late 2020, OS began to receive a variety of updates which vastly improved the functionality of the site. These updates introduced features like custom grid sizes, automation with markers, extra reverb options, detune, and distortion. In 2021, the \\"Space Race\\" contest was held, as to see who could work best with the changes.\\n\\nIn late 2022, newer, higher-quality instruments were added. Some of the instruments, such as Electric Piano, Grand Piano, Violin, and Cello got an updated sustained version, while the original versions still exist under the \\"classic\\" designation.\\n\\nCurrently, the 10-Year Anniversary Contest is being held.\\n\\n## Features\\n\\nWithin the editor, numerous user interface features allow for various changes which will impact the individual sequence on that page.\\n\\n### Basic features\\n\\nUI features include:\\n\\n- Tempo (10-999 BPM)\\n- Measure count or Time count (MM: SS.ssss)\\n- Time signature (2/4, 3/4, 4/4, 5/4)\\n- Grid size (This correlates to note divisions; 1/16, 1/12, 1/8, 1/6, 1/4, 1/3, 1/2)\\n- Auto Scroll (Fast, Smooth, Off; how the sequencer displays measures off-screen as a sequence plays)\\n- Add an Audio Track (This won't be saved to the sequence but will play alongside it for ease of transcription)\\n- Title input\\n- Draw, select, and erase\\n- Instrument dropdown, instrument options, and select instrument (selects all notes of the current instrument)\\n- Select all, Cut, Copy, and Paste\\n- Zoom options\\n- Export options\\n- Help\\n- Fullscreen\\n- Tooltips\\n\\n### Advanced features\\n\\nUsers can access more advanced features for use in their sequences by clicking the advanced tab on the instrument they wish to change. This menu contains options to change volume, panning, detune (-1200 to +1200), reverb, distortion, and an equalizer. This array lets users configure specific instruments to create specific sounds, and textures, or to accompany other instruments as a layer or development of the original sound.\\n\\nOS also allows for commands to be entered in the browser console to manipulate different options in specific ways, such as setting custom to detune values (0-infinity), custom grid sizes, note divisions, and sequence ID amongst other things. These options bring OS closer to that of classic Digital Audio Workstations (DAWs) but are still limited in terms of accessibility and availability.\\n\\n### Browser and device support\\n\\nOnline Sequencer supports Chrome and other Chromium-based browsers, such as Microsoft Edge, Opera, and Brave. Firefox is also supported, but often with limited functionality. Safari and Internet Explorer are not supported, due to engine issues.\\n\\nOther mobile browsers support sequence playback, but not editing. However, iOS users have the same problem with WebKit on macOS. However, unlike in macOS, all browsers (even Chromium-based browsers) use WebKit as the engine for iOS due to Apple prohibiting other engines for security reasons; iOS does not support Online Sequencer, other than chat and forums.\\n\\nThe website's user interface is formatted for proper use on desktops, but some pages such as the chat page, playlists, and forums should be formatted well on mobile devices. ","decription":"OnlineSequencer.net is an online music sequencer. Make tunes in your browser and share "},{"id":17,"status":"published","sort":30,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.930Z","title":"Sound Trap","url":"https://www.soundtrap.com/","cover":"328c8c51-e7d4-48bd-9c3d-6dea5184cad5","tags":null,"content":null,"decription":null},{"id":6,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.181Z","title":"MIDI–driven Web Audio","url":"https://webaudiodemos.appspot.com/midi-synth/index.html","cover":"f268f0dc-b091-4799-885b-0a5eecfdcbec","tags":null,"content":null,"decription":null},{"id":8,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.088Z","title":"Meet the Heisenberg","url":"https://www.audiotool.com/product/device/heisenberg/","cover":"88c6fe9d-033c-4aac-a946-278e729e5f05","tags":null,"content":null,"decription":null},{"id":9,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.141Z","title":"Cardboard Synth","url":"https://www.gsn-lib.org/apps/cardboardsynth/index.html","cover":"3406a3fa-5e4d-4efc-a5ac-c6c8ee3abf72","tags":null,"content":null,"decription":null},{"id":11,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.126Z","title":"Tanguy synth","url":"http://tanguysynth.com/","cover":"16a499c4-661f-48b5-b308-dd7ea77f335d","tags":null,"content":null,"decription":null},{"id":12,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.109Z","title":"MOD synth","url":"http://mod-synth.io/","cover":"dd13c72f-d1ee-4197-b8a2-f24c162d5858","tags":null,"content":null,"decription":null},{"id":13,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.076Z","title":"OLIF SY1K","url":"http://perso.numericable.fr/olivier.friker/synth/O3-synth%20V1.3.html","cover":"44234157-4872-4e35-baec-a7d073a7258d","tags":null,"content":null,"decription":null},{"id":15,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.059Z","title":"Note Sculptor","url":"http://www.noisesculptor.com/","cover":"3b9d921b-79da-4923-9cd2-bbc826561a93","tags":null,"content":null,"decription":null},{"id":16,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.159Z","title":"WebAudioSynth V2","url":"http://aikelab.net/websynthv2/","cover":"7980d0af-e534-4383-a36c-0b116a06499e","tags":null,"content":null,"decription":null},{"id":18,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.944Z","title":"Samplestich","url":"http://samplestitch.com.s3-website-us-east-1.amazonaws.com/","cover":"0f272d97-7882-4797-9890-97c3b75149a4","tags":null,"content":null,"decription":null},{"id":20,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.032Z","title":"Omni","url":"https://femurdesign.com/omni/","cover":"82c94f42-0449-45ea-924d-7365ba51af20","tags":null,"content":null,"decription":null},{"id":21,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.016Z","title":"Web Modular","url":"https://www.g200kg.com/docs/webmodular/","cover":"5bb158d2-cfcc-46d9-acd5-6cf3312d7678","tags":null,"content":null,"decription":null},{"id":23,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.000Z","title":"Online sequencer","url":"https://onlinesequencer.net/369477","cover":"efdc67a4-4cfc-4a4b-a704-1b939fbe7fc4","tags":null,"content":null,"decription":null},{"id":24,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.987Z","title":"PixelSynth","url":"https://ojack.github.io/PIXELSYNTH/","cover":"59ec0d0b-6bcf-4c50-8d76-5fe624105c0c","tags":null,"content":null,"decription":null},{"id":25,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.970Z","title":"Acid Machine 2","url":"http://errozero.co.uk/acid-machine/","cover":"380cdb0d-4a68-44a7-b24c-2b655f26ebcd","tags":null,"content":null,"decription":null},{"id":28,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.958Z","title":"WebSID Commodore 64","url":"http://www.igorski.nl/experiment/websid","cover":"e39565a0-15fa-4c3a-9bc7-aa5a613dd19f","tags":null,"content":null,"decription":null}]`),Le=I({inject:["manager"],props:{index:{type:Number,required:!0},disabled:{type:Boolean,default:!1}},data(){return{}},watch:{index(e){this.$el&&this.$el.sortableInfo&&(this.$el.sortableInfo.index=e)},disabled(e){e?this.removeDraggable():this.setDraggable(this.index)}},mounted(){const{disabled:e,index:t}=this.$props;e||this.setDraggable(t)},beforeUnmount(){this.disabled||this.removeDraggable()},methods:{setDraggable(e){const t=this.$el;t.sortableInfo={index:e,manager:this.manager},this.ref={node:t},this.manager.add(this.ref)},removeDraggable(){this.manager.remove(this.ref)}}});class Me{constructor(){this.refs=[],this.active=null}add(t){this.refs||(this.refs=[]),this.refs.push(t)}remove(t){const s=this.getIndex(t);s!==-1&&this.refs.splice(s,1)}isActive(){return!!this.active}getActive(){return this.refs.find(({node:t})=>{var s,i;return((s=t==null?void 0:t.sortableInfo)===null||s===void 0?void 0:s.index)==((i=this===null||this===void 0?void 0:this.active)===null||i===void 0?void 0:i.index)})||null}getIndex(t){return this.refs.indexOf(t)}getRefs(){return this.refs}getOrderedRefs(){return this.refs.sort((t,s)=>t.node.sortableInfo.index-s.node.sortableInfo.index)}}const E=e=>e.touches!=null;function F(e,t){return!!e&&Object.prototype.hasOwnProperty.call(e,t)}function Ne(e,t,s){const i=e.slice(0);if(s>=i.length){let n=s-i.length;for(;n--+1;)i.push(void 0)}return i.splice(s,0,i.splice(t,1)[0]),i}function Pe(e,t){const s=e.slice(0);return t>=s.length||s.splice(t,1),s}function Ae(e,t,s){const i=e.slice(0);return t===i.length?i.push(s):i.splice(t,0,s),i}const _={start:["touchstart","mousedown"],move:["touchmove","mousemove"],end:["touchend","mouseup"],cancel:["touchcancel","keyup"]};function Q(e,t){for(;e;){if(t(e))return e;e=e.parentNode}}function ee(e,t,s){return st?t:s}function L(e){return e.substr(-2)==="px"?parseFloat(e):0}function te(e){const t=window.getComputedStyle(e);return{top:L(t.marginTop),right:L(t.marginRight),bottom:L(t.marginBottom),left:L(t.marginLeft)}}function M(e,t="page"){const s=`${t}X`,i=`${t}Y`;return{x:E(e)?e.touches[0][s]:e[s],y:E(e)?e.touches[0][i]:e[i]}}function se(e){const t=[e];for(;e;e=e.offsetParent)t.unshift(e);return t}function We(e,t){const s=se(e),i=se(t);if(s[0]!=i[0])throw"No common ancestor!";for(let n=0;n{n.type!=="file"&&t[o]&&(n.value=t[o].value)}),s}function Be(e,t,s){if(typeof e=="string"&&(e=+e),Array.isArray(e)||(e=[e,e]),e.length!==2)throw new Error(`lockOffset prop of SortableContainer should be a single value or an array of exactly two values. Given ${e}`);const[i,n]=e;return[ne(i,t,s),ne(n,t,s)]}function ne(e,t,s){let i=e,n=e,o="px";if(typeof e=="string"){const a=/^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(e);if(a===null)throw new Error(`lockOffset value should be a number or a string of a number followed by "px" or "%". Given ${e}`);i=n=parseFloat(e),o=a[1]}if(!isFinite(i)||!isFinite(n))throw new Error(`lockOffset value should be a finite. Given ${e}`);return o==="%"&&(i=i*t/100,n=n*s/100),{x:i,y:n}}function ae(e=[]){for(let t=0,s=e.length;t[]},lockAxis:{type:String,default:""},helperClass:{type:String,default:""},contentWindow:{type:Object,default:null},shouldCancelStart:{type:Function,default:e=>["input","textarea","select","option","button"].indexOf(e.target.tagName.toLowerCase())!==-1},getHelperDimensions:{type:Function,default:({node:e})=>({width:e.offsetWidth,height:e.offsetHeight})}},emits:["sort-start","sort-move","sort-end","sort-cancel","sort-insert","sort-remove","update:list"],data(){let e=!1;return this.group&&this.SlicksortHub&&(e=!0),{sorting:!1,hub:e?this.SlicksortHub:null,manager:new Me}},mounted(){this.hub&&(this.id=this.hub.getId()),this.container=this.$el,this.document=this.container.ownerDocument||document,this._window=this.contentWindow||window,this.scrollContainer=this.useWindowAsScrollContainer?{scrollLeft:0,scrollTop:0}:this.container,this.events={start:this.handleStart,move:this.handleMove,end:this.handleEnd};for(const e in this.events)F(this.events,e)&&_[e].forEach(t=>this.container.addEventListener(t,this.events[e]));this.hub&&this.hub.addContainer(this)},beforeUnmount(){for(const e in this.events)F(this.events,e)&&_[e].forEach(t=>this.container.removeEventListener(t,this.events[e]));this.hub&&this.hub.removeContainer(this),this.dragendTimer&&clearTimeout(this.dragendTimer),this.cancelTimer&&clearTimeout(this.cancelTimer),this.pressTimer&&clearTimeout(this.pressTimer),this.autoscrollInterval&&clearInterval(this.autoscrollInterval)},methods:{handleStart(e){const{distance:t,shouldCancelStart:s}=this.$props;if(!E(e)&&e.button===2||s(e))return!1;this._touched=!0,this._pos=M(e);const i=e.target,n=Q(i,o=>o.sortableInfo!=null);if(n&&n.sortableInfo&&this.nodeIsChild(n)&&!this.sorting){const{useDragHandle:o}=this.$props,{index:a}=n.sortableInfo;if(o&&!Q(i,c=>c.sortableHandle!=null))return;this.manager.active={index:a},i.tagName.toLowerCase()==="a"&&e.preventDefault(),t||(this.pressDelay===0?this.handlePress(e):this.pressTimer=z(()=>this.handlePress(e),this.pressDelay))}},nodeIsChild(e){return e.sortableInfo.manager===this.manager},handleMove(e){const{distance:t,pressThreshold:s}=this.$props;if(!this.sorting&&this._touched){const i=M(e);this._delta={x:this._pos.x-i.x,y:this._pos.y-i.y};const n=Math.abs(this._delta.x)+Math.abs(this._delta.y);!t&&(!s||s&&n>=s)?(this.cancelTimer&&clearTimeout(this.cancelTimer),this.cancelTimer=z(this.cancel,0)):t&&n>=t&&this.manager.isActive()&&this.handlePress(e)}},handleEnd(){if(!this._touched)return;const{distance:e}=this.$props;this._touched=!1,e||this.cancel()},cancel(){this.sorting||(this.pressTimer&&clearTimeout(this.pressTimer),this.manager.active=null,this.hub&&this.hub.cancel())},handleSortCancel(e){(E(e)||e.key===this.cancelKey)&&(this.newIndex=this.index,this.canceling=!0,this.translate={x:0,y:0},this.animateNodes(),this.handleSortEnd(e))},handlePress(e){e.stopPropagation();const t=this.manager.getActive();if(t){const{getHelperDimensions:s,helperClass:i,hideSortableGhost:n,appendTo:o}=this.$props,{node:a}=t,{index:c}=a.sortableInfo,u=te(a),l=this.container.getBoundingClientRect(),g=s({index:c,node:a});this.node=a,this.margin=u,this.width=g.width,this.height=g.height,this.marginOffset={x:this.margin.left+this.margin.right,y:Math.max(this.margin.top,this.margin.bottom)},this.boundingClientRect=a.getBoundingClientRect(),this.containerBoundingRect=l,this.index=c,this.newIndex=c;const y=ie(a);this.helper=this.document.querySelector(o).appendChild(y),this.helper.style.position="fixed",this.helper.style.top=`${this.boundingClientRect.top-u.top}px`,this.helper.style.left=`${this.boundingClientRect.left-u.left}px`,this.helper.style.width=`${this.width}px`,this.helper.style.height=`${this.height}px`,this.helper.style.boxSizing="border-box",this.helper.style.pointerEvents="none",n&&(this.sortableGhost=a,a.style.visibility="hidden",a.style.opacity="0"),this.hub&&(this.hub.sortStart(this),this.hub.helper=this.helper,this.hub.ghost=this.sortableGhost),this.intializeOffsets(e,this.boundingClientRect),this.offsetEdge=S(a,this.container),i&&this.helper.classList.add(...i.split(" ")),this.listenerNode=E(e)?a:this._window,_.move.forEach(r=>this.listenerNode.addEventListener(r,this.handleSortMove)),_.end.forEach(r=>this.listenerNode.addEventListener(r,this.handleSortEnd)),_.cancel.forEach(r=>this.listenerNode.addEventListener(r,this.handleSortCancel)),this.sorting=!0,this.$emit("sort-start",{event:e,node:a,index:c})}},handleSortMove(e){if(e.preventDefault(),this.updatePosition(e),this.hub){const t=this.list[this.index];this.hub.handleSortMove(e,t)}(!this.hub||this.hub.isDest(this))&&(this.animateNodes(),this.autoscroll()),this.$emit("sort-move",{event:e})},handleDropOut(){const e=this.list[this.index],t=Pe(this.list,this.index);return this.$emit("sort-remove",{oldIndex:this.index}),this.$emit("update:list",t),e},handleDropIn(e){const t=Ae(this.list,this.newIndex,e);this.$emit("sort-insert",{newIndex:this.newIndex,value:e}),this.$emit("update:list",t),this.handleDragEnd()},handleDragOut(){this.autoscrollInterval&&(clearInterval(this.autoscrollInterval),this.autoscrollInterval=null),this.hub.isSource(this)?(this.translate={x:1e4,y:1e4},this.animateNodes()):(this.manager.getRefs().forEach(e=>{e.node.style.transform=""}),this.dragendTimer=z(this.handleDragEnd,this.transitionDuration||0))},handleDragEnd(){this.autoscrollInterval&&(clearInterval(this.autoscrollInterval),this.autoscrollInterval=null),ae(this.manager.getRefs()),this.sortableGhost&&(this.sortableGhost.remove(),this.sortableGhost=null),this.dragendTimer&&(clearTimeout(this.dragendTimer),this.dragendTimer=null),this.manager.active=null,this._touched=!1,this.sorting=!1},intializeOffsets(e,t){const{useWindowAsScrollContainer:s,containerBoundingRect:i,_window:n}=this;this.marginOffset={x:this.margin.left+this.margin.right,y:Math.max(this.margin.top,this.margin.bottom)},this._axis={x:this.axis.indexOf("x")>=0,y:this.axis.indexOf("y")>=0},this.initialOffset=M(e),this.initialScroll={top:this.scrollContainer.scrollTop,left:this.scrollContainer.scrollLeft},this.initialWindowScroll={top:window.pageYOffset,left:window.pageXOffset},this.translate={x:0,y:0},this.minTranslate={},this.maxTranslate={},this._axis.x&&(this.minTranslate.x=(s?0:i.left)-t.left-this.width/2,this.maxTranslate.x=(s?n.innerWidth:i.left+i.width)-t.left-this.width/2),this._axis.y&&(this.minTranslate.y=(s?0:i.top)-t.top-this.height/2,this.maxTranslate.y=(s?n.innerHeight:i.top+i.height)-t.top-this.height/2)},handleDragIn(e,t,s){if(this.hub.isSource(this))return;this.dragendTimer&&(this.handleDragEnd(),clearTimeout(this.dragendTimer),this.dragendTimer=null);const i=this.manager.getRefs();this.index=i.length,this.manager.active={index:this.index};const n=this.container.getBoundingClientRect(),o=s.getBoundingClientRect();this.containerBoundingRect=n,this.sortableGhost=ie(t),this.container.appendChild(this.sortableGhost);const a=this.sortableGhost.getBoundingClientRect();this.boundingClientRect=a,this.margin=te(this.sortableGhost),this.width=a.width,this.height=a.height,this.offsetEdge=S(this.sortableGhost,this.container),this.intializeOffsets(e,a),this.initialOffset.x+=a.x-o.x,this.initialOffset.y+=a.y-o.y,this.sorting=!0},handleSortEnd(e){this.listenerNode&&(_.move.forEach(i=>this.listenerNode.removeEventListener(i,this.handleSortMove)),_.end.forEach(i=>this.listenerNode.removeEventListener(i,this.handleSortEnd)),_.cancel.forEach(i=>this.listenerNode.removeEventListener(i,this.handleSortCancel)));const t=this.manager.getRefs();this.helper&&this.helperClass&&this.helper.classList.remove(...this.helperClass.split(" ")),this.autoscrollInterval&&clearInterval(this.autoscrollInterval),this.autoscrollInterval=null;const s=()=>{this.helper&&(this.helper.remove(),this.helper=null),this.hideSortableGhost&&this.sortableGhost&&(this.sortableGhost.style.visibility="",this.sortableGhost.style.opacity=""),ae(t),this.hub&&!this.hub.isDest(this)?this.canceling?this.hub.cancel():this.hub.handleSortEnd():this.canceling?this.$emit("sort-cancel",{event:e}):(this.$emit("sort-end",{event:e,oldIndex:this.index,newIndex:this.newIndex}),this.$emit("update:list",Ne(this.list,this.index,this.newIndex))),this.manager.active=null,this._touched=!1,this.canceling=!1,this.sorting=!1};this.transitionDuration||this.draggedSettlingDuration?this.transitionHelperIntoPlace(t,s):s()},transitionHelperIntoPlace(e,t){if(this.draggedSettlingDuration===0||e.length===0||!this.helper)return Promise.resolve();const s=e[this.index].node;let i=0,n=0;const o={top:window.pageYOffset-this.initialWindowScroll.top,left:window.pageXOffset-this.initialWindowScroll.left};if(this.hub&&!this.hub.isDest(this)&&!this.canceling){const l=this.hub.getDest();if(!l)return;const g=l.newIndex,y=l.manager.getOrderedRefs(),r=g0?i+=l.offsetLeft+l.offsetWidth-(s.offsetLeft+s.offsetWidth):i+=l.offsetLeft-s.offsetLeft,n=-g.top,this.translate&&this.translate.y>0?n+=l.offsetTop+l.offsetHeight-(s.offsetTop+s.offsetHeight):n+=l.offsetTop-s.offsetTop}const a=this.draggedSettlingDuration!==null?this.draggedSettlingDuration:this.transitionDuration;H(this.helper,`translate3d(${i}px,${n}px, 0)`,`${a}ms`);const c=l=>{(!l||l.propertyName==="transform")&&(clearTimeout(u),H(this.helper),t())},u=setTimeout(c,a+10);this.helper.addEventListener("transitionend",c)},updatePosition(e){const{lockAxis:t,lockToContainerEdges:s}=this.$props,i=M(e),n={x:i.x-this.initialOffset.x,y:i.y-this.initialOffset.y};if(n.y-=window.pageYOffset-this.initialWindowScroll.top,n.x-=window.pageXOffset-this.initialWindowScroll.left,this.translate=n,s){const[o,a]=Be(this.lockOffset,this.height,this.width),c={x:this.width/2-o.x,y:this.height/2-o.y},u={x:this.width/2-a.x,y:this.height/2-a.y};this.minTranslate.x&&this.maxTranslate.x&&(n.x=ee(this.minTranslate.x+c.x,this.maxTranslate.x-u.x,n.x)),this.minTranslate.y&&this.maxTranslate.y&&(n.y=ee(this.minTranslate.y+c.y,this.maxTranslate.y-u.y,n.y))}t==="x"?n.y=0:t==="y"&&(n.x=0),this.helper&&(this.helper.style.transform=`translate3d(${n.x}px,${n.y}px, 0)`)},animateNodes(){const{transitionDuration:e,hideSortableGhost:t}=this.$props,s=this.manager.getOrderedRefs(),i={left:this.scrollContainer.scrollLeft-this.initialScroll.left,top:this.scrollContainer.scrollTop-this.initialScroll.top},n={left:this.offsetEdge.left+this.translate.x+i.left,top:this.offsetEdge.top+this.translate.y+i.top},o={top:window.pageYOffset-this.initialWindowScroll.top,left:window.pageXOffset-this.initialWindowScroll.left};this.newIndex=null;for(let a=0,c=s.length;ag?g/2:this.width/2,height:this.height>y?y/2:this.height/2},h={x:0,y:0};let{edgeOffset:p}=s[a];p||(s[a].edgeOffset=p=S(u,this.container));const x=a0&&s[a-1];if(x&&!x.edgeOffset&&(x.edgeOffset=S(x.node,this.container)),l===this.index){t&&(this.sortableGhost=u,u.style.visibility="hidden",u.style.opacity="0");continue}e&&(u.style.transitionDuration=`${e}ms`),this._axis.x?this._axis.y?lthis.containerBoundingRect.width-r.width&&x&&(h.x=x.edgeOffset.left-p.left,h.y=x.edgeOffset.top-p.top),this.newIndex===null&&(this.newIndex=l)):l>this.index&&(n.left+o.left+r.width>=p.left&&n.top+o.top+r.height>=p.top||n.top+o.top+r.height>=p.top+y)&&(h.x=-(this.width+this.marginOffset.x),p.left+h.xthis.index&&n.left+o.left+r.width>=p.left?(h.x=-(this.width+this.marginOffset.x),this.newIndex=l):lthis.index&&n.top+o.top+r.height>=p.top?(h.y=-(this.height+this.marginOffset.y),this.newIndex=l):l=this.maxTranslate.y-this.height/2?(t.y=1,s.y=i.y*Math.abs((this.maxTranslate.y-this.height/2-e.y)/this.height)):e.x>=this.maxTranslate.x-this.width/2?(t.x=1,s.x=i.x*Math.abs((this.maxTranslate.x-this.width/2-e.x)/this.width)):e.y<=this.minTranslate.y+this.height/2?(t.y=-1,s.y=i.y*Math.abs((e.y-this.height/2-this.minTranslate.y)/this.height)):e.x<=this.minTranslate.x+this.width/2&&(t.x=-1,s.x=i.x*Math.abs((e.x-this.width/2-this.minTranslate.x)/this.width)),this.autoscrollInterval&&(clearInterval(this.autoscrollInterval),this.autoscrollInterval=null),(t.x!==0||t.y!==0)&&(this.autoscrollInterval=window.setInterval(()=>{const n={left:1*s.x*t.x,top:1*s.y*t.y};this.useWindowAsScrollContainer?this._window.scrollBy(n.left,n.top):(this.scrollContainer.scrollTop+=n.top,this.scrollContainer.scrollLeft+=n.left),this.translate.x+=n.left,this.translate.y+=n.top,this.animateNodes()},5))}}}),ce=I({name:"SlickItem",mixins:[Le],props:{tag:{type:String,default:"div"}},render(){var e,t;return O(this.tag,(t=(e=this.$slots).default)===null||t===void 0?void 0:t.call(e))}}),qe=I({name:"SlickList",mixins:[Ze],props:{tag:{type:String,default:"div"},itemKey:{type:[String,Function],default:"id"}},render(){var e,t;return this.$slots.item?O(this.tag,this.list.map((s,i)=>{let n;if(s!=null){if(typeof this.itemKey=="function")n=this.itemKey(s);else if(typeof s=="object"&&F(s,this.itemKey)&&typeof s[this.itemKey]=="string")n=s[this.itemKey];else if(typeof s=="string")n=s;else throw new Error("Cannot find key for item, use the item-key prop and pass a function or string");return O(ce,{key:n,index:i},{default:()=>{var o,a;return(a=(o=this.$slots).item)===null||a===void 0?void 0:a.call(o,{item:s,index:i})}})}})):O(this.tag,(t=(e=this.$slots).default)===null||t===void 0?void 0:t.call(e))}}),ze=I({props:{tag:{type:String,default:"span"}},mounted(){this.$el.sortableHandle=!0},render(){var e,t;return O(this.tag,(t=(e=this.$slots).default)===null||t===void 0?void 0:t.call(e))}}),Ge={key:0,d:"M30.336 12.547l-10.172-1.074L16 2.133l-4.164 9.34l-10.172 1.074l7.598 6.848L7.14 29.398L16 24.29l8.86 5.11l-2.122-10.004z",fill:"#ffaa00"},Re={key:1,d:"M16 2.125l-.906 2.063l-3.25 7.28l-7.938.845l-2.25.25l1.688 1.5l5.906 5.343l-1.656 7.813l-.469 2.187l1.969-1.125l6.906-4l6.906 4l1.969 1.125l-.469-2.187l-1.656-7.813l5.906-5.343l1.688-1.5l-2.25-.25l-7.938-.844l-3.25-7.281zm0 4.906l2.563 5.782l.25.53l.562.063l6.281.656l-4.687 4.22l-.438.405l.125.563l1.313 6.156l-5.469-3.125l-.5-.312l-.5.312l-5.469 3.125l1.313-6.156l.125-.563l-.438-.406l-4.687-4.218l6.281-.657l.563-.062l.25-.531z",fill:"#888888"},Fe=I({__name:"SynthFav",props:{url:{type:String,default:""}},setup(e){const s=fe("fav:"+e.url,!1);function i(n){s.value=!s.value,console.log(s.value)}return(n,o)=>(m(),b("svg",{onClick:o[0]||(o[0]=be(a=>i(e.url),["stop","prevent"])),xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32"},[f(s)?(m(),b("path",Ge)):(m(),b("path",Re))]))}}),ue=e=>(ve("data-v-2d995d47"),e=e(),xe(),e),He=["src","alt"],je=ue(()=>d("div",{class:"flex-1"},null,-1)),Ve={class:"p-4 flex items-center justify-between w-full"},Ke={class:"text-md font-bold flex items-center gap-2 flex-1"},Ue={class:"flex-1"},Ye=ue(()=>d("svg",{xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32"},[d("path",{d:"M4 7v2h24V7zm0 8v2h24v-2zm0 8v2h24v-2z",fill:"#888888"})],-1)),Xe=I({__name:"SynthCard",props:{off:{type:Boolean,default:!1},title:{type:String,default:""},description:{type:String,default:""},cover:{type:String,default:""},url:{type:String,default:""}},setup(e){const t=e,{checkAvailability:s,isFormOpen:i}=V(),n=v(null);re(s,async a=>{try{(await fetch("https://corsproxy.io/?"+t.url)).status==200?n.value=!0:n.value=!1}catch{n.value=!1}});function o(){t.off?i.value=!i.value:window.open(t.url,"_blank")}return(a,c)=>{const u=ye("ClientOnly");return m(),b("button",{class:"flex flex-col text-left relative min-h-50 card p-0 bg-light-300 shadow-lg flex flex-col dark-bg-dark-300 -hover-translate-y-2px transition hover-shadow-xl rounded-xl overflow-hidden relative",onClick:o},[(m(),b("img",{key:e.title,height:"200",width:"1000",src:`/cover/${e.title.toLowerCase().split(" ").join("-")}.webp`,alt:`${e.title} illustration`},null,8,He)),je,d("div",Ve,[d("div",Ke,[d("div",Ue,D(e.title),1),f(s)?(m(),b("div",{key:0,class:G(["w-2 h-2 rounded-full shadow-inset",{"bg-green-500":n.value===!0,"bg-red-500":n.value===!1}])},null,2)):N("",!0),C(u,null,{default:w(()=>[C(Fe,{class:"scale-70 w-10",url:e.url},null,8,["url"])]),_:1}),C(f(ze),{class:"scale-80 opacity-40 cursor-grab absolute top-2 right-2"},{default:w(()=>[Ye]),_:1})])])])}}});const Je=we(Xe,[["__scopeId","data-v-2d995d47"]]);const Qe={__name:"SynthList",setup(e){const{isAccessGranted:t}=V(),s=v(De);function i(n){return!t.value&&n>5}return(n,o)=>(m(),P(f(qe),{class:"flex flex-wrap items-stretch gap-4 md-gap-6 m-2 lg-m-8",list:s.value,"onUpdate:list":o[0]||(o[0]=a=>s.value=a),axis:"xy","use-drag-handle":""},{default:w(()=>[(m(!0),b(_e,null,Te(s.value,(a,c)=>(m(),P(f(ce),{class:"flex",style:{flex:"1 1 240px"},key:a.id,index:c},{default:w(()=>[(m(),P(Je,{style:Se({opacity:i(c)?.8:1}),title:a.title,description:a.description,cover:a.cover,url:a.url,key:a.id,off:i(c)},null,8,["style","title","description","cover","url","off"]))]),_:2},1032,["index"]))),128))]),_:1},8,["list"]))}};const et=d("path",{d:"M7.219 5.781L5.78 7.22L14.563 16L5.78 24.781L7.22 26.22L16 17.437l8.781 8.782l1.438-1.438L17.437 16l8.782-8.781L24.78 5.78L16 14.563z",fill:"#888888"},null,-1),tt=[et],st={key:0,class:"flex flex-col gap-4 max-w-45ch text-center"},it={class:"text-3xl font-bold"},nt=d("div",{class:"text-xl"},"Enjoy your web-synthesizers hub",-1),at={class:"text-sm flex gap-2 justify-center"},ot=d("svg",{class:"absolute",xmlns:"http://www.w3.org/2000/svg",width:"100",height:"100",viewBox:"0 0 32 32"},[d("path",{d:"M16 4.688L3.781 16.905l1.438 1.407L16 7.53l10.781 10.782l1.438-1.407zm0 7L3.781 23.905l1.438 1.407L16 14.53l10.781 10.781l1.438-1.406z",fill:"#888888"})],-1),lt=[ot],rt={key:1,class:"flex flex-col gap-8 relative pt-8 items-center"},dt={class:"text-center max-w-45ch",for:"email"},ht={class:"flex gap-4 flex-col w-full"},ct={class:"flex items-center gap-2"},ut=d("div",{class:"p-2 w-20 font-bold text-right"},"E-mail*",-1),ft={class:"flex items-center gap-2"},pt=d("div",{class:"p-2 w-20 font-bold text-right"},"Name",-1),mt=["disabled"],gt={class:"text-xs opacity-60 text-center max-w-45ch mx-auto"},bt={__name:"TheForm",setup(e){const{name:t,email:s,isValidEmail:i,isFormOpen:n,grantAccess:o,storedEmail:a,storedName:c,resetEmail:u,isAccessGranted:l}=V();function g(){window.scrollTo({top:0,left:0,behavior:"smooth"})}return(y,r)=>(m(),P(ke,{name:"slide"},{default:w(()=>[d("div",{class:G(["z-10 min-h-40dvh bottom-0 right-0 left-0 bg-light-800 bg-opacity-80 backdrop-blur flex flex-col items-center gap-4 justify-center dark-bg-dark-200 dark-bg-opacity-80 p-8 shadow",{sticky:f(n)}])},[q((m(),b("svg",{class:"absolute top-4 right-4 text-4xl cursor-pointer",onClick:r[0]||(r[0]=h=>n.value=!1),xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 32 32"},tt,512)),[[Ie,f(n)]]),f(l)?(m(),b("div",st,[d("div",it,"Hello, "+D(f(c))+"!",1),nt,d("div",at,[T(D(f(a)),1),d("span",{class:"opacity-20 hover-opacity-50 transition cursor-pointer",onClick:r[1]||(r[1]=(...h)=>f(u)&&f(u)(...h))},"Log out")]),d("div",{class:"flex justify-center cursor-pointer p-2 opacity-50 hover-opacity-100 transition",onClick:r[2]||(r[2]=h=>g())},lt)])):(m(),b("div",rt,[d("label",dt,[A(y.$slots,"default")]),d("div",ht,[d("label",ct,[ut,q(d("input",{class:"flex-1 p-4 md-p-4 rounded-xl bg-light-200 shadow-md dark-bg-dark-400 flex-1",ref:"target",maxlength:"30","onUpdate:modelValue":r[3]||(r[3]=h=>U(s)?s.value=h:null),id:"email",name:"email",type:"email",onKeydown:r[4]||(r[4]=Y(h=>f(o)(),["enter"])),placeholder:"your@gmail.com"},null,544),[[K,f(s)]])]),d("label",ft,[pt,q(d("input",{class:"flex-1 p-4 md-p-4 rounded-xl bg-light-200 shadow-md dark-bg-dark-400","onUpdate:modelValue":r[5]||(r[5]=h=>U(t)?t.value=h:null),id:"name",name:"name",type:"text",onKeydown:r[6]||(r[6]=Y(h=>f(o)(),["enter"])),placeholder:"optional"},null,544),[[K,f(t)]])]),d("button",{class:G(["text-sm md-text-md p-4 font-bold md-p-4 rounded-xl shadow-xl hover-shadow-2xl transition -hover-translate-y-2px active-translate-y-0 active-shadow-md bg-green-400 dark-bg-green-700",{"grayscale-50":!f(i)}]),onClick:r[7]||(r[7]=h=>f(o)()),disabled:!f(i)},[A(y.$slots,"button",{},()=>[T("GET ACCESS")])],10,mt)]),d("div",gt,[A(y.$slots,"notice",{},()=>[T("Your access status will be saved per device and you won't need to enter your e-mail again.")])])]))],2)]),_:3}))}},yt={class:"bg-light-300 dark-bg-dark-700 dark-text-light-200 text-center line-height-loose text-md py-16"},vt={class:"mx-auto max-w-75ch intro md-text-lg"},xt={key:0,class:"p-2 flex flex-col mt-8"},wt={class:"text-4xl font-bold"},_t=d("div",{class:"text-lg"},"web synths",-1),Tt={key:1,class:"p-2 flex flex-col mt-8"},St={class:"text-4xl font-bold"},It=d("div",{class:"text-lg"},"web musicians",-1),kt={__name:"AboutUs",props:{synths:{type:Number,default:30}},setup(e){const t=v(),s=v([]),i=le(()=>s.value.length),n=pe(i);de(()=>{fetch("https://corsproxy.io/?https://db.chromatone.center/items/players?limit=-1").then(l=>l.json()).then(({data:l})=>s.value=l)});const o=me(t),{share:a,isSupported:c}=ge();function u(){a({title:"Web synths collection",text:"Look at this online synthesizer collection. No need to install anything - just your browser and any MIDI controller will do.",url:location.href})}return(l,g)=>(m(),b("div",yt,[d("div",vt,[A(l.$slots,"default"),d("div",{class:"flex justify-center",ref_key:"counters",ref:t},[f(o)?(m(),b("div",xt,[d("div",wt,D(e.synths),1),_t])):N("",!0),f(o)&&i.value>0?(m(),b("div",Tt,[d("div",St,D(f(n).toFixed())+"+",1),It])):N("",!0)],512),f(c)?(m(),b("button",{key:0,class:"text-white py-2 px-4 mt-6 shadow-lg rounded-lg cursor-pointer bg-green-600 -hover-translate-y-2px transition",onClick:g[0]||(g[0]=y=>u())},"Share now to save for later")):N("",!0)])]))}},Ct=d("h2",{class:"text-lg font-bold"},"Welcome to our free web synth collection!",-1),Ot=d("p",null,[d("a",{href:"https://playtronica.com",target:"_blank",rel:"noopener"},"Playtronica"),T(" is a digital playground that explores the possibilities of the material world through technology, creating gadgets that make the world musical. "),d("a",{href:"https://chromatone.center",target:"_blank",rel:"noopener"},"Chromatone"),T(" is a visual language for music education, research, and performance. We share our passion for web-based music instruments. Welcome to the community!")],-1),Lt=JSON.parse('{"title":"Web synths","description":"Web synthesizers to play with MIDI controllers","frontmatter":{"title":"Web synths","description":"Web synthesizers to play with MIDI controllers","date":"2023-06-22T00:00:00.000Z","layout":"home"},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1692108519000}'),$t={name:"index.md"},Mt=Object.assign($t,{setup(e){return(t,s)=>(m(),b("div",null,[C(Qe),C(kt,null,{default:w(()=>[Ct,Ot]),_:1}),C(bt,null,{button:w(()=>[T("JOIN THE COMMUNITY")]),notice:w(()=>[T("Your access status will be saved per device and you won't need to enter your e-mail again.")]),default:w(()=>[T(" We are building a community of web-based musicians. Type in your e-mail to instantly get full access to the collection and occasionally receive community updates. ")]),_:1})]))}});export{Lt as __pageData,Mt as default}; diff --git a/assets/index.md.be2b63f2.lean.js b/assets/index.md.be2b63f2.lean.js new file mode 100644 index 00000000..f91810df --- /dev/null +++ b/assets/index.md.be2b63f2.lean.js @@ -0,0 +1 @@ +import{u as oe,a as fe,b as pe,c as me,d as ge}from"./chunks/theme.10ba8259.js";import{r as v,b as le,w as re,f as de,h as I,a2 as O,i as m,j as b,u as f,a0 as be,I as ye,B as d,p as D,l as G,x as N,M as C,v as w,C as ve,D as xe,_ as we,q as P,J as _e,K as Te,S as Se,a3 as q,a4 as Ie,m as T,k as A,a5 as K,a6 as U,Z as Y,T as ke}from"./chunks/framework.7c22cbc0.js";const $=v(!1),X=v(!1),Ce=v(!1),W=oe("storedEmail",""),j=oe("storedName",""),B=v(!1),k=v(""),R=v(""),Oe=le(()=>he(k.value)),J=v(!1);function he(e){return/^[^@]+@\w+(\.\w+)+\w$/.test(e)}function $e(){W.value="",j.value="",B.value=!1,$.value=!1}function V(){return J.value||(re($,e=>{e&&(X.value=!1)}),de(()=>{W.value&&($.value=!0)}),J.value=!0),{isAccessGranted:$,isValidEmail:Oe,email:k,name:R,grantAccess:Ee,isSent:B,isFormOpen:X,checkAvailability:Ce,storedEmail:W,storedName:j,resetEmail:$e}}async function Ee(){if(!(!k.value&&!he(k.value))&&($.value=!0,!B.value)){B.value=!0;try{const e={email:k.value,name:R.value.slice(0,30)};W.value=k.value,j.value=R.value;const t=await fetch("https://db.chromatone.center/flows/trigger/f36a3461-c476-4ce5-88c9-eba2216083b0",{method:"POST",mode:"cors",cache:"no-cache",credentials:"same-origin",headers:{"Content-Type":"application/json"},redirect:"follow",referrerPolicy:"no-referrer",body:JSON.stringify(e)});console.log(t==null?void 0:t.json())}catch(e){console.error(e)}}}const De=JSON.parse(`[{"id":1,"status":"published","sort":1,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.730Z","title":"Dotpiano","url":"https://dotpiano.com/","cover":"fd81d5c3-4cb6-41eb-9689-d5f7aba2b8a6","tags":null,"content":null,"decription":null},{"id":3,"status":"published","sort":3,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.748Z","title":"TouchME by Chromatone","url":"https://touchme.chromatone.center/","cover":"6e97f4ab-c2f7-4e90-9c26-7518dbfddb3a","tags":null,"content":null,"decription":null},{"id":14,"status":"published","sort":4,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.765Z","title":"Juno-106","url":"http://juno-106.js.org/","cover":"d4fad441-c1a0-4ccc-9c0d-d8bfb79f9094","tags":null,"content":null,"decription":null},{"id":26,"status":"published","sort":5,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.816Z","title":"Learning synths with Ableton","url":"https://learningsynths.ableton.com/","cover":"f5c81f00-fc0e-40ad-96ce-a1834709253a","tags":null,"content":null,"decription":null},{"id":30,"status":"published","sort":5,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.800Z","title":"DX7 Synth","url":"https://mmontag.github.io/dx7-synth-js/","cover":"01eacfd8-892d-41de-b928-50b686a87400","tags":null,"content":null,"decription":null},{"id":32,"status":"published","sort":5,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.784Z","title":"Sampler synth","url":"https://play.playtronica.com/","cover":"749cb332-eb5e-40c6-bb36-fb87bb25a834","tags":null,"content":null,"decription":null},{"id":10,"status":"published","sort":6,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.837Z","title":"Websynths","url":"http://websynths.com/","cover":"072cf912-9966-4d3f-9823-36e75fb8ada9","tags":null,"content":null,"decription":null},{"id":19,"status":"published","sort":6,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.859Z","title":"Theremin","url":"https://www.femurdesign.com/theremin/","cover":"f4ca5ef9-132a-4e56-80fb-21bd0fd0b3f6","tags":null,"content":null,"decription":null},{"id":29,"status":"published","sort":6,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.891Z","title":"Elementary synth","url":"https://chromatone.center/practice/synth/elementary/","cover":"14f5d908-fba2-451f-8bec-a922cc5672c7","tags":null,"content":null,"decription":null},{"id":37,"status":"published","sort":6,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-21T14:18:48.099Z","title":"Sympathetic Synthesizer System Mk 1","url":"https://stuartmemo.com/synth/","cover":"9186b1e4-9929-492e-94eb-32a04aa523c8","tags":["keyboard","midi","additive"],"content":null,"decription":null},{"id":22,"status":"published","sort":7,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.875Z","title":"Disco-computer","url":"http://www.disco-computer.com/synthesizer/synth.html","cover":"1ac14701-0530-4ca6-b516-45d5f9523819","tags":null,"content":null,"decription":null},{"id":31,"status":"published","sort":12,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.906Z","title":"Video Sampler","url":"https://seeing-sound.netlify.app/","cover":"a4e5d9b7-1b64-4c31-aed4-467e2c6cba32","tags":null,"content":null,"decription":null},{"id":34,"status":"published","sort":12,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-21T14:00:50.309Z","title":"Fluoresynth by Electric Telepathy","url":"https://electrictelepathy.com/web-apps/fluoresynth/","cover":"d9c0dc12-ede0-49df-aef2-2517fd6ed961","tags":["midi","keyboard"],"content":"## How to play Fluoresynth\\n\\nThere are 3 ways to play notes with Fluoresynth:\\n\\n- Click or tap the onscreen keyboard.\\n- Play with the bottom two rows of keys on your computer keyboard (z, s, x, d, c, v, g, b, h, n, j, m, etc.)\\n- Plug in a MIDI keyboard/device to your computer. MIDI supported in Chrome and Opera.\\n\\nThis app may not load or play sound in older web browsers and operating systems. Audio may sound choppy on low-performance devices.","decription":null},{"id":27,"status":"published","sort":14,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.918Z","title":"Viktor NV-1","url":"http://nicroto.github.io/viktor/","cover":"1c104eeb-dc14-4d3b-bb8e-14accb2184c3","tags":null,"content":null,"decription":null},{"id":35,"status":"published","sort":18,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-21T14:05:27.437Z","title":"VirtualPiano.eu","url":"https://virtualpiano.eu/","cover":"e3f86bf5-68a9-4e0c-bb67-d0f31c26365b","tags":["midi","keyboard"],"content":"VirtualPiano.eu is the online synthesizer that allows you to play 128 musical instruments for free using your PC keyboard, the mouse or by connecting an external MIDI keyboard.\\n\\nYou can adjust Volume, Reverb, Loop and quality. Use the sustain and adjust the octaves, you can also select and set different channels including the one for the drums.\\n\\nCreate your own melodies, have fun playing or use VirtualPiano to learn how to play the Piano online on your own. ","decription":"Professional GM mapped WebAudio Piano Synthesizer Engine / MIDI Player"},{"id":36,"status":"published","sort":20,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-21T14:14:48.036Z","title":"Online sequencer","url":"https://onlinesequencer.net/","cover":"d55b5de1-f912-432f-a4e5-8c601643ecb9","tags":["sequencer"],"content":"**Online Sequencer** is a web-based music sequencer that allows users to create music saved online, or on their computer. The piano roll is essential to the sequencer, which is on the left of the screen, with 72 notes from C2-B7 (labelled differently from a piano, C2 on the sequencer corresponds to C1 on a piano). In addition to several parameters which can be modified to change the sound of the music, additional functionality can be accessed via the console.\\n\\nUpon opening the site, users can begin composing and \\"drawing\\" notes on the grid, with the default instrument being Electric Piano. By default, a sequence's time signature is set to 4/4, and the grid spacing is set to 1/4 (16 notes per measure). The note lengths can be adjusted by dragging the dark tab on the right of each note, and precision can be afforded by changing the 'Grid' option to other note divisions. \\n\\n## History\\n\\nOnline Sequencer was created on January 2, 2013 by Jacob Morgan during a break at Georgia Tech.\\n\\nBeginning in the fall of 2013, accounts were available but were separate from the music portion of the site. They were only used in the forum and the website chat.\\n\\nIn 2015, accounts were linked to the main website and allowed songs to be saved under someone's username.\\n\\nThe World Update in 2018 added several new instruments and changed the landscape of sound design on the site. The \\"World Update Contest\\" was held for the update.\\n\\nStarting in late 2020, OS began to receive a variety of updates which vastly improved the functionality of the site. These updates introduced features like custom grid sizes, automation with markers, extra reverb options, detune, and distortion. In 2021, the \\"Space Race\\" contest was held, as to see who could work best with the changes.\\n\\nIn late 2022, newer, higher-quality instruments were added. Some of the instruments, such as Electric Piano, Grand Piano, Violin, and Cello got an updated sustained version, while the original versions still exist under the \\"classic\\" designation.\\n\\nCurrently, the 10-Year Anniversary Contest is being held.\\n\\n## Features\\n\\nWithin the editor, numerous user interface features allow for various changes which will impact the individual sequence on that page.\\n\\n### Basic features\\n\\nUI features include:\\n\\n- Tempo (10-999 BPM)\\n- Measure count or Time count (MM: SS.ssss)\\n- Time signature (2/4, 3/4, 4/4, 5/4)\\n- Grid size (This correlates to note divisions; 1/16, 1/12, 1/8, 1/6, 1/4, 1/3, 1/2)\\n- Auto Scroll (Fast, Smooth, Off; how the sequencer displays measures off-screen as a sequence plays)\\n- Add an Audio Track (This won't be saved to the sequence but will play alongside it for ease of transcription)\\n- Title input\\n- Draw, select, and erase\\n- Instrument dropdown, instrument options, and select instrument (selects all notes of the current instrument)\\n- Select all, Cut, Copy, and Paste\\n- Zoom options\\n- Export options\\n- Help\\n- Fullscreen\\n- Tooltips\\n\\n### Advanced features\\n\\nUsers can access more advanced features for use in their sequences by clicking the advanced tab on the instrument they wish to change. This menu contains options to change volume, panning, detune (-1200 to +1200), reverb, distortion, and an equalizer. This array lets users configure specific instruments to create specific sounds, and textures, or to accompany other instruments as a layer or development of the original sound.\\n\\nOS also allows for commands to be entered in the browser console to manipulate different options in specific ways, such as setting custom to detune values (0-infinity), custom grid sizes, note divisions, and sequence ID amongst other things. These options bring OS closer to that of classic Digital Audio Workstations (DAWs) but are still limited in terms of accessibility and availability.\\n\\n### Browser and device support\\n\\nOnline Sequencer supports Chrome and other Chromium-based browsers, such as Microsoft Edge, Opera, and Brave. Firefox is also supported, but often with limited functionality. Safari and Internet Explorer are not supported, due to engine issues.\\n\\nOther mobile browsers support sequence playback, but not editing. However, iOS users have the same problem with WebKit on macOS. However, unlike in macOS, all browsers (even Chromium-based browsers) use WebKit as the engine for iOS due to Apple prohibiting other engines for security reasons; iOS does not support Online Sequencer, other than chat and forums.\\n\\nThe website's user interface is formatted for proper use on desktops, but some pages such as the chat page, playlists, and forums should be formatted well on mobile devices. ","decription":"OnlineSequencer.net is an online music sequencer. Make tunes in your browser and share "},{"id":17,"status":"published","sort":30,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.930Z","title":"Sound Trap","url":"https://www.soundtrap.com/","cover":"328c8c51-e7d4-48bd-9c3d-6dea5184cad5","tags":null,"content":null,"decription":null},{"id":6,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.181Z","title":"MIDI–driven Web Audio","url":"https://webaudiodemos.appspot.com/midi-synth/index.html","cover":"f268f0dc-b091-4799-885b-0a5eecfdcbec","tags":null,"content":null,"decription":null},{"id":8,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.088Z","title":"Meet the Heisenberg","url":"https://www.audiotool.com/product/device/heisenberg/","cover":"88c6fe9d-033c-4aac-a946-278e729e5f05","tags":null,"content":null,"decription":null},{"id":9,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.141Z","title":"Cardboard Synth","url":"https://www.gsn-lib.org/apps/cardboardsynth/index.html","cover":"3406a3fa-5e4d-4efc-a5ac-c6c8ee3abf72","tags":null,"content":null,"decription":null},{"id":11,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.126Z","title":"Tanguy synth","url":"http://tanguysynth.com/","cover":"16a499c4-661f-48b5-b308-dd7ea77f335d","tags":null,"content":null,"decription":null},{"id":12,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.109Z","title":"MOD synth","url":"http://mod-synth.io/","cover":"dd13c72f-d1ee-4197-b8a2-f24c162d5858","tags":null,"content":null,"decription":null},{"id":13,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.076Z","title":"OLIF SY1K","url":"http://perso.numericable.fr/olivier.friker/synth/O3-synth%20V1.3.html","cover":"44234157-4872-4e35-baec-a7d073a7258d","tags":null,"content":null,"decription":null},{"id":15,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.059Z","title":"Note Sculptor","url":"http://www.noisesculptor.com/","cover":"3b9d921b-79da-4923-9cd2-bbc826561a93","tags":null,"content":null,"decription":null},{"id":16,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.159Z","title":"WebAudioSynth V2","url":"http://aikelab.net/websynthv2/","cover":"7980d0af-e534-4383-a36c-0b116a06499e","tags":null,"content":null,"decription":null},{"id":18,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.944Z","title":"Samplestich","url":"http://samplestitch.com.s3-website-us-east-1.amazonaws.com/","cover":"0f272d97-7882-4797-9890-97c3b75149a4","tags":null,"content":null,"decription":null},{"id":20,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.032Z","title":"Omni","url":"https://femurdesign.com/omni/","cover":"82c94f42-0449-45ea-924d-7365ba51af20","tags":null,"content":null,"decription":null},{"id":21,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.016Z","title":"Web Modular","url":"https://www.g200kg.com/docs/webmodular/","cover":"5bb158d2-cfcc-46d9-acd5-6cf3312d7678","tags":null,"content":null,"decription":null},{"id":23,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:11.000Z","title":"Online sequencer","url":"https://onlinesequencer.net/369477","cover":"efdc67a4-4cfc-4a4b-a704-1b939fbe7fc4","tags":null,"content":null,"decription":null},{"id":24,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.987Z","title":"PixelSynth","url":"https://ojack.github.io/PIXELSYNTH/","cover":"59ec0d0b-6bcf-4c50-8d76-5fe624105c0c","tags":null,"content":null,"decription":null},{"id":25,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.970Z","title":"Acid Machine 2","url":"http://errozero.co.uk/acid-machine/","cover":"380cdb0d-4a68-44a7-b24c-2b655f26ebcd","tags":null,"content":null,"decription":null},{"id":28,"status":"published","sort":null,"user_created":"796b4fbf-a0d9-4eac-998a-49bf3f9ffe65","date_created":"2023-08-09T08:02:10.958Z","title":"WebSID Commodore 64","url":"http://www.igorski.nl/experiment/websid","cover":"e39565a0-15fa-4c3a-9bc7-aa5a613dd19f","tags":null,"content":null,"decription":null}]`),Le=I({inject:["manager"],props:{index:{type:Number,required:!0},disabled:{type:Boolean,default:!1}},data(){return{}},watch:{index(e){this.$el&&this.$el.sortableInfo&&(this.$el.sortableInfo.index=e)},disabled(e){e?this.removeDraggable():this.setDraggable(this.index)}},mounted(){const{disabled:e,index:t}=this.$props;e||this.setDraggable(t)},beforeUnmount(){this.disabled||this.removeDraggable()},methods:{setDraggable(e){const t=this.$el;t.sortableInfo={index:e,manager:this.manager},this.ref={node:t},this.manager.add(this.ref)},removeDraggable(){this.manager.remove(this.ref)}}});class Me{constructor(){this.refs=[],this.active=null}add(t){this.refs||(this.refs=[]),this.refs.push(t)}remove(t){const s=this.getIndex(t);s!==-1&&this.refs.splice(s,1)}isActive(){return!!this.active}getActive(){return this.refs.find(({node:t})=>{var s,i;return((s=t==null?void 0:t.sortableInfo)===null||s===void 0?void 0:s.index)==((i=this===null||this===void 0?void 0:this.active)===null||i===void 0?void 0:i.index)})||null}getIndex(t){return this.refs.indexOf(t)}getRefs(){return this.refs}getOrderedRefs(){return this.refs.sort((t,s)=>t.node.sortableInfo.index-s.node.sortableInfo.index)}}const E=e=>e.touches!=null;function F(e,t){return!!e&&Object.prototype.hasOwnProperty.call(e,t)}function Ne(e,t,s){const i=e.slice(0);if(s>=i.length){let n=s-i.length;for(;n--+1;)i.push(void 0)}return i.splice(s,0,i.splice(t,1)[0]),i}function Pe(e,t){const s=e.slice(0);return t>=s.length||s.splice(t,1),s}function Ae(e,t,s){const i=e.slice(0);return t===i.length?i.push(s):i.splice(t,0,s),i}const _={start:["touchstart","mousedown"],move:["touchmove","mousemove"],end:["touchend","mouseup"],cancel:["touchcancel","keyup"]};function Q(e,t){for(;e;){if(t(e))return e;e=e.parentNode}}function ee(e,t,s){return st?t:s}function L(e){return e.substr(-2)==="px"?parseFloat(e):0}function te(e){const t=window.getComputedStyle(e);return{top:L(t.marginTop),right:L(t.marginRight),bottom:L(t.marginBottom),left:L(t.marginLeft)}}function M(e,t="page"){const s=`${t}X`,i=`${t}Y`;return{x:E(e)?e.touches[0][s]:e[s],y:E(e)?e.touches[0][i]:e[i]}}function se(e){const t=[e];for(;e;e=e.offsetParent)t.unshift(e);return t}function We(e,t){const s=se(e),i=se(t);if(s[0]!=i[0])throw"No common ancestor!";for(let n=0;n{n.type!=="file"&&t[o]&&(n.value=t[o].value)}),s}function Be(e,t,s){if(typeof e=="string"&&(e=+e),Array.isArray(e)||(e=[e,e]),e.length!==2)throw new Error(`lockOffset prop of SortableContainer should be a single value or an array of exactly two values. Given ${e}`);const[i,n]=e;return[ne(i,t,s),ne(n,t,s)]}function ne(e,t,s){let i=e,n=e,o="px";if(typeof e=="string"){const a=/^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(e);if(a===null)throw new Error(`lockOffset value should be a number or a string of a number followed by "px" or "%". Given ${e}`);i=n=parseFloat(e),o=a[1]}if(!isFinite(i)||!isFinite(n))throw new Error(`lockOffset value should be a finite. Given ${e}`);return o==="%"&&(i=i*t/100,n=n*s/100),{x:i,y:n}}function ae(e=[]){for(let t=0,s=e.length;t[]},lockAxis:{type:String,default:""},helperClass:{type:String,default:""},contentWindow:{type:Object,default:null},shouldCancelStart:{type:Function,default:e=>["input","textarea","select","option","button"].indexOf(e.target.tagName.toLowerCase())!==-1},getHelperDimensions:{type:Function,default:({node:e})=>({width:e.offsetWidth,height:e.offsetHeight})}},emits:["sort-start","sort-move","sort-end","sort-cancel","sort-insert","sort-remove","update:list"],data(){let e=!1;return this.group&&this.SlicksortHub&&(e=!0),{sorting:!1,hub:e?this.SlicksortHub:null,manager:new Me}},mounted(){this.hub&&(this.id=this.hub.getId()),this.container=this.$el,this.document=this.container.ownerDocument||document,this._window=this.contentWindow||window,this.scrollContainer=this.useWindowAsScrollContainer?{scrollLeft:0,scrollTop:0}:this.container,this.events={start:this.handleStart,move:this.handleMove,end:this.handleEnd};for(const e in this.events)F(this.events,e)&&_[e].forEach(t=>this.container.addEventListener(t,this.events[e]));this.hub&&this.hub.addContainer(this)},beforeUnmount(){for(const e in this.events)F(this.events,e)&&_[e].forEach(t=>this.container.removeEventListener(t,this.events[e]));this.hub&&this.hub.removeContainer(this),this.dragendTimer&&clearTimeout(this.dragendTimer),this.cancelTimer&&clearTimeout(this.cancelTimer),this.pressTimer&&clearTimeout(this.pressTimer),this.autoscrollInterval&&clearInterval(this.autoscrollInterval)},methods:{handleStart(e){const{distance:t,shouldCancelStart:s}=this.$props;if(!E(e)&&e.button===2||s(e))return!1;this._touched=!0,this._pos=M(e);const i=e.target,n=Q(i,o=>o.sortableInfo!=null);if(n&&n.sortableInfo&&this.nodeIsChild(n)&&!this.sorting){const{useDragHandle:o}=this.$props,{index:a}=n.sortableInfo;if(o&&!Q(i,c=>c.sortableHandle!=null))return;this.manager.active={index:a},i.tagName.toLowerCase()==="a"&&e.preventDefault(),t||(this.pressDelay===0?this.handlePress(e):this.pressTimer=z(()=>this.handlePress(e),this.pressDelay))}},nodeIsChild(e){return e.sortableInfo.manager===this.manager},handleMove(e){const{distance:t,pressThreshold:s}=this.$props;if(!this.sorting&&this._touched){const i=M(e);this._delta={x:this._pos.x-i.x,y:this._pos.y-i.y};const n=Math.abs(this._delta.x)+Math.abs(this._delta.y);!t&&(!s||s&&n>=s)?(this.cancelTimer&&clearTimeout(this.cancelTimer),this.cancelTimer=z(this.cancel,0)):t&&n>=t&&this.manager.isActive()&&this.handlePress(e)}},handleEnd(){if(!this._touched)return;const{distance:e}=this.$props;this._touched=!1,e||this.cancel()},cancel(){this.sorting||(this.pressTimer&&clearTimeout(this.pressTimer),this.manager.active=null,this.hub&&this.hub.cancel())},handleSortCancel(e){(E(e)||e.key===this.cancelKey)&&(this.newIndex=this.index,this.canceling=!0,this.translate={x:0,y:0},this.animateNodes(),this.handleSortEnd(e))},handlePress(e){e.stopPropagation();const t=this.manager.getActive();if(t){const{getHelperDimensions:s,helperClass:i,hideSortableGhost:n,appendTo:o}=this.$props,{node:a}=t,{index:c}=a.sortableInfo,u=te(a),l=this.container.getBoundingClientRect(),g=s({index:c,node:a});this.node=a,this.margin=u,this.width=g.width,this.height=g.height,this.marginOffset={x:this.margin.left+this.margin.right,y:Math.max(this.margin.top,this.margin.bottom)},this.boundingClientRect=a.getBoundingClientRect(),this.containerBoundingRect=l,this.index=c,this.newIndex=c;const y=ie(a);this.helper=this.document.querySelector(o).appendChild(y),this.helper.style.position="fixed",this.helper.style.top=`${this.boundingClientRect.top-u.top}px`,this.helper.style.left=`${this.boundingClientRect.left-u.left}px`,this.helper.style.width=`${this.width}px`,this.helper.style.height=`${this.height}px`,this.helper.style.boxSizing="border-box",this.helper.style.pointerEvents="none",n&&(this.sortableGhost=a,a.style.visibility="hidden",a.style.opacity="0"),this.hub&&(this.hub.sortStart(this),this.hub.helper=this.helper,this.hub.ghost=this.sortableGhost),this.intializeOffsets(e,this.boundingClientRect),this.offsetEdge=S(a,this.container),i&&this.helper.classList.add(...i.split(" ")),this.listenerNode=E(e)?a:this._window,_.move.forEach(r=>this.listenerNode.addEventListener(r,this.handleSortMove)),_.end.forEach(r=>this.listenerNode.addEventListener(r,this.handleSortEnd)),_.cancel.forEach(r=>this.listenerNode.addEventListener(r,this.handleSortCancel)),this.sorting=!0,this.$emit("sort-start",{event:e,node:a,index:c})}},handleSortMove(e){if(e.preventDefault(),this.updatePosition(e),this.hub){const t=this.list[this.index];this.hub.handleSortMove(e,t)}(!this.hub||this.hub.isDest(this))&&(this.animateNodes(),this.autoscroll()),this.$emit("sort-move",{event:e})},handleDropOut(){const e=this.list[this.index],t=Pe(this.list,this.index);return this.$emit("sort-remove",{oldIndex:this.index}),this.$emit("update:list",t),e},handleDropIn(e){const t=Ae(this.list,this.newIndex,e);this.$emit("sort-insert",{newIndex:this.newIndex,value:e}),this.$emit("update:list",t),this.handleDragEnd()},handleDragOut(){this.autoscrollInterval&&(clearInterval(this.autoscrollInterval),this.autoscrollInterval=null),this.hub.isSource(this)?(this.translate={x:1e4,y:1e4},this.animateNodes()):(this.manager.getRefs().forEach(e=>{e.node.style.transform=""}),this.dragendTimer=z(this.handleDragEnd,this.transitionDuration||0))},handleDragEnd(){this.autoscrollInterval&&(clearInterval(this.autoscrollInterval),this.autoscrollInterval=null),ae(this.manager.getRefs()),this.sortableGhost&&(this.sortableGhost.remove(),this.sortableGhost=null),this.dragendTimer&&(clearTimeout(this.dragendTimer),this.dragendTimer=null),this.manager.active=null,this._touched=!1,this.sorting=!1},intializeOffsets(e,t){const{useWindowAsScrollContainer:s,containerBoundingRect:i,_window:n}=this;this.marginOffset={x:this.margin.left+this.margin.right,y:Math.max(this.margin.top,this.margin.bottom)},this._axis={x:this.axis.indexOf("x")>=0,y:this.axis.indexOf("y")>=0},this.initialOffset=M(e),this.initialScroll={top:this.scrollContainer.scrollTop,left:this.scrollContainer.scrollLeft},this.initialWindowScroll={top:window.pageYOffset,left:window.pageXOffset},this.translate={x:0,y:0},this.minTranslate={},this.maxTranslate={},this._axis.x&&(this.minTranslate.x=(s?0:i.left)-t.left-this.width/2,this.maxTranslate.x=(s?n.innerWidth:i.left+i.width)-t.left-this.width/2),this._axis.y&&(this.minTranslate.y=(s?0:i.top)-t.top-this.height/2,this.maxTranslate.y=(s?n.innerHeight:i.top+i.height)-t.top-this.height/2)},handleDragIn(e,t,s){if(this.hub.isSource(this))return;this.dragendTimer&&(this.handleDragEnd(),clearTimeout(this.dragendTimer),this.dragendTimer=null);const i=this.manager.getRefs();this.index=i.length,this.manager.active={index:this.index};const n=this.container.getBoundingClientRect(),o=s.getBoundingClientRect();this.containerBoundingRect=n,this.sortableGhost=ie(t),this.container.appendChild(this.sortableGhost);const a=this.sortableGhost.getBoundingClientRect();this.boundingClientRect=a,this.margin=te(this.sortableGhost),this.width=a.width,this.height=a.height,this.offsetEdge=S(this.sortableGhost,this.container),this.intializeOffsets(e,a),this.initialOffset.x+=a.x-o.x,this.initialOffset.y+=a.y-o.y,this.sorting=!0},handleSortEnd(e){this.listenerNode&&(_.move.forEach(i=>this.listenerNode.removeEventListener(i,this.handleSortMove)),_.end.forEach(i=>this.listenerNode.removeEventListener(i,this.handleSortEnd)),_.cancel.forEach(i=>this.listenerNode.removeEventListener(i,this.handleSortCancel)));const t=this.manager.getRefs();this.helper&&this.helperClass&&this.helper.classList.remove(...this.helperClass.split(" ")),this.autoscrollInterval&&clearInterval(this.autoscrollInterval),this.autoscrollInterval=null;const s=()=>{this.helper&&(this.helper.remove(),this.helper=null),this.hideSortableGhost&&this.sortableGhost&&(this.sortableGhost.style.visibility="",this.sortableGhost.style.opacity=""),ae(t),this.hub&&!this.hub.isDest(this)?this.canceling?this.hub.cancel():this.hub.handleSortEnd():this.canceling?this.$emit("sort-cancel",{event:e}):(this.$emit("sort-end",{event:e,oldIndex:this.index,newIndex:this.newIndex}),this.$emit("update:list",Ne(this.list,this.index,this.newIndex))),this.manager.active=null,this._touched=!1,this.canceling=!1,this.sorting=!1};this.transitionDuration||this.draggedSettlingDuration?this.transitionHelperIntoPlace(t,s):s()},transitionHelperIntoPlace(e,t){if(this.draggedSettlingDuration===0||e.length===0||!this.helper)return Promise.resolve();const s=e[this.index].node;let i=0,n=0;const o={top:window.pageYOffset-this.initialWindowScroll.top,left:window.pageXOffset-this.initialWindowScroll.left};if(this.hub&&!this.hub.isDest(this)&&!this.canceling){const l=this.hub.getDest();if(!l)return;const g=l.newIndex,y=l.manager.getOrderedRefs(),r=g0?i+=l.offsetLeft+l.offsetWidth-(s.offsetLeft+s.offsetWidth):i+=l.offsetLeft-s.offsetLeft,n=-g.top,this.translate&&this.translate.y>0?n+=l.offsetTop+l.offsetHeight-(s.offsetTop+s.offsetHeight):n+=l.offsetTop-s.offsetTop}const a=this.draggedSettlingDuration!==null?this.draggedSettlingDuration:this.transitionDuration;H(this.helper,`translate3d(${i}px,${n}px, 0)`,`${a}ms`);const c=l=>{(!l||l.propertyName==="transform")&&(clearTimeout(u),H(this.helper),t())},u=setTimeout(c,a+10);this.helper.addEventListener("transitionend",c)},updatePosition(e){const{lockAxis:t,lockToContainerEdges:s}=this.$props,i=M(e),n={x:i.x-this.initialOffset.x,y:i.y-this.initialOffset.y};if(n.y-=window.pageYOffset-this.initialWindowScroll.top,n.x-=window.pageXOffset-this.initialWindowScroll.left,this.translate=n,s){const[o,a]=Be(this.lockOffset,this.height,this.width),c={x:this.width/2-o.x,y:this.height/2-o.y},u={x:this.width/2-a.x,y:this.height/2-a.y};this.minTranslate.x&&this.maxTranslate.x&&(n.x=ee(this.minTranslate.x+c.x,this.maxTranslate.x-u.x,n.x)),this.minTranslate.y&&this.maxTranslate.y&&(n.y=ee(this.minTranslate.y+c.y,this.maxTranslate.y-u.y,n.y))}t==="x"?n.y=0:t==="y"&&(n.x=0),this.helper&&(this.helper.style.transform=`translate3d(${n.x}px,${n.y}px, 0)`)},animateNodes(){const{transitionDuration:e,hideSortableGhost:t}=this.$props,s=this.manager.getOrderedRefs(),i={left:this.scrollContainer.scrollLeft-this.initialScroll.left,top:this.scrollContainer.scrollTop-this.initialScroll.top},n={left:this.offsetEdge.left+this.translate.x+i.left,top:this.offsetEdge.top+this.translate.y+i.top},o={top:window.pageYOffset-this.initialWindowScroll.top,left:window.pageXOffset-this.initialWindowScroll.left};this.newIndex=null;for(let a=0,c=s.length;ag?g/2:this.width/2,height:this.height>y?y/2:this.height/2},h={x:0,y:0};let{edgeOffset:p}=s[a];p||(s[a].edgeOffset=p=S(u,this.container));const x=a0&&s[a-1];if(x&&!x.edgeOffset&&(x.edgeOffset=S(x.node,this.container)),l===this.index){t&&(this.sortableGhost=u,u.style.visibility="hidden",u.style.opacity="0");continue}e&&(u.style.transitionDuration=`${e}ms`),this._axis.x?this._axis.y?lthis.containerBoundingRect.width-r.width&&x&&(h.x=x.edgeOffset.left-p.left,h.y=x.edgeOffset.top-p.top),this.newIndex===null&&(this.newIndex=l)):l>this.index&&(n.left+o.left+r.width>=p.left&&n.top+o.top+r.height>=p.top||n.top+o.top+r.height>=p.top+y)&&(h.x=-(this.width+this.marginOffset.x),p.left+h.xthis.index&&n.left+o.left+r.width>=p.left?(h.x=-(this.width+this.marginOffset.x),this.newIndex=l):lthis.index&&n.top+o.top+r.height>=p.top?(h.y=-(this.height+this.marginOffset.y),this.newIndex=l):l=this.maxTranslate.y-this.height/2?(t.y=1,s.y=i.y*Math.abs((this.maxTranslate.y-this.height/2-e.y)/this.height)):e.x>=this.maxTranslate.x-this.width/2?(t.x=1,s.x=i.x*Math.abs((this.maxTranslate.x-this.width/2-e.x)/this.width)):e.y<=this.minTranslate.y+this.height/2?(t.y=-1,s.y=i.y*Math.abs((e.y-this.height/2-this.minTranslate.y)/this.height)):e.x<=this.minTranslate.x+this.width/2&&(t.x=-1,s.x=i.x*Math.abs((e.x-this.width/2-this.minTranslate.x)/this.width)),this.autoscrollInterval&&(clearInterval(this.autoscrollInterval),this.autoscrollInterval=null),(t.x!==0||t.y!==0)&&(this.autoscrollInterval=window.setInterval(()=>{const n={left:1*s.x*t.x,top:1*s.y*t.y};this.useWindowAsScrollContainer?this._window.scrollBy(n.left,n.top):(this.scrollContainer.scrollTop+=n.top,this.scrollContainer.scrollLeft+=n.left),this.translate.x+=n.left,this.translate.y+=n.top,this.animateNodes()},5))}}}),ce=I({name:"SlickItem",mixins:[Le],props:{tag:{type:String,default:"div"}},render(){var e,t;return O(this.tag,(t=(e=this.$slots).default)===null||t===void 0?void 0:t.call(e))}}),qe=I({name:"SlickList",mixins:[Ze],props:{tag:{type:String,default:"div"},itemKey:{type:[String,Function],default:"id"}},render(){var e,t;return this.$slots.item?O(this.tag,this.list.map((s,i)=>{let n;if(s!=null){if(typeof this.itemKey=="function")n=this.itemKey(s);else if(typeof s=="object"&&F(s,this.itemKey)&&typeof s[this.itemKey]=="string")n=s[this.itemKey];else if(typeof s=="string")n=s;else throw new Error("Cannot find key for item, use the item-key prop and pass a function or string");return O(ce,{key:n,index:i},{default:()=>{var o,a;return(a=(o=this.$slots).item)===null||a===void 0?void 0:a.call(o,{item:s,index:i})}})}})):O(this.tag,(t=(e=this.$slots).default)===null||t===void 0?void 0:t.call(e))}}),ze=I({props:{tag:{type:String,default:"span"}},mounted(){this.$el.sortableHandle=!0},render(){var e,t;return O(this.tag,(t=(e=this.$slots).default)===null||t===void 0?void 0:t.call(e))}}),Ge={key:0,d:"M30.336 12.547l-10.172-1.074L16 2.133l-4.164 9.34l-10.172 1.074l7.598 6.848L7.14 29.398L16 24.29l8.86 5.11l-2.122-10.004z",fill:"#ffaa00"},Re={key:1,d:"M16 2.125l-.906 2.063l-3.25 7.28l-7.938.845l-2.25.25l1.688 1.5l5.906 5.343l-1.656 7.813l-.469 2.187l1.969-1.125l6.906-4l6.906 4l1.969 1.125l-.469-2.187l-1.656-7.813l5.906-5.343l1.688-1.5l-2.25-.25l-7.938-.844l-3.25-7.281zm0 4.906l2.563 5.782l.25.53l.562.063l6.281.656l-4.687 4.22l-.438.405l.125.563l1.313 6.156l-5.469-3.125l-.5-.312l-.5.312l-5.469 3.125l1.313-6.156l.125-.563l-.438-.406l-4.687-4.218l6.281-.657l.563-.062l.25-.531z",fill:"#888888"},Fe=I({__name:"SynthFav",props:{url:{type:String,default:""}},setup(e){const s=fe("fav:"+e.url,!1);function i(n){s.value=!s.value,console.log(s.value)}return(n,o)=>(m(),b("svg",{onClick:o[0]||(o[0]=be(a=>i(e.url),["stop","prevent"])),xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32"},[f(s)?(m(),b("path",Ge)):(m(),b("path",Re))]))}}),ue=e=>(ve("data-v-2d995d47"),e=e(),xe(),e),He=["src","alt"],je=ue(()=>d("div",{class:"flex-1"},null,-1)),Ve={class:"p-4 flex items-center justify-between w-full"},Ke={class:"text-md font-bold flex items-center gap-2 flex-1"},Ue={class:"flex-1"},Ye=ue(()=>d("svg",{xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32"},[d("path",{d:"M4 7v2h24V7zm0 8v2h24v-2zm0 8v2h24v-2z",fill:"#888888"})],-1)),Xe=I({__name:"SynthCard",props:{off:{type:Boolean,default:!1},title:{type:String,default:""},description:{type:String,default:""},cover:{type:String,default:""},url:{type:String,default:""}},setup(e){const t=e,{checkAvailability:s,isFormOpen:i}=V(),n=v(null);re(s,async a=>{try{(await fetch("https://corsproxy.io/?"+t.url)).status==200?n.value=!0:n.value=!1}catch{n.value=!1}});function o(){t.off?i.value=!i.value:window.open(t.url,"_blank")}return(a,c)=>{const u=ye("ClientOnly");return m(),b("button",{class:"flex flex-col text-left relative min-h-50 card p-0 bg-light-300 shadow-lg flex flex-col dark-bg-dark-300 -hover-translate-y-2px transition hover-shadow-xl rounded-xl overflow-hidden relative",onClick:o},[(m(),b("img",{key:e.title,height:"200",width:"1000",src:`/cover/${e.title.toLowerCase().split(" ").join("-")}.webp`,alt:`${e.title} illustration`},null,8,He)),je,d("div",Ve,[d("div",Ke,[d("div",Ue,D(e.title),1),f(s)?(m(),b("div",{key:0,class:G(["w-2 h-2 rounded-full shadow-inset",{"bg-green-500":n.value===!0,"bg-red-500":n.value===!1}])},null,2)):N("",!0),C(u,null,{default:w(()=>[C(Fe,{class:"scale-70 w-10",url:e.url},null,8,["url"])]),_:1}),C(f(ze),{class:"scale-80 opacity-40 cursor-grab absolute top-2 right-2"},{default:w(()=>[Ye]),_:1})])])])}}});const Je=we(Xe,[["__scopeId","data-v-2d995d47"]]);const Qe={__name:"SynthList",setup(e){const{isAccessGranted:t}=V(),s=v(De);function i(n){return!t.value&&n>5}return(n,o)=>(m(),P(f(qe),{class:"flex flex-wrap items-stretch gap-4 md-gap-6 m-2 lg-m-8",list:s.value,"onUpdate:list":o[0]||(o[0]=a=>s.value=a),axis:"xy","use-drag-handle":""},{default:w(()=>[(m(!0),b(_e,null,Te(s.value,(a,c)=>(m(),P(f(ce),{class:"flex",style:{flex:"1 1 240px"},key:a.id,index:c},{default:w(()=>[(m(),P(Je,{style:Se({opacity:i(c)?.8:1}),title:a.title,description:a.description,cover:a.cover,url:a.url,key:a.id,off:i(c)},null,8,["style","title","description","cover","url","off"]))]),_:2},1032,["index"]))),128))]),_:1},8,["list"]))}};const et=d("path",{d:"M7.219 5.781L5.78 7.22L14.563 16L5.78 24.781L7.22 26.22L16 17.437l8.781 8.782l1.438-1.438L17.437 16l8.782-8.781L24.78 5.78L16 14.563z",fill:"#888888"},null,-1),tt=[et],st={key:0,class:"flex flex-col gap-4 max-w-45ch text-center"},it={class:"text-3xl font-bold"},nt=d("div",{class:"text-xl"},"Enjoy your web-synthesizers hub",-1),at={class:"text-sm flex gap-2 justify-center"},ot=d("svg",{class:"absolute",xmlns:"http://www.w3.org/2000/svg",width:"100",height:"100",viewBox:"0 0 32 32"},[d("path",{d:"M16 4.688L3.781 16.905l1.438 1.407L16 7.53l10.781 10.782l1.438-1.407zm0 7L3.781 23.905l1.438 1.407L16 14.53l10.781 10.781l1.438-1.406z",fill:"#888888"})],-1),lt=[ot],rt={key:1,class:"flex flex-col gap-8 relative pt-8 items-center"},dt={class:"text-center max-w-45ch",for:"email"},ht={class:"flex gap-4 flex-col w-full"},ct={class:"flex items-center gap-2"},ut=d("div",{class:"p-2 w-20 font-bold text-right"},"E-mail*",-1),ft={class:"flex items-center gap-2"},pt=d("div",{class:"p-2 w-20 font-bold text-right"},"Name",-1),mt=["disabled"],gt={class:"text-xs opacity-60 text-center max-w-45ch mx-auto"},bt={__name:"TheForm",setup(e){const{name:t,email:s,isValidEmail:i,isFormOpen:n,grantAccess:o,storedEmail:a,storedName:c,resetEmail:u,isAccessGranted:l}=V();function g(){window.scrollTo({top:0,left:0,behavior:"smooth"})}return(y,r)=>(m(),P(ke,{name:"slide"},{default:w(()=>[d("div",{class:G(["z-10 min-h-40dvh bottom-0 right-0 left-0 bg-light-800 bg-opacity-80 backdrop-blur flex flex-col items-center gap-4 justify-center dark-bg-dark-200 dark-bg-opacity-80 p-8 shadow",{sticky:f(n)}])},[q((m(),b("svg",{class:"absolute top-4 right-4 text-4xl cursor-pointer",onClick:r[0]||(r[0]=h=>n.value=!1),xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 32 32"},tt,512)),[[Ie,f(n)]]),f(l)?(m(),b("div",st,[d("div",it,"Hello, "+D(f(c))+"!",1),nt,d("div",at,[T(D(f(a)),1),d("span",{class:"opacity-20 hover-opacity-50 transition cursor-pointer",onClick:r[1]||(r[1]=(...h)=>f(u)&&f(u)(...h))},"Log out")]),d("div",{class:"flex justify-center cursor-pointer p-2 opacity-50 hover-opacity-100 transition",onClick:r[2]||(r[2]=h=>g())},lt)])):(m(),b("div",rt,[d("label",dt,[A(y.$slots,"default")]),d("div",ht,[d("label",ct,[ut,q(d("input",{class:"flex-1 p-4 md-p-4 rounded-xl bg-light-200 shadow-md dark-bg-dark-400 flex-1",ref:"target",maxlength:"30","onUpdate:modelValue":r[3]||(r[3]=h=>U(s)?s.value=h:null),id:"email",name:"email",type:"email",onKeydown:r[4]||(r[4]=Y(h=>f(o)(),["enter"])),placeholder:"your@gmail.com"},null,544),[[K,f(s)]])]),d("label",ft,[pt,q(d("input",{class:"flex-1 p-4 md-p-4 rounded-xl bg-light-200 shadow-md dark-bg-dark-400","onUpdate:modelValue":r[5]||(r[5]=h=>U(t)?t.value=h:null),id:"name",name:"name",type:"text",onKeydown:r[6]||(r[6]=Y(h=>f(o)(),["enter"])),placeholder:"optional"},null,544),[[K,f(t)]])]),d("button",{class:G(["text-sm md-text-md p-4 font-bold md-p-4 rounded-xl shadow-xl hover-shadow-2xl transition -hover-translate-y-2px active-translate-y-0 active-shadow-md bg-green-400 dark-bg-green-700",{"grayscale-50":!f(i)}]),onClick:r[7]||(r[7]=h=>f(o)()),disabled:!f(i)},[A(y.$slots,"button",{},()=>[T("GET ACCESS")])],10,mt)]),d("div",gt,[A(y.$slots,"notice",{},()=>[T("Your access status will be saved per device and you won't need to enter your e-mail again.")])])]))],2)]),_:3}))}},yt={class:"bg-light-300 dark-bg-dark-700 dark-text-light-200 text-center line-height-loose text-md py-16"},vt={class:"mx-auto max-w-75ch intro md-text-lg"},xt={key:0,class:"p-2 flex flex-col mt-8"},wt={class:"text-4xl font-bold"},_t=d("div",{class:"text-lg"},"web synths",-1),Tt={key:1,class:"p-2 flex flex-col mt-8"},St={class:"text-4xl font-bold"},It=d("div",{class:"text-lg"},"web musicians",-1),kt={__name:"AboutUs",props:{synths:{type:Number,default:30}},setup(e){const t=v(),s=v([]),i=le(()=>s.value.length),n=pe(i);de(()=>{fetch("https://corsproxy.io/?https://db.chromatone.center/items/players?limit=-1").then(l=>l.json()).then(({data:l})=>s.value=l)});const o=me(t),{share:a,isSupported:c}=ge();function u(){a({title:"Web synths collection",text:"Look at this online synthesizer collection. No need to install anything - just your browser and any MIDI controller will do.",url:location.href})}return(l,g)=>(m(),b("div",yt,[d("div",vt,[A(l.$slots,"default"),d("div",{class:"flex justify-center",ref_key:"counters",ref:t},[f(o)?(m(),b("div",xt,[d("div",wt,D(e.synths),1),_t])):N("",!0),f(o)&&i.value>0?(m(),b("div",Tt,[d("div",St,D(f(n).toFixed())+"+",1),It])):N("",!0)],512),f(c)?(m(),b("button",{key:0,class:"text-white py-2 px-4 mt-6 shadow-lg rounded-lg cursor-pointer bg-green-600 -hover-translate-y-2px transition",onClick:g[0]||(g[0]=y=>u())},"Share now to save for later")):N("",!0)])]))}},Ct=d("h2",{class:"text-lg font-bold"},"Welcome to our free web synth collection!",-1),Ot=d("p",null,[d("a",{href:"https://playtronica.com",target:"_blank",rel:"noopener"},"Playtronica"),T(" is a digital playground that explores the possibilities of the material world through technology, creating gadgets that make the world musical. "),d("a",{href:"https://chromatone.center",target:"_blank",rel:"noopener"},"Chromatone"),T(" is a visual language for music education, research, and performance. We share our passion for web-based music instruments. Welcome to the community!")],-1),Lt=JSON.parse('{"title":"Web synths","description":"Web synthesizers to play with MIDI controllers","frontmatter":{"title":"Web synths","description":"Web synthesizers to play with MIDI controllers","date":"2023-06-22T00:00:00.000Z","layout":"home"},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1692108519000}'),$t={name:"index.md"},Mt=Object.assign($t,{setup(e){return(t,s)=>(m(),b("div",null,[C(Qe),C(kt,null,{default:w(()=>[Ct,Ot]),_:1}),C(bt,null,{button:w(()=>[T("JOIN THE COMMUNITY")]),notice:w(()=>[T("Your access status will be saved per device and you won't need to enter your e-mail again.")]),default:w(()=>[T(" We are building a community of web-based musicians. Type in your e-mail to instantly get full access to the collection and occasionally receive community updates. ")]),_:1})]))}});export{Lt as __pageData,Mt as default}; diff --git a/cover/fluoresynth-by-electric-telepathy.webp b/cover/fluoresynth-by-electric-telepathy.webp new file mode 100644 index 00000000..83ef1a11 Binary files /dev/null and b/cover/fluoresynth-by-electric-telepathy.webp differ diff --git a/cover/online-sequencer.webp b/cover/online-sequencer.webp index c5e08a15..f74b371e 100644 Binary files a/cover/online-sequencer.webp and b/cover/online-sequencer.webp differ diff --git a/cover/sympathetic-synthesizer-system-mk-1.webp b/cover/sympathetic-synthesizer-system-mk-1.webp new file mode 100644 index 00000000..8f12b755 Binary files /dev/null and b/cover/sympathetic-synthesizer-system-mk-1.webp differ diff --git a/cover/virtualpiano.eu.webp b/cover/virtualpiano.eu.webp new file mode 100644 index 00000000..19212742 Binary files /dev/null and b/cover/virtualpiano.eu.webp differ diff --git a/hashmap.json b/hashmap.json index 5e8b9bda..6dd0b705 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"readme.md":"196069c8","index.md":"41cab868"} +{"readme.md":"196069c8","index.md":"be2b63f2"} diff --git a/index.html b/index.html index 8c71b79d..64bf13df 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - + @@ -45,8 +45,8 @@ -
Web synths

Appearance

Welcome to our free web synth collection!

Playtronica is a digital playground that explores the possibilities of the material world through technology, creating gadgets that make the world musical. Chromatone is a visual language for music education, research, and performance. We share our passion for web-based music instruments. Welcome to the community!

Your access status will be saved per device and you won't need to enter your e-mail again.
With ❤️ by Chromatone and Playtronica
- +
Web synths

Appearance

Welcome to our free web synth collection!

Playtronica is a digital playground that explores the possibilities of the material world through technology, creating gadgets that make the world musical. Chromatone is a visual language for music education, research, and performance. We share our passion for web-based music instruments. Welcome to the community!

Your access status will be saved per device and you won't need to enter your e-mail again.
With ❤️ by Chromatone and Playtronica
+ \ No newline at end of file