-
-
-
-
-
-
- `}});const E="data:audio/mp3;base64,//MkxAAHiAICWABElBeKPL/RANb2w+yiT1g/gTok//lP/W/l3h8QO/OCdCqCW2Cw//MkxAQHkAIWUAhEmAQXWUOFW2dxPu//9mr60ElY5sseQ+xxesmHKtZr7bsqqX2L//MkxAgFwAYiQAhEAC2hq22d3///9FTV6tA36JdgBJoOGgc+7qvqej5Zu7/7uI9l//MkxBQHAAYi8AhEAO193vt9KGOq+6qcT7hhfN5FTInmwk8RkqKImTM55pRQHQSq//MkxBsGkgoIAABHhTACIJLf99nVI///yuW1uBqWfEu7CgNPWGpUadBmZ////4sL//MkxCMHMAH9iABEmAsKioqKigsLCwtVTEFNRTMuOTkuNVVVVVVVVVVVVVVVVVVV//MkxCkECAUYCAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";async function k(t){if("suspended"===Tone.context.state){const e=Tone.context.resume(),n=document.createElement("audio");n.controls=!1,n.preload="auto",n.loop=!1,n.src=E,n.title="Tone.js Examples";let i=Promise.resolve();try{i=await n.play()}catch(t){i=Promise.resolve(),console.log("did not start audio")}await Promise.all([i,e])}}const M=i.b`
`,A=i.b`
`;customElements.define("tone-play-toggle",class extends i.a{static get properties(){return{playing:{type:Boolean},disabled:{type:Boolean}}}constructor(){super(),this.playing=!1}updated(t){t.has("playing")&&(this.dispatchEvent(new CustomEvent("change",{detail:this.playing,composed:!0,bubbles:!0})),this.dispatchEvent(new CustomEvent("play",{detail:this.playing,composed:!0,bubbles:!0})))}bind(t){this.addEventListener("change",e=>{e.detail?t.start():t.stop()}),setInterval(()=>{"stopped"===t.state&&(this.playing=!1)},100)}async _clicked(t){await k(),this.playing=!this.playing}render(){return i.b`
-
-
-
-
- `}});var I=n(137),C=n.n(I);customElements.define("tone-player-viz",class extends i.a{static get properties(){return{color:{type:String},loading:{type:Boolean}}}constructor(){super(),this.color="black",this.loading=!0}_computeRMS(t,e){if(this._waveform&&this._waveform.length===e)return;const n=t.toArray(0),i=[];for(let t=0;t
Math.scale(Math.pow(t,.8),0,o,0,1))}visualize(t){if(this.loading=!t.loaded,t.loaded){const e=t.buffer,n=this.shadowRoot.querySelector("canvas");n.width=2*n.clientWidth,n.height=2*n.clientHeight;const{width:i,height:o}=n,r=n.getContext("2d");r.clearRect(0,0,i,o),this._computeRMS(e,i);const s=Math.scale(t.loopStart,0,e.duration,0,i);let a=Math.scale(t.loopEnd,0,e.duration,0,i);0===t.loopEnd&&(a=i),r.fillStyle=this.color;const l=C()(this.color).setAlpha(.2).toRgbString();this._waveform.forEach((e,n)=>{const c=e*o,u=t.reverse?i-n:n;t.loop&&(r.fillStyle=s>u||u>a?l:this.color),r.fillRect(u,o/2-c/2,1,c),r.fill()})}}render(){return i.b`
-
-
- loading
- `}});customElements.define("tone-player",class extends o.a{static get properties(){return{label:{type:String},duration:{type:Number}}}constructor(){super(),this.label="Player",this.duration=0}bind(t){const e=setInterval(()=>{t.loaded&&(clearInterval(e),this.duration=t.buffer.duration,this.sync(t))},100);super.bind(t)}render(){return i.b`
-
- this.collapsed=t.detail}
- ?collapsed=${this.collapsed} label="${this.label}">
-
-
-
-
-
-
-
-
-
-
-
-
-
- `}});var T=n(99),N=n.n(T);customElements.define("tone-slider",class extends i.a{static get properties(){return{min:{type:Number},max:{type:Number},step:{type:Number},value:{type:Number},default:{type:Number},exp:{type:Number},anchor:{type:String},label:{type:String},units:{type:String},integer:{type:Boolean},attribute:{type:String},bare:{type:Boolean}}}constructor(){super(),this.min=0,this.max=100,this.step=1,this.value=50,this.exp=1,this.anchor="left",this.integer=!1,this.bare=!1,this._setThrottle=-1}_logValue(t){const e=Math.pow(t,this.exp),n=Math.pow(1,this.exp),i=Math.pow(101,this.exp);let o=Math.scale(e,n,i,this.min,this.max);this.integer&&(o=Math.round(o)),this.value=o,this.dispatchEvent(new CustomEvent("input",{composed:!0,detail:this.value}))}_exp(t,e){return Math.sign(t)*Math.pow(Math.abs(t),e)}_logPosition(){const t=Math.scale(this.value,this.min,this.max,Math.pow(1,this.exp),Math.pow(101,this.exp));return Math.pow(t,1/this.exp)}_beautifyVal(){const t=Math.abs(this.min-this.max);return t>10||this.integer?this.value.toFixed(0):t>1&&1===this.exp?this.value.toFixed(1):this.value.toFixed(2)}_getStep(){const t=Math.abs(this.min-this.max);return t>10||this.integer?1:t>1&&1===this.exp?.1:.01}sync(t){const e=this.attribute;void 0!==t[e].value?this.value=Math.clamp(t[e].value,this.min,this.max):this.value=Math.clamp(t[e],this.min,this.max)}set(t){const e=this.attribute;isFinite(this.value)&&(void 0!==t[e].value?t[e].value!==this.value&&(t[e].value=this.value):t[e]!==this.value&&(t[e]=this.value))}updated(t){super.updated(t),t.has("value")&&(this.dispatchEvent(new CustomEvent("change",{composed:!0,detail:this.value,bubbles:!0})),this.attribute&&this.dispatchEvent(new CustomEvent(this.attribute,{composed:!0,detail:this.value,bubbles:!0})))}_numberInput(t){const e=Math.clamp(parseFloat(t.target.value),this.min,this.max);this.integer?this.value=Math.floor(e):this.value=e}render(){const t=Math.clamp(this._logPosition(),0,100);let e=t-1,n=0;return"center"===this.anchor&&(n=50-Math.max(50-e,0),e=Math.abs(50-e)),i.b`
-
- "Backspace"===t.key&&void 0!==this.default?this.value=this.default:""}>
-
-
${this.units}
-
-
-
this._logValue(parseFloat(t.target.value))}
- min="1"
- max="101"
- .step=${Math.pow(this.step,1/this.exp)}
- @focus=${()=>this.shadowRoot.querySelector("#circle").classList.add("focus")}
- @blur=${()=>this.shadowRoot.querySelector("#circle").classList.remove("focus")}
- .value=${t}>
-
-
-
-
- `}});customElements.define("tone-noise",class extends o.a{static get properties(){return{label:{type:String}}}constructor(){super(),this.label="Noise"}render(){return i.b`
-
-
-
-
-
-
-
-
-
-
- `}});customElements.define("tone-oscilloscope",class extends i.a{constructor(){super(),this._waveform=new Tone.Waveform(256)}bind(t){t.connect(this._waveform),this._canvas=this.shadowRoot.querySelector("canvas"),this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight,this._context=this._canvas.getContext("2d"),this.loop(),window.addEventListener("resize",()=>{this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight})}loop(){requestAnimationFrame(this.loop.bind(this));const t=this._waveform.getValue(),e=this._canvas.width,n=this._canvas.height;this._context.clearRect(0,0,e,n),this._context.beginPath(),this._context.lineWidth=4,t.forEach((i,o)=>{const r=Math.scale(o,0,t.length,0,e),s=Math.scale(i,-1,1,0,n);0===o?this._context.moveTo(r,s):this._context.lineTo(r,s)}),this._context.lineCap="round",this._context.strokeStyle="white",this._context.stroke()}render(){return i.b`
-
-
- `}});const P=i.b``,O=i.b``;customElements.define("tone-microphone",class extends o.a{static get properties(){return{label:{type:String},open:{type:Boolean},supported:{type:Boolean}}}constructor(){super(),this.label="Noise",this.inputs=[],this.supported=Tone.UserMedia.supported}async bind(t){if(!this.supported)return;setInterval(()=>{this.open="started"===t.state},100);const e=this.shadowRoot.querySelector("tone-select");this.shadowRoot.querySelector("#mic").addEventListener("click",n=>{k(),this.open?t.close():t.open(e.value)}),e.addEventListener("change",n=>{this.open&&t.open(e.value)}),this.shadowRoot.querySelector("tone-oscilloscope").bind(t),this.inputs=await Tone.UserMedia.enumerateDevices(),this.requestUpdate()}render(){return i.b`
-
-
-
- ${this.supported?i.b`
-
- ${this.inputs.map(t=>i.b`
-
- `)}
-
-
- `:i.b`
-
UserMedia Not Supported
- `}
-
- `}});customElements.define("tone-grain-player",class extends o.a{static get properties(){return{label:{type:String},duration:{type:Number}}}constructor(){super(),this.label="GrainPlayer",this.duration=0}bind(t){const e=setInterval(()=>{t.loaded&&(clearInterval(e),this.duration=t.buffer.duration,this.sync(t))},100);super.bind(t)}render(){return i.b`
-
- this.collapsed=t.detail}
- ?collapsed=${this.collapsed} label="${this.label}">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `}});customElements.define("tone-multislider",class extends i.a{static get properties(){return{label:{type:String},length:{type:Number},attribute:{type:String}}}constructor(){super(),this.length=32,this.value=Array.from(new Float32Array(this.length))}_scaleArray(t){const e=Math.max(1,...t);return t.slice(0,this.length).map(t=>Math.clamp(Math.abs(t/e),0,1))}sync(t){this._scaleArray(t[this.attribute]).toString()!==this.value&&(this.value=this._scaleArray(t[this.attribute]),this.requestUpdate())}set(t){t[this.attribute]=this.value}_eventToXY(t){return{x:t.offsetX/t.target.offsetWidth,y:1-t.offsetY/t.target.offsetHeight}}mousedown(t){if(t.buttons){const{x:e,y:n}=this._eventToXY(t),i=this.value.length;if(this.value[Math.floor(e*this.length)]=n,i!==this.value.length)for(let t=0;t
- :host {
- display: block;
- }
-
- #container {
- position: relative;
- width: 100%;
- height: 55px;
- display: block;
- background-color: #eee;
- margin-top: 5px;
- }
-
- .slider {
- width: calc(100% / ${this.length});
- display: inline-block;
- height: 100%;
- position: relative;
- float: left;
- pointer-events: none;
- }
-
- .slider .fill {
- color: green;
- width: 100%;
- height: 0%;
- background-color: #777;
- position: absolute;
- bottom: 0px;
- }
-
- label {
- font-family: var(--label-font-family);
- font-size: var(--label-font-size);
- }
-
-
-
- ${t.map(t=>i.b`
-
-
-
- `)}
-
- `}});var R=n(138),$=n.n(R);customElements.define("tone-keyboard-note",class extends i.a{static get properties(){return{note:{type:Number},color:{type:String},activecolor:{type:String},active:{type:Boolean},velocity:{type:Number},touchid:{type:Number}}}fromMidi(t){return Tone.Midi(t).toNote()}constructor(){super(),this.color="#eee",this.activecolor="white",this.active=!1,this.touchid=-1}updated(t){if(t.has("active")){const t=this.active?"noteon":"noteoff";this.active||(this.touchid=-1),this.dispatchEvent(new CustomEvent(t,{detail:{name:this.fromMidi(this.note),midi:this.note,velocity:this.active?1:0},composed:!0,bubbles:!0}))}}mouseover(t){t.buttons&&(this.active=!0,this.shadowRoot.querySelector("button").focus())}keydown(t){k(),t.repeat||" "!==t.key&&"Enter"!==t.key||(this.active=!0)}keyup(t){" "!==t.key&&"Enter"!==t.key||(this.active=!1)}touchstart(t){t.preventDefault(),this.touchid=t.touches[0].identifier,this.active=!0}render(){const t=0!==this.note;return i.b`
-
-
- ${t?i.b`
- `:i.b``}
-
- `}});customElements.define("tone-keyboard-octave",class extends i.a{static get properties(){return{octave:{type:Number}}}constructor(){super(),this.octave=1}noteon(t){this.shadowRoot.querySelector(`tone-keyboard-note[note="${t}"]`).active=!0}noteoff(t){this.shadowRoot.querySelector(`tone-keyboard-note[note="${t}"]`).active=!1}_getNoteByTouchId(t){const e=Array.from(this.shadowRoot.querySelectorAll("tone-keyboard-note")).find(e=>e.touchid===t);if(e&&e.note)return e}render(){const t=12*this.octave,e=[0,2,4,5,7,9,11].map(e=>e+t),n=[0,1,3,0,6,8,10,0].map(e=>e?e+t:0);return i.b`
-
-
-
- ${e.map(t=>i.b`
-
- `)}
-
-
- ${n.map(t=>i.b`
-
- `)}
-
-
- `}});customElements.define("tone-keyboard",class extends i.a{static get properties(){return{rootoctave:{type:Number},octaves:{type:Number},polyphonic:{type:Boolean}}}constructor(){super(),this.rootoctave=4,this.octaves=4,this.polyphonic=!1,this._computerKeyboard=new $.a({polyphony:1/0}),this._computerKeyboard.down(t=>{k(),this.noteon(t.note)}),this._computerKeyboard.up(t=>{this.noteoff(t.note)})}_getNoteByTouchId(t){const e=Array.from(this.shadowRoot.querySelectorAll("tone-keyboard-octave")).find(e=>e._getNoteByTouchId(t));if(e)return e._getNoteByTouchId(t)}_touchmove(t){Array.from(t.changedTouches).forEach(t=>{this._getNoteByTouchId(t.identifier);const e=this._getNoteByTouchId(t.identifier),n=this.shadowRoot.elementFromPoint(t.clientX,t.clientY);if(n&&n.shadowRoot){const i=n.shadowRoot.elementFromPoint(t.clientX,t.clientY);i&&i.note&&e.note!==i.note&&(e.active=!1,e.touchid=-1,i.active=!0,i.touchid=t.identifier)}})}_touchend(t){Array.from(t.changedTouches).forEach(t=>{this._getNoteByTouchId(t.identifier);const e=this._getNoteByTouchId(t.identifier);e&&e.active&&(e.active=!1,e.touchid=-1)})}noteon(t){const e=Math.floor(t/12),n=this.shadowRoot.querySelector(`tone-keyboard-octave[octave="${e}"]`);n&&n.noteon(t)}noteoff(t){const e=Math.floor(t/12),n=this.shadowRoot.querySelector(`tone-keyboard-octave[octave="${e}"]`);n&&n.noteoff(t)}render(){const t=[];for(let e=this.rootoctave;e
- #container {
- display: flex;
- background-color: white;
- height: 80px;
- }
-
- tone-keyboard-octave {
- flex-grow: 1;
- }
-
-
- ${t.map(t=>i.b`
-
- `)}
-
- `}});var F=n(38),z=n.n(F);customElements.define("tone-midi-in",class extends i.a{constructor(){super(),z.a.enable(t=>{t&&error(t),z.a.addListener("connected",t=>{"input"===t.port.type&&this.requestUpdate()}),z.a.addListener("disconnected",t=>{this.requestUpdate()})})}_flash(){clearTimeout(this._flashTimeout);const t=this.shadowRoot.querySelector("#light");t.classList.add("flash"),this._flashTimeout=setTimeout(()=>t.classList.remove("flash"),100)}_connectMidi(t){if("none"===t.target.value)return void this.shadowRoot.querySelector("#light").classList.remove("connected");this.shadowRoot.querySelector("#light").classList.add("connected");const e=z.a.getInputById(t.target.value);e.addListener("noteon","all",t=>{const e=`${t.note.name}${t.note.octave}`,n=t.note.number;this._flash(),this.dispatchEvent(new CustomEvent("noteon",{detail:{name:e,midi:n,velocity:t.velocity},composed:!0,bubbles:!0}))}),e.addListener("noteoff","all",t=>{const e=`${t.note.name}${t.note.octave}`,n=t.note.number;this._flash(),this.dispatchEvent(new CustomEvent("noteoff",{detail:{name:e,midi:n,velocity:t.velocity},composed:!0,bubbles:!0}))}),e.addListener("controlchange","all",t=>{this._flash()})}render(){return window.WebMidi=z.a,z.a.supported?i.b`
-
-
-
-
-
-
- ${z.a.inputs.map(t=>i.b`
-
- `)}
-
-
- `:i.b``}});customElements.define("tone-piano",class extends i.a{static get properties(){return{polyphonic:{type:Boolean}}}constructor(){super()}bind(t){this.addEventListener("noteon",e=>{t.triggerAttack(e.detail.name)}),this.addEventListener("noteoff",e=>{this.polyphonic?t.triggerRelease(e.detail.name):t.triggerRelease()})}firstUpdated(){super.firstUpdated();const t=this.shadowRoot.querySelector("tone-keyboard");this.shadowRoot.querySelector("tone-midi-in").addEventListener("noteon",e=>{e.stopPropagation(),t.noteon(e.detail.midi)}),this.shadowRoot.querySelector("tone-midi-in").addEventListener("noteoff",e=>{e.stopPropagation(),t.noteoff(e.detail.midi)}),window.addEventListener("resize",this._resize.bind(this)),setTimeout(()=>this._resize(),100)}_resize(){const t=this.shadowRoot.querySelector("#container").clientWidth,e=Math.clamp(Math.floor(t/100)-1,1,8),n=Math.ceil(Math.scale(e,1,8,5,1));this.shadowRoot.querySelector("tone-keyboard").setAttribute("rootoctave",n),this.shadowRoot.querySelector("tone-keyboard").setAttribute("octaves",e)}render(){return i.b`
-
-
-
-
-
-
- `}});customElements.define("tone-button",class extends i.a{static get properties(){return{label:{type:String},disabled:{type:Boolean}}}constructor(){super()}_clicked(t){k(),this.disabled&&t.stopPropagation()}render(){return i.b`
-
-
-
-
- `}});customElements.define("tone-trigger",class extends i.a{static get properties(){return{triggered:{type:Boolean},disabled:{type:Boolean}}}constructor(){super(),this.triggered=!1}updated(t){t.has("triggered")&&this.dispatchEvent(new CustomEvent("change",{detail:this.triggered,composed:!0,bubbles:!0}))}bind(t){this.addEventListener("change",e=>{e.detail?t.start():t.stop()})}_mousedown(t){k(),"touchstart"===t.type&&t.preventDefault(),this.triggered=!0}_keydown(t){k()," "!==t.key&&"Enter"!==t.key||(this.triggered=!0)}_keyup(t){" "!==t.key&&"Enter"!==t.key||(this.triggered=!1)}render(){return i.b`
-
-
-
-
- `}});customElements.define("tone-step-sequencer",class extends i.a{static get properties(){return{label:{type:String},rows:{type:Number},columns:{type:Number},highlight:{type:Number}}}constructor(){super(),this.rows=4,this.columns=16,this.highlight=-1,this.values=[],this.adding=!1}get currentColumn(){return this.values[Math.clamp(this.highlight,0,this.columns-1)]}_mousedown(t,e,n){t.cancelable&&t.preventDefault(),this.adding=!this.values[e][n],this.values[e][n]=this.adding,this.requestUpdate()}_mousemove(t,e,n){if(t.cancelable&&t.preventDefault(),t.buttons)this.values[e][n]=this.adding,this.requestUpdate();else if(t.changedTouches){const{clientWidth:i,clientHeight:o}=this.shadowRoot.querySelector("#container"),{top:r,left:s}=this.getBoundingClientRect();Array.from(t.changedTouches).forEach(t=>{const a=(t.clientX-s)/i,l=(t.clientY-r)/o;e=Math.floor(a*this.columns),n=Math.floor(l*this.rows),this.values[e][n]=this.adding}),this.requestUpdate()}}updated(t){if(t.has("columns")||t.has("rows")){this.values=[];for(let t=0;t
- :host {
- display: inline-block;
- width: 100%;
- height: 120px;
- }
- #container {
- width: 100%;
- height: 100%;
- display: flex;
- }
- .column {
- flex: 1;
- display: flex;
- flex-direction: column;
- }
-
- .column.highlight {
- background-color: var(--color-gray);
- }
-
- .column.highlight .row {
- transition-duration: 0.4s;
- }
-
- .column.highlight .row.filled {
- transition: background-color 0.1s;
- }
-
- .column.highlight .row.filled{
- background-color: white;
- }
-
- .row {
- flex: 1;
- margin: 1px;
- background-color: var(--color-light-gray);
- transition: background-color 0s;
- }
-
- .row.filled {
- background-color: var(--color-teal);
- }
-
-
- ${this.values.map((t,e)=>i.b`
-
- ${t.map((t,n)=>i.b`
-
this._mousemove(t,e,n)}
- @touchmove=${t=>this._mousemove(t,e,n)}
- @mousedown=${t=>this._mousedown(t,e,n)}
- @touchstart=${t=>this._mousedown(t,e,n)}
- @touchend=${()=>this.adding=!1}
- @mouseup=${()=>this.adding=!1}
- class="row ${t?"filled":""}">
- `)}
-
- `)}
-
- `}});customElements.define("tone-position",class extends i.a{static get properties(){return{position:{type:Number},min:{type:Number},max:{type:Number}}}constructor(){super(),this.position=0,this.min=0,this.max=1,this._dragging=!1}bind(t){this.tone=t,this.loop(t)}updated(t){if(t.has("position")){const t=Math.scale(this.position,this.min,this.max,0,1);this.dispatchEvent(new CustomEvent("position",{detail:t,composed:!0}))}}loop(t){requestAnimationFrame(this.loop.bind(this,t)),this._dragging||(this.position=t.progress)}_change(t){if(this._dragging=!0,clearTimeout(this._dragTimeout),this._dragTimeout=setTimeout(()=>this._dragging=!1,200),this.tone){const e=Math.scale(t.detail,this.min,this.max,0,this.tone.loopEnd);this.tone.seconds=e,this.position=this.tone.progress}}render(){return i.b`
-
-
-
-
-
- `}});customElements.define("tone-slider-2d",class extends i.a{static get properties(){return{x:{type:Number},y:{type:Number}}}constructor(){super(),this.x=.5,this.y=.5}_resize(){const t=this.shadowRoot.querySelector("#container");this._slider.resize(t.clientWidth,t.clientHeight)}_getXY(t){t.stopPropagation(),t.preventDefault();const{clientWidth:e,clientHeight:n}=this.shadowRoot.querySelector("#container");let i=t.offsetX,o=t.offsetY;if(t.changedTouches){const{top:e,left:n}=this.getBoundingClientRect();i=t.changedTouches[0].clientX-n,o=t.changedTouches[0].clientY-e}return{x:Math.clamp(i/e,0,1),y:1-Math.clamp(o/n,0,1)}}_mousedown(t){const{x:e,y:n}=this._getXY(t);this.x=e,this.y=n,this.dispatchEvent(new CustomEvent("mousedown",{detail:{x:this.x,y:this.y},composed:!0}))}_mouseup(t){const{x:e,y:n}=this._getXY(t);this.x=e,this.y=n,this.dispatchEvent(new CustomEvent("mouseup",{detail:{x:this.x,y:this.y},composed:!0}))}_mousemove(t){if(t.buttons||t.changedTouches){const{x:e,y:n}=this._getXY(t);this.x=e,this.y=n,this.dispatchEvent(new CustomEvent("change",{detail:{x:this.x,y:this.y},composed:!0}))}}_mouseleave(t){t.buttons&&this._mouseup(t)}render(){return i.b`
-
-
- `}});var D=n(50);customElements.define("tone-envelope-viz",class extends D.a{constructor(){super(),this.min=0,this.max=1.1,this.duration=.1,this.alt="envelope curve"}async visualize(t){const e=t.get(),n=e.attack+e.decay+e.release,i=await Tone.Offline(()=>{const t=(new Tone.Envelope).toDestination();t.set(e),t.attack*=1,t.decay*=1,t.release*=1,t.toDestination(),t.triggerAttack(.001),t.triggerRelease(1*(e.attack+e.decay+.01)+.001)},1*(n+.01)+.002);this.buffer=i.toArray(0),this.requestUpdate()}});customElements.define("tone-envelope-curve",class extends i.a{static get properties(){return{label:{type:String},attribute:{type:String},basic:{type:Boolean}}}constructor(){super(),this.basic=!1}sync(t){const e=t[this.attribute];this.shadowRoot.querySelector("tone-select-attribute").value=e}get value(){return this.shadowRoot.querySelector("tone-select-attribute").value}set value(t){this.shadowRoot.querySelector("tone-select-attribute").value=t}render(){let t=i.b``;return this.basic||(t=i.b`
-
-
-
-
-
- `),i.b`
-
-
-
- ${t}
-
- `}});class L extends o.a{static get properties(){return{label:{type:String}}}constructor(){super(),this.label="Envelope",this.collapsed=!1}renderAttributes(){return i.b``}render(){return i.b`
-
-
this.collapsed=t.detail}
- ?collapsed=${this.collapsed} label="${this.label}">
-
-
-
-
-
-
-
-
-
-
-
-
-
- ${this.renderAttributes()}
-
- `}}customElements.define("tone-envelope",L);customElements.define("tone-frequency-envelope",class extends L{renderAttributes(){return i.b`
-
-
-
-
- `}});customElements.define("tone-meter",class extends i.a{static get properties(){return{stereo:{type:Boolean},level:{type:Boolean},color:{type:String}}}constructor(){super(),this.color="#777"}bind(t){if(this.stereo,this.stereo){const e=new Tone.Split;t.connect(e),this._meters=[new Tone.Meter(.9),new Tone.Meter(.9)],e.left.connect(this._meters[0]),e.right.connect(this._meters[1])}else this._meters=[new Tone.Meter(.9)],t.connect(this._meters[0]);this._canvas=this.shadowRoot.querySelector("canvas"),this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight,this._context=this._canvas.getContext("2d"),this.loop(),window.addEventListener("resize",()=>{this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight})}loop(){requestAnimationFrame(this.loop.bind(this));const{width:t,height:e}=this._canvas,n=this._meters.map(t=>t.getLevel()),i=n.map(t=>Math.clamp(Math.scale(t,-100,6,0,e),4,e));this._context.clearRect(0,0,t,e);const o=t/this._meters.length;this._context.fillStyle=this.color;const r=this._meters.length>1?5:0;i.forEach((t,n)=>{this._context.fillRect(n*o+r*n,e-t,o-r,t)}),this.level&&Array.from(this.shadowRoot.querySelectorAll(".level")).forEach((t,e)=>{let i=n[e];i<-100&&(i=-1/0),t.textContent=i.toFixed(2)})}render(){let t=i.b``;return this.level&&(t=this.stereo?i.b`
-
-Infinity
-
-Infinity
- `:i.b`
-
-Infinity
- `),i.b`
-
-
-
- ${this.level?i.b`
-
${t}
`:i.b``}
-
- `}});var q=n(139),j=n.n(q);customElements.define("tone-presets",class extends i.a{static get properties(){return{label:{type:String},presets:{type:String}}}constructor(){super(),this.label="Presets",this.presets=JSON.stringify("[]"),this._options={}}bind(t){this.addEventListener("preset",e=>{const n=new t.constructor,i=n.get();n.dispose();const o=j()({},i,e.detail);t.set(o),this.dispatchEvent(new CustomEvent("sync",{detail:o,composed:!0,bubbles:!0}))})}_clicked(t,e){const n=Object.assign({},e);this.dispatchEvent(new CustomEvent("preset",{detail:n,composed:!0,bubbles:!0}))}render(){if("undefined"!==this.presets){const t=JSON.parse(this.presets);return i.b`
-
-
-
${this.label}
-
- ${t.map((t,e)=>i.b`
- `)}
-
-
-
- `}return i.b``}});class H extends o.a{static get properties(){return{label:{type:String},presets:{type:String},nopresets:{type:Boolean},collapsed:{type:Boolean},effect:{type:Boolean},polyphonic:{type:Boolean}}}constructor(){super(),this.label="",this.effect=!1,this.polyphonic=!1}bind(t){this.shadowRoot.querySelector("tone-meter").bind(t);const e=this.shadowRoot.querySelector("tone-presets");e&&e.bind(t),this.polyphonic?t.voices.forEach(t=>super.bind(t)):super.bind(t)}renderAttributes(){return i.b``}render(){const t=i.b`
-
-
-
-
- `;return i.b`
-
-
-
- ${this.effect?t:i.b``}
-
- ${this.renderAttributes()}
-
- ${this.nopresets?i.b``:i.b``}
-
- `}}customElements.define("tone-instrument",H);const V=[{portamento:0,oscillator:{type:"fatsine4",spread:60,count:10},envelope:{attack:.4,decay:.01,sustain:1,attackCurve:"sine",releaseCurve:"sine",release:.4}},{portamento:0,oscillator:{type:"square4"},envelope:{attack:2,decay:1,sustain:.2,release:2}},{portamento:0,oscillator:{type:"pulse",width:.8},envelope:{attack:.01,decay:.05,sustain:.2,releaseCurve:"bounce",release:.4}},{portamento:.2,oscillator:{type:"sawtooth"},envelope:{attack:.03,decay:.1,sustain:.2,release:.02}},{portamento:.2,oscillator:{partials:[1,0,2,0,3]},envelope:{attack:.001,decay:1.2,sustain:0,release:1.2}},{portamento:.2,oscillator:{type:"fatcustom",partials:[.2,1,0,.5,.1],spread:40,count:3},envelope:{attack:.001,decay:1.6,sustain:0,release:1.6}},{portamento:0,oscillator:{type:"fatsawtooth",count:3,spread:30},envelope:{attack:.01,decay:.1,sustain:.5,release:.4,attackCurve:"exponential"}},{portamento:0,oscillator:{type:"sine"},envelope:{attack:.001,decay:.1,sustain:.1,release:1.2}}];customElements.define("tone-synth",class extends H{constructor(){super(),this.label="Synth",this.presets=JSON.stringify(V)}renderAttributes(){return i.b`
-
-
-
- `}});const B=[{portamento:0,oscillator:{type:"square"},filter:{Q:6,type:"lowpass",rolloff:-24},envelope:{attack:.005,decay:.1,sustain:.9,release:1},filterEnvelope:{attack:.06,decay:.2,sustain:.5,release:2,baseFrequency:200,octaves:7,exponent:2}},{portamento:0,oscillator:{type:"sawtooth"},filter:{Q:2,type:"bandpass",rolloff:-24},envelope:{attack:.01,decay:.1,sustain:.2,release:.6},filterEnvelope:{attack:.02,decay:.4,sustain:1,release:.7,releaseCurve:"linear",baseFrequency:20,octaves:5}},{portamento:0,oscillator:{type:"fmsquare5",modulationType:"triangle",modulationIndex:2,harmonicity:.501},filter:{Q:1,type:"lowpass",rolloff:-24},envelope:{attack:.01,decay:.1,sustain:.4,release:2},filterEnvelope:{attack:.01,decay:.1,sustain:.8,release:1.5,baseFrequency:50,octaves:4.4}},{portamento:.08,oscillator:{type:"custom",partials:[2,1,3,2,.4]},filter:{Q:4,type:"lowpass",rolloff:-48},envelope:{attack:.04,decay:.06,sustain:.4,release:1},filterEnvelope:{attack:.01,decay:.1,sustain:.6,release:1.5,baseFrequency:50,octaves:3.4}},{portamento:.01,oscillator:{type:"sawtooth"},filter:{Q:2,type:"lowpass",rolloff:-24},envelope:{attack:.1,decay:.1,sustain:.6,release:.5},filterEnvelope:{attack:.05,decay:.8,sustain:.4,release:1.5,baseFrequency:2e3,octaves:1.5}},{portamento:0,oscillator:{type:"pwm",modulationFrequency:1},filter:{Q:6,rolloff:-24},envelope:{attack:.025,decay:.3,sustain:.9,release:2},filterEnvelope:{attack:.245,decay:.131,sustain:.5,release:2,baseFrequency:20,octaves:7.2,exponent:2}},{portamento:0,oscillator:{type:"sawtooth"},filter:{Q:3,type:"highpass",rolloff:-12},envelope:{attack:.01,decay:.3,sustain:0,release:.9},filterEnvelope:{attack:.01,decay:.1,sustain:0,release:.1,baseFrequency:800,octaves:-1.2}}];customElements.define("tone-mono-synth",class extends H{constructor(){super(),this.label="MonoSynth",this.presets=JSON.stringify(B)}renderAttributes(){return i.b`
-
-
-
-
-
- `}});const G=[{frequency:300,envelope:{attack:.001,decay:.20958529411764706,sustain:0,release:.4888,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},harmonicity:17.075,modulationIndex:36.84,resonance:378.8235294117647,octaves:2.25},{frequency:200,envelope:{attack:.01,decay:.0427764705882353,sustain:0,release:.4888,attackCurve:"linear",decayCurve:"linear",releaseCurve:"exponential"},harmonicity:12,modulationIndex:21.04,resonance:106.19607843137256,octaves:4},{frequency:300,envelope:{attack:.09584313725490196,decay:.26265196078431374,sustain:0,release:.4888,attackCurve:"ripple",decayCurve:"exponential",releaseCurve:"exponential"},harmonicity:.5,modulationIndex:11.56,resonance:474.0882352941176,octaves:.99},{frequency:300,envelope:{attack:.001,decay:.4,sustain:0,release:.2,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},harmonicity:12,modulationIndex:20,resonance:800,octaves:1.5}];customElements.define("tone-metal-synth",class extends H{constructor(){super(),this.label="MetalSynth",this.presets=JSON.stringify(G)}renderAttributes(){return i.b`
-
-
-
-
-
- `}});const U=[{pitchDecay:.0033411764705882354,octaves:.8300000000000001,oscillator:{frequency:440,detune:0,phase:0,type:"fmsine",modulationIndex:.1,modulationType:"sawtooth",harmonicity:.44,volume:0,mute:!1},envelope:{attack:6e-4,decay:.25,sustain:0,release:1.4,attackCurve:"exponential",decayCurve:"exponential",releaseCurve:"exponential"}},{pitchDecay:.008,octaves:2,oscillator:{type:"sine",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},envelope:{attack:6e-4,decay:.5,sustain:0,release:1.4,attackCurve:"exponential",decayCurve:"exponential",releaseCurve:"exponential"}},{pitchDecay:.019729411764705884,octaves:4.845,oscillator:{frequency:440,detune:0,phase:0,spread:80.4,count:3,type:"fatsine",partialCount:0,volume:0,mute:!1},envelope:{attack:.011560784313725491,decay:.22226666666666667,sustain:0,release:1.4,attackCurve:"sine",decayCurve:"exponential",releaseCurve:"exponential"}}];customElements.define("tone-membrane-synth",class extends H{constructor(){super(),this.label="MembraneSynth",this.presets=JSON.stringify(U)}renderAttributes(){return i.b`
-
-
-
-
- `}});customElements.define("tone-noise-synth",class extends H{constructor(){super(),this.label="NoiseSynth"}renderAttributes(){return i.b`
-
-
- `}});const W=[{harmonicity:1,modulationIndex:20.848,portamento:.024,oscillator:{type:"sawtooth9",frequency:440,detune:0,phase:0,partialCount:9},envelope:{attack:.012926470588235294,decay:.05975,sustain:.16,release:.18211764705882355,attackCurve:"exponential",decayCurve:"exponential",releaseCurve:"exponential"},modulation:{type:"custom",frequency:440,detune:0,phase:0,partials:[.8105694691387023,0,.0900632743487447,0,.03242277876554809,0,.016542234064055146,0,.010007030483193857,0,.00669892123255126,0,.004796269048158,0,.6,0,.0028047386475387615,.4727272727272728,.002245344789857901,0,.0018380260071172384,0,.0015322674274833694,0,.0012969111506219236,.8727272727272728,.0011118922759104286,0,.0009638162534348421,0,.0008434645880735718,0],partialCount:32},modulationEnvelope:{attack:.012926470588235294,decay:.08784411764705882,sustain:0,release:.08627941176470588,attackCurve:"exponential",decayCurve:"exponential",releaseCurve:"cosine"}},{harmonicity:1.515,modulationIndex:6.483999999999999,detune:0,oscillator:{type:"sawtooth3",frequency:440,detune:0,phase:0,partialCount:3,volume:0,mute:!1},envelope:{attack:.010585294117647059,decay:.27689411764705885,sustain:0,release:.7328941176470589,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},modulation:{type:"square",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},modulationEnvelope:{attack:.01,decay:.05975,sustain:0,release:.13635,attackCurve:"exponential",decayCurve:"exponential",releaseCurve:"exponential"},portamento:0},{harmonicity:1.655,modulationIndex:40,detune:0,oscillator:{type:"square",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},envelope:{attack:.09584313725490196,decay:.13174117647058822,sustain:.25,release:.5,attackCurve:"exponential",decayCurve:"exponential",releaseCurve:"exponential"},modulation:{type:"triangle",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},modulationEnvelope:{attack:.0427764705882353,decay:.8596519607843138,sustain:.08,release:3.392894117647059,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},portamento:.15899999999999997}];customElements.define("tone-fm-synth",class extends H{constructor(){super(),this.label="FMSynth",this.presets=JSON.stringify(W)}renderAttributes(){return i.b`
-
-
-
-
-
-
-
- `}});const Y=[{harmonicity:3.51,detune:0,oscillator:{type:"sawtooth",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},envelope:{attack:.01682843137254902,decay:.2,sustain:.3,release:.3,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},modulation:{type:"sine",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},modulationEnvelope:{attack:.6661147058823529,decay:1.1665411764705882,sustain:1,release:2.151691176470588,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},portamento:0},{harmonicity:2.88,detune:0,oscillator:{frequency:440,detune:0,phase:0,width:0,volume:0,mute:!1,type:"pulse"},envelope:{attack:.20958529411764706,decay:1.9219607843137254,sustain:.08,release:1.5132911764705883,attackCurve:"exponential",decayCurve:"linear",releaseCurve:"exponential"},modulation:{type:"square",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},modulationEnvelope:{attack:.01682843137254902,decay:1.1665411764705882,sustain:1,release:2.151691176470588,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},portamento:0},{harmonicity:2.355,detune:0,oscillator:{type:"sawtooth",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},envelope:{attack:.19729411764705884,decay:1.1072313725490197,sustain:.3,release:2.8358588235294118,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},modulation:{type:"triangle",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},modulationEnvelope:{attack:.09584313725490196,decay:1.1665411764705882,sustain:1,release:2.151691176470588,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},portamento:0}];customElements.define("tone-am-synth",class extends H{constructor(){super(),this.label="AMSynth",this.presets=JSON.stringify(Y)}renderAttributes(){return i.b`
-
-
-
-
-
-
- `}});customElements.define("tone-sampler",class extends H{constructor(){super(),this.label="Sampler"}renderAttributes(){return i.b`
-
-
-
-
-
-
- `}});customElements.define("tone-duo-synth",class extends H{constructor(){super(),this.label="MembraneSynth"}renderAttributes(){return i.b`
-
-
-
-
-
- `}});customElements.define("tone-filter-viz",class extends D.a{constructor(){super(),this.min=0,this.max=2.5,this.alt="filter response curve"}drawBackground(t,e,n){t.fillStyle="rgba(255, 255, 255, 0.3)",t.fillRect(0,.6*n,e,3),t.fill()}async visualize(t){this.buffer=t.getFrequencyResponse().map(t=>Math.pow(t,.5)),this.requestUpdate()}});customElements.define("tone-filter",class extends o.a{static get properties(){return{label:{type:String},frequency:{type:Boolean}}}constructor(){super(),this.label="Filter"}render(){return i.b`
-
-
this.collapsed=t.detail}
- ?collapsed=${this.collapsed} label="${this.label}">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ${this.frequency?i.b`
-
- `:i.b``}
-
-
-
- `}});customElements.define("tone-volume-slider",class extends i.a{static get properties(){return{value:{type:Number},attribute:{type:String}}}constructor(){super(),this.value=0}sync(t){this.shadowRoot.querySelector("tone-slider").sync(t)}render(){return i.b`
-
-
-
- this.value=t.detail}
- bare>
-
-
${this.value>=0?"+":""}${this.value.toFixed(0)} db
-
- `}});customElements.define("tone-channel",class extends o.a{static get properties(){return{label:{type:String},solo:{type:Boolean},mute:{type:Boolean},muted:{type:Boolean}}}bind(t){this.shadowRoot.querySelector("tone-meter").bind(t),this.addEventListener("mute",e=>{t.mute=e.detail}),this.addEventListener("solo",e=>{t.solo=e.detail}),setInterval(()=>{this.muted=t.muted},100),super.bind(t)}updated(t){super.updated(t),t.has("solo")&&this.dispatchEvent(new CustomEvent("solo",{detail:this.solo,composed:!0,bubbles:!0})),t.has("mute")&&this.dispatchEvent(new CustomEvent("mute",{detail:this.mute,composed:!0,bubbles:!0}))}render(){return i.b`
-
-
-
${this.label}
-
-
-
-
-
-
-
-
-
-
-
-
- `}});customElements.define("tone-transport",class extends o.a{static get properties(){return{controls:{type:Boolean},position:{type:Boolean}}}constructor(){super(),this.collapsed=!0}bind(t){super.bind(t),this.shadowRoot.querySelector("tone-play-toggle").bind(t),setInterval(()=>{this.shadowRoot.querySelector("#position").textContent=t.position},100)}render(){return i.b`
-
-
-
-
-
- ${this.controls?i.b`
-
-
-
-
-
-
-
-
- `:i.b``}
-
- `}});customElements.define("tone-compressor",class extends o.a{static get properties(){return{label:{type:String}}}constructor(){super(),this.label="Compressor",this.collapsed=!1}renderAttributes(){return i.b``}render(){return i.b`
-
-
this.collapsed=t.detail}
- ?collapsed=${this.collapsed} label="${this.label}">
-
-
-
-
-
-
-
-
-
-
-
-
- `}});const K=i.b`
`,J=(i.b`
`,i.b`
`);customElements.define("tone-unmute",class extends o.a{static get properties(){return{suspended:{type:Boolean},muted:{type:Boolean},focused:{type:Boolean},novolume:{type:Boolean}}}constructor(){super(),this.suspended=!0,this.muted=!1,this.focused=!1,setInterval(()=>{this.suspended="suspended"===Tone.context.state},100)}updated(t){if(t.has("muted")){Tone.Master.mute=this.muted;const t=this.shadowRoot.querySelector("#volume");this.novolume||this.muted||t.min!=t.value||(t.value=0)}}_clicked(t){k(),"suspended"!==Tone.context.state&&(this.muted=!this.muted)}_adjustVolume(t){t.detail===t.target.min?this.muted=!0:this.muted=!1,Tone.Master.volume.value=t.detail}render(){return i.b`
-
-
-
-
- ${this.novolume?i.b``:i.b`
- this.focused=!1}
- @focus=${t=>this.focused=!0}
- id="volume"
- @change=${this._adjustVolume.bind(this)}
- bare min="-60" max="0" value="0">`}
-
-
- `}});customElements.define("tone-top-bar",class extends i.a{constructor(){super()}updated(){const t=this.shadowRoot.querySelector("canvas");t.width=2*t.clientWidth,t.width=2*t.clientHeight;const{width:e,height:n}=t,i=t.getContext("2d"),o=function(t){const e=new Array(t),n=new Array(t),i=new Array(t),o=new Array(t),r=[e,i,o,n];for(let n=0;n
{const o=Math.scale(t,-1,1,.25*n,.75*n);0===e?i.moveTo(e,o):i.lineTo(e,o)}),i.lineTo(e,n),i.lineTo(0,n),i.fillStyle="#22DBC0",i.fill()}render(){return i.b`
-
-
-
- `}});customElements.define("tone-content",class extends i.a{render(){return i.b`
-
-
-
-
- `}});const X=i.b``,Q=i.b``;customElements.define("tone-drawer",class extends i.a{static get properties(){return{collapsed:{type:Boolean},label:{type:String}}}constructor(){super(),this.collapsed=window.innerHeight<700,this.label="Components"}updated(t){if(t.has("collapsed")&&!this.collapsed){const t=t=>{t.dispatchEvent(new CustomEvent("collapse",{detail:this.collapsed,composed:!0,bubbles:!0}))};Array.from(this.children).forEach(e=>{e.assignedNodes?Array.from(e.assignedNodes()).forEach(e=>t(e)):t(e),e.dispatchEvent(new CustomEvent("collapse",{detail:this.collapsed,composed:!0,bubbles:!0}))}),window.dispatchEvent(new CustomEvent("resize"))}}render(){return i.b`
-
-
-
-
${this.label}
-
- ${this.collapsed?i.b``:i.b``}
-
-
- `}});customElements.define("tone-explanation",class extends i.a{static get properties(){return{label:{type:String}}}constructor(){super()}render(){return i.b`
-
-
- `}});customElements.define("tone-loader",class extends i.a{static get properties(){return{loaded:{type:Boolean},progress:{type:Number}}}constructor(){super(),this.progress=0,this.loaded=!1,Tone.Buffer.on("progress",t=>{this.progress=t}),Tone.loaded().then(()=>{this.loaded=!0,setTimeout(()=>{this.remove()},500)})}render(){return i.b`
-
-
- `}});const Z=i.b``,tt=i.b``;customElements.define("tone-side-panel",class extends i.a{static get properties(){return{collapsed:{type:Boolean}}}constructor(){super(),this.collapsed=!0,this.examples={},this.fetchExamples()}async fetchExamples(){try{const t=await fetch("./js/ExampleList.json");this.examples=await t.json(),this.requestUpdate()}catch(t){console.log("could not load example list")}}updated(t){t.has("collapsed")&&this.dispatchEvent(new CustomEvent("collapse",{detail:this.collapsed,composed:!0}))}render(){const t=0===Object.keys(this.examples).length;return i.b`
-
-
-
-
- ${this.collapsed?i.b``:i.b`
-
Examples
-
${t?"Loading...":""}
- ${Object.entries(this.examples).map(([t,e])=>i.b`
-
${t}
-
- ${Object.entries(e).map(([t,e])=>i.b`
- - ${t}
- `)}
-
- `)}
- `}
-
-
- `}});customElements.define("tone-example",class extends i.a{static get properties(){return{collapsed:{type:Boolean},open:{type:Boolean}}}constructor(){super(),this.collapsed=!0}updated(t){t.has("open")&&(this.collapsed=!this.open)}render(){return i.b`
-
-
-
this.collapsed=t.detail}
- >
-
-
-
-
-
- `}});customElements.define("tone-waveform",class extends i.a{constructor(){super(),this._waveform=function(t){const e=new Array(t),n=new Array(t),i=new Array(t),o=new Array(t),r=[e,i,o,n];for(let n=0;n
-
- :host, #container, canvas {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0px;
- left: 0px;
- }
-
- #container {
- background-color: var(--color-magenta);
- }
-
-
-
-
-
- `}});const et=i.b``;customElements.define("tone-start-context",class extends i.a{static get properties(){return{running:{type:Boolean},disabled:{type:Boolean}}}constructor(){super(),this.running=!1}firstUpdated(){const t=setInterval(()=>{this.running="running"===Tone.context.state,this.running&&clearInterval(t)},100)}async _clicked(t){await k(),this.running="running"===Tone.context.state}render(){return i.b`
-
-
-
-
- `}});customElements.define("tone-demo",class extends i.a{static get properties(){return{autoplay:{type:Boolean}}}firstUpdated(){super.firstUpdated(),this.shadowRoot.querySelector("tone-waveform").bind(Tone.Master)}render(){return i.b`
-
-
-
- ${this.autoplay?i.b`
`:i.b``}
-
-
-
-
- `}});customElements.define("tone-fft",class extends i.a{constructor(){super(),this._fft=new Tone.FFT(256)}bind(t){t.connect(this._fft),this._canvas=this.shadowRoot.querySelector("canvas"),this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight,this._context=this._canvas.getContext("2d"),this.loop(),window.addEventListener("resize",()=>{this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight})}loop(){requestAnimationFrame(this.loop.bind(this));const t=this._fft.getValue(),e=this._canvas.width,n=this._canvas.height;this._context.clearRect(0,0,e,n),this._context.fillStyle="white",t.forEach((i,o)=>{const r=Math.scale(o,0,t.length,0,e),s=Math.clamp(Math.scale(i,-100,0,0,n),0,n);this._context.fillRect(r,n/2-s/2,2,s),this._context.fill()})}render(){return i.b`
-
-
- `}});customElements.define("tone-loop",class extends i.a{static get properties(){return{color:{type:String}}}constructor(){super(),this.color="#777"}bind(t){this._canvas=this.shadowRoot.querySelector("canvas"),this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight,this._context=this._canvas.getContext("2d"),this.loop(t),window.addEventListener("resize",()=>{this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight})}loop(t){requestAnimationFrame(this.loop.bind(this,t));const{width:e,height:n}=this._canvas,i=this._context;i.clearRect(0,0,e,n),i.fillStyle="#eee";const o=Math.min(e,n);i.arc(e/2,n/2,o/2,0,2*Math.PI,!1),i.fill();const r=t.progress;i.beginPath(),i.fillStyle=this.color,i.moveTo(e/2,n/2);const s=Math.PI/2;i.arc(e/2,n/2,o/2,-s,r*Math.PI*2-s,!1),i.fill()}render(){return i.b`
-
-
-
-
- `}});class nt extends H{constructor(){super(),this.effect=!0}}customElements.define("tone-effect",nt);customElements.define("tone-chorus",class extends nt{constructor(){super(),this.label="Chorus"}renderAttributes(){return i.b`
-
-
-
-
-
- `}});customElements.define("tone-chebyshev",class extends nt{constructor(){super(),this.label="Chebyshev"}renderAttributes(){return i.b`
-
- `}});customElements.define("tone-freeverb",class extends nt{constructor(){super(),this.label="Freeverb"}renderAttributes(){return i.b`
-
-
- `}});customElements.define("tone-tremolo",class extends nt{constructor(){super(),this.label="Tremolo"}renderAttributes(){return i.b`
-
-
-
-
- `}});customElements.define("tone-auto-filter",class extends nt{constructor(){super(),this.label="AutoFilter"}renderAttributes(){return i.b`
-
-
-
-
-
-
- `}});customElements.define("tone-auto-panner",class extends nt{constructor(){super(),this.label="AutoPanner"}renderAttributes(){return i.b`
-
-
-
- `}});customElements.define("tone-ping-pong-delay",class extends nt{constructor(){super(),this.label="PingPongDelay"}renderAttributes(){return i.b`
-
-
- `}});customElements.define("tone-reverb",class extends nt{static get properties(){return{generating:{type:Boolean}}}constructor(){super(),this.label="Reverb",this.generating=!1}bind(t){super.bind(t),this.generate(t);let e=-1;this.addEventListener("change",()=>{this.generating=!0,clearTimeout(e),e=setTimeout(()=>{this.generate(t)},100)})}async generate(t){this.generating=!0,await t.generate(),this.generating=!1}renderAttributes(){return i.b`
- ${this.generating?i.b`
- Generating...
- `:i.b``}
-
-
- `}});customElements.define("tone-distortion",class extends nt{constructor(){super(),this.label="Distortion"}renderAttributes(){return i.b`
-
- `}})}]);
\ No newline at end of file
diff --git a/examples/jump.html b/examples/jump.html
index a997cf35..38bb7687 100644
--- a/examples/jump.html
+++ b/examples/jump.html
@@ -7,11 +7,11 @@
-
+
-
-
+
+