diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..26b002aa
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/.glitch-assets b/.glitch-assets
new file mode 100644
index 00000000..9cb86bbf
--- /dev/null
+++ b/.glitch-assets
@@ -0,0 +1,17 @@
+{"name":"Fly Me To The Moon (2008 Remastered).mp3","date":"2022-10-05T01:06:14.751Z","url":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/Fly%20Me%20To%20The%20Moon%20(2008%20Remastered).mp3","type":"audio/mpeg","size":2361403,"thumbnail":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/thumbnails%2FFly%20Me%20To%20The%20Moon%20(2008%20Remastered).mp3","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"SN6JtXUUx0WgUEU7"}
+{"uuid":"SN6JtXUUx0WgUEU7","deleted":true}
+{"name":"Fly Me To The Moon 2008 Remastered.mp3","date":"2022-10-05T01:06:14.751Z","url":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/Fly Me To The Moon 2008 Remastered.mp3","type":"audio/mpeg","size":2361403,"thumbnail":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/thumbnails%2FFly%20Me%20To%20The%20Moon%20(2008%20Remastered).mp3","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"SN6JtXUUx0WgUEU7"}
+{"uuid":"SN6JtXUUx0WgUEU7","deleted":true}
+{"name":"a.mp3","date":"2022-10-05T01:06:14.751Z","url":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/a.mp3","type":"audio/mpeg","size":2361403,"thumbnail":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/thumbnails%2FFly%20Me%20To%20The%20Moon%20(2008%20Remastered).mp3","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"SN6JtXUUx0WgUEU7"}
+{"uuid":"SN6JtXUUx0WgUEU7","deleted":true}
+{"name":"Better Days.mp3","date":"2022-10-05T09:18:38.004Z","url":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/Better%20Days.mp3","type":"audio/mpeg","size":8293440,"thumbnail":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/thumbnails%2FBetter%20Days.mp3","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"3uAV00EpW6LobI5h"}
+{"uuid":"3uAV00EpW6LobI5h","deleted":true}
+{"name":"b.mp3","date":"2022-10-05T09:18:38.004Z","url":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/b.mp3","type":"audio/mpeg","size":8293440,"thumbnail":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/thumbnails%2FBetter%20Days.mp3","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"3uAV00EpW6LobI5h"}
+{"uuid":"3uAV00EpW6LobI5h","deleted":true}
+{"name":"favicon-32.ico","date":"2022-10-05T19:16:34.170Z","url":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/favicon-32.ico","type":"image/x-icon","size":185021,"imageWidth":256,"imageHeight":256,"thumbnail":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/favicon-32.ico","thumbnailWidth":256,"thumbnailHeight":256,"uuid":"KddiUszYWMUJBKKR"}
+{"uuid":"KddiUszYWMUJBKKR","deleted":true}
+{"name":"favicon.ico","date":"2022-10-05T19:16:34.170Z","url":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/favicon.ico","type":"image/x-icon","size":185021,"imageWidth":256,"imageHeight":256,"thumbnail":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/favicon-32.ico","thumbnailWidth":256,"thumbnailHeight":256,"uuid":"KddiUszYWMUJBKKR"}
+{"name":"[YT2mp3.info] - Glass Animals - Heat Waves (Official Video) (320kbps).mp3","date":"2022-10-05T22:24:01.458Z","url":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/%5BYT2mp3.info%5D%20-%20Glass%20Animals%20-%20Heat%20Waves%20(Official%20Video)%20(320kbps).mp3","type":"audio/mpeg","size":9405319,"thumbnail":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/thumbnails%2F%5BYT2mp3.info%5D%20-%20Glass%20Animals%20-%20Heat%20Waves%20(Official%20Video)%20(320kbps).mp3","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"r0eMAvfDi0Z53E6E"}
+{"uuid":"r0eMAvfDi0Z53E6E","deleted":true}
+{"name":"c.mp3","date":"2022-10-05T22:24:01.458Z","url":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/c.mp3","type":"audio/mpeg","size":9405319,"thumbnail":"https://cdn.glitch.global/2c796c18-9750-463e-b536-72ce27d2ee5c/thumbnails%2F%5BYT2mp3.info%5D%20-%20Glass%20Animals%20-%20Heat%20Waves%20(Official%20Video)%20(320kbps).mp3","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"r0eMAvfDi0Z53E6E"}
+{"uuid":"r0eMAvfDi0Z53E6E","deleted":true}
diff --git a/README.md b/README.md
index 4ac8bbff..d143ba4b 100644
--- a/README.md
+++ b/README.md
@@ -1,61 +1,11 @@
-Assignment 4 - Creative Coding: Interactive Multimedia Experiences
-===
+## Modular Audio Visualizer Circle
 
-Due: October 4th, by 11:59 AM.
+Mark Renzi
+https://a4-mark-renzi.glitch.me
 
-For this assignment we will focus on client-side development using popular audio/graphics/visualization technologies. The goal of this assignment is to refine our JavaScript knowledge while exploring the multimedia capabilities of the browser.
+- The application was designed to learn more about audio visualization from raw frequency data using WebAudio and Canvas.
+- The biggest challenges I faced were designing an algorithm that smoothly drew a path between points using quadraticCurveTo() so that I could avoid dynamically defining control points of bezier curves. I originally designed the visualizer drawing rectangles in a circle, which was nice to rotate the matrix, but using a path, I needed to convert polar coordinates to cartesian coordinates, and this took hours to get working perfectly, especially when I wanted to smooth the gaps between the points. Eventually the final challenge was some learning required to use a fade-in transition through css on my HUD, or settings menu.
+- I wanted the main screen to be as simple as possible. It says click to start, and then explains that you can click or tap anywhere else to show/hide settings. The settings are names somewhat descriptively but the most interesting part of this app is testing what everything does. I recommend testing all of the themes before even touching the colors or adjustment sliders.
 
-[WebAudio + Canvas Tutorial](https://github.com/cs4241-22a/cs4241-22a.github.io/blob/main/using_webaudio_canvas.md)  
-[SVG + D3 tutorial](https://github.com/cs4241-21a/cs4241-21a.github.io/blob/main/using_svg_and_d3.md)  
-
-Baseline Requirements
----
-
-Your application is required to implement the following functionalities:
-
-- A server created using Express. This server can be as simple as needed.
-- A client-side interactive experience using at least one of the following web technologies frameworks.
-  - [Three.js](https://threejs.org/): A library for 3D graphics / VR experiences
-  - [D3.js](https://d3js.org): A library that is primarily used for interactive data visualizations
-  - [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D raster drawing API included in all modern browsers
-  - [SVG](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D vector drawing framework that enables shapes to be defined via XML.
-  - [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API): An API for audio synthesis, analysis, processing, and file playback.
-- A user interface for interaction with your project, which must expose at least four parameters for user control. [tweakpane](https://cocopon.github.io/tweakpane/) is highly recommended for this, but you can also use regular HTML `<input>` tags (the `range` type is useful to create sliders). You might also explore interaction by tracking mouse movement via the `window.onmousemove` event handler in tandem with the `event.clientX` and `event.clientY` properties. Consider using the [Pointer Events API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) to ensure that that both mouse and touch events will both be supported in your app.
-- Your application should display basic documentation for the user interface when the application first loads.
-
-The interactive experience should possess a reasonable level of complexity. Some examples:
-### Three.js
-- A generative algorithm creates simple agents that move through a virtual world. Your interface controls the behavior / appearance of these agents.
-- A simple 3D game... you really want this to be a simple as possible or it will be outside the scope of this assignment.
-- An 3D audio visualization of a song of your choosing. User interaction should control aspects of the visualization. 
-### Canvas
-- Implement a generative algorithm such as [Conway's Game of Life](https://bitstorm.org/gameoflife/) (or 1D cellular automata) and provide interactive controls. Note that the Game of Life has been created by 100s of people using <canvas>; we'll be checking to ensure that your implementation is not a copy of these.
-- Design a 2D audio visualizer of a song of your choosing. User interaction should control visual aspects of the experience. 
-### Web Audio API
-- Create a screen-based musical instrument using the Web Audio API. You can use projects such as [Interface.js](http://charlie-roberts.com/interface/) or [Nexus UI](https://nexus-js.github.io/ui/api/#Piano) to provide common musical interface elements, or use dat.GUI in combination with mouse/touch events (use the Pointer Events API). Your GUI should enable users to control aspects of sound synthesis. If you want to use higher-level instruments instead of the raw WebAudio API sounds, consider trying the instruments provided by [Tone.js]() or [Gibber](https://github.com/charlieroberts/gibber.audio.lib).
-### D3.js
-- Create visualizations using the datasets found at [Awesome JSON Datasets](https://github.com/jdorfman/Awesome-JSON-Datasets). Experiment with providing different visualizations of the same data set, and providing users interactive control over visualization parameters and/or data filtering. Alternatively, create a single visualization with using one of the more complicated techniques shown at [d3js.org](d3js.org) and provide meaningful points of interaction for users.
-
-Deliverables
----
-
-Do the following to complete this assignment:
-
-1. Implement your project with the above requirements.
-3. Test your project to make sure that when someone goes to your main page on Glitch/Heroku/etc., it displays correctly.
-4. Ensure that your project has the proper naming scheme `a4-firstname-lastname` so we can find it.
-5. Fork this repository and modify the README to the specifications below. *NOTE: If you don't use Glitch for hosting (where we can see the files) then you must include all project files that you author in your repo for this assignment*.
-6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a4-firstname-lastname`.
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
-## Your Web Application Title
-
-your hosting link e.g. http://a4-charlieroberts.glitch.me
-
-Include a very brief summary of your project here. Images are encouraged when needed, along with concise, high-level text. Be sure to include:
-
-- the goal of the application
-- challenges you faced in realizing the application
-- the instructions you present in the website should be clear enough to use the application, but if you feel any need to provide additional instructions please do so here.
+- There are so many fun combinations, but the stylized theme with the white background has to be my favorite:
+  ![Stylized theme with white background](https://cdn.discordapp.com/attachments/121797037942374400/1299855959144796211/image.png)
diff --git a/assets/a.mp3 b/assets/a.mp3
new file mode 100644
index 00000000..74166835
Binary files /dev/null and b/assets/a.mp3 differ
diff --git a/assets/b.mp3 b/assets/b.mp3
new file mode 100644
index 00000000..8ade809a
Binary files /dev/null and b/assets/b.mp3 differ
diff --git a/assets/c.mp3 b/assets/c.mp3
new file mode 100644
index 00000000..f98ef84d
Binary files /dev/null and b/assets/c.mp3 differ
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 00000000..fe82f470
Binary files /dev/null and b/favicon.ico differ
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..e955660c
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,803 @@
+{
+  "name": "Audio visualizer",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "Audio visualizer",
+      "dependencies": {
+        "cors": "^2.8.5",
+        "express": "^4.18.1",
+        "mime": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.5",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.13.0",
+        "raw-body": "2.5.2",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/cors/node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/cors/node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
+      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.3",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.7.1",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.3.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.3",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.10",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.13.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/express/node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
+    },
+    "node_modules/express/node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
+    },
+    "node_modules/express/node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/express/node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/express/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/express/node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/express/node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mime": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
+      "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+      "license": "MIT"
+    },
+    "node_modules/qs": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/send": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/send/node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/serve-static": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.19.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..a7093e9c
--- /dev/null
+++ b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "Audio visualizer",
+  "version": "",
+  "description": "",
+  "author": "Mark Renzi",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.18.1",
+    "mime": "^3.0.0"
+  }
+}
\ No newline at end of file
diff --git a/public/css/style.css b/public/css/style.css
new file mode 100644
index 00000000..f22ac9a4
--- /dev/null
+++ b/public/css/style.css
@@ -0,0 +1,76 @@
+html, body {
+  width:  100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+canvas {
+  width:  100%;
+  height: 100%;
+  margin: 0;
+  position:absolute;
+  z-index: -1;
+}
+
+#circle {
+  width:  100%;
+  height: 100%;
+  margin: 0;
+  position:absolute;
+  z-index: 2;
+}
+
+#clickArea {
+  width:  100%;
+  height: 100%;
+  margin: 0;
+  position:fixed;
+  z-index: 2;
+}
+
+#options{
+  z-index: 1;
+}
+
+.break {
+  flex-basis: 100%;
+  height: 0;
+}
+
+.rainbowBox {
+  display:flex;
+  gap: 0.5em;
+  width: 100%;
+}
+
+#rainbowSlider {
+  width: 100%;
+  display: flex;
+  flex-grow: 1;
+  margin: 0;
+}
+
+.select, select { 
+  width:100%;
+}
+
+.wideRange {
+  width: 100%
+}
+
+.sliderLabel {
+  min-width: 5em;
+  text-wrap: nowrap;
+}
+
+#settingsDiv {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+::-webkit-scrollbar {
+    width: 0px;
+    background: transparent;
+}
\ No newline at end of file
diff --git a/public/views/index.html b/public/views/index.html
new file mode 100644
index 00000000..8f225bb8
--- /dev/null
+++ b/public/views/index.html
@@ -0,0 +1,894 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Music Visualizer</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width">
+    <meta name="description" content="Audio visualizer" />
+  </head>
+  <body style="overflow: hidden">
+    <link href="css/style.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
+    />
+    <script src="https://kit.fontawesome.com/9220fbe0a0.js" crossorigin="anonymous"></script>
+    <canvas id="canvas"></canvas>
+
+    <main>
+      <div class="" id="deleteMe">
+        <button
+          class="column is-5-tablet is-4-desktop is-3-widescreen is-centered"
+          id="START"
+        >
+          CLICK TO START. Click/Tap anywhere to show/hide settings.
+        </button>
+        <div id="player" class="m-3">
+          <div
+            id="options"
+            style="visibility: hidden"
+            class="columns p-0 is-variable is-desktop is-1-mobile is-1-tablet is-3-desktop is-8-widescreen is-2-fullhd"
+          >
+            <div id="" class="column"></div>
+            <div id="songsDiv" class="column box p-4 mx-1">
+              <div class="label is-flex is-flex-direction-row">
+                <label class="label">Songs&nbsp</label>
+                <button id="pauseBtn" class="icon m-0 p-2" style="cursor: pointer;">
+                  <!-- <span title="Play/Pause" style="filter: saturate(0%) brightness(50%)" class="icon pt-0 is-flex is-align-content-flex-start">|&nbsp|</span> -->
+                  <i class="fa-solid fa-pause fa-lg" style="color: #444;"></i>
+                </button>
+                <div class="break"></div>
+                <button title="Hide settings" id="closeBackup" class="delete" style="justify-self: end;"></button>
+              </div>
+              <div
+                class="is-flex is-flex-direction-row is-justify-content-flex-start is-flex-wrap-wrap"
+              >
+                <div class="select">
+                  <select onchange="changeSong(this.selectedIndex);">
+                    <option>Frank Sinatra - Fly Me To the Moon</option>
+                    <option>LAKEY INSPIRED - Better Days</option>
+                    <option>Glass Animals - Heat Waves</option>
+                    <option>EXPERIMENTAL user input</option>
+                  </select>
+                </div>
+                <div class="mx-3 mt-3">Visualizer by Mark Renzi</div>
+              </div>
+            </div>
+            <div
+              id="colorDiv"
+              class="column box p-4 is-flex is-flex-direction-column mx-1"
+            >
+              <div class="is-flex is-flex-direction-column">
+                <label class="label">Customize</label>
+                <div class="rainbowBox is-flex is-flex-direction-row">
+                  <input
+                    id="visColor"
+                    type="color"
+                    class="card"
+                    oninput="front(this.value)"
+                    value="#ffffff"
+                  />
+                  <input
+                    id="backgroundColor"
+                    type="color"
+                    class="card"
+                    oninput="back(this.value)"
+                    value="#000000"
+                  />
+                  <div class="rainbowBox">
+                    <label class="aside" for="rainbow">Rainbow</label>
+                    <input id="rainbow" type="checkbox"></input>
+                    <input id="rainbowSlider" type="range" value=0 max=1 step=0.2 oninput="setColorOffset(this.value)" onchange="setColorOffset(this.value)" disabled></input>
+                  </div>
+                </div>
+              </div>
+              <label class="aside mt-3">Theme</label>
+              <div>
+                <div class="select">
+                  <select onchange="changeTheme(this.selectedIndex);">
+                    <option>Circle smooth</option>
+                    <option>Circle sharp</option>
+                    <option>Circle outline smooth </option>
+                    <option>Blobby</option>
+                    <option>Blobby smooth</option>
+                    <option>Circle stylized smooth</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+
+            <div class="column box is-flex p-4 pb-0 mx-1 is-flex-shrink-0">
+              <div id="settingsDiv" class="m-0 p-0">
+                <div class="is-flex is-flex-direction-row">
+                  <label class="label">Settings&nbsp</label>
+                </div>
+                <div class="is-flex is-flex-direction-row is-justify-content-end">
+                  <label class="aside sliderLabel">Volume&nbsp</label>
+                  <input
+                    class="wideRange"
+                    type="range"
+                    min="0"
+                    max="1"
+                    value="1"
+                    step="0.01"
+                    oninput="vol(this.value)"
+                    onchange="vol(this.value)"
+                    id="volume"
+                  />
+                </div>
+                <div class="is-flex is-flex-direction-row is-justify-content-end">
+                  <label class="aside sliderLabel">Center&nbsp</label>
+                  <input
+                    class="wideRange"
+                    type="range"
+                    min="-100"
+                    max="-1"
+                    value="-10"
+                    step="0.1"
+                    oninput="center(this.value)"
+                    onchange="center(this.value)"
+                    id="center"
+                  />
+                </div>
+                <div class="is-flex is-flex-direction-row is-justify-content-end">
+                  <label class="aside sliderLabel">Amplitude&nbsp</label>
+                  <input
+                    class="wideRange"
+                    type="range"
+                    min="-2000"
+                    max="-1"
+                    value="-1000"
+                    step="1"
+                    oninput="amplitude(this.value)"
+                    onchange="amplitude(this.value)"
+                    id="amplitude"
+                  />
+                </div>
+                <div class="is-flex is-flex-direction-row is-justify-content-end">
+                  <label class="aside sliderLabel">Hide ends&nbsp</label>
+                  <input
+                    class="wideRange"
+                    type="range"
+                    min="0"
+                    max="35"
+                    value="30"
+                    step="1"
+                    oninput="ends(this.value)"
+                    onchange="ends(this.value)"
+                    id="unhide"
+                  />
+                </div>
+              </div>
+            </div>
+            <div id="" class="column"></div>
+          </div>
+        </div>
+      </div>
+      <div style="height: 100%; width: 100%" id="clickArea"></div>
+    </main>
+  </body>
+  <script>
+    window.addEventListener("load", (event) => {
+      const canvas = document.getElementById("canvas");
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      document.getElementById("START").onclick = start;
+    });
+
+    ///
+    var int = null;
+    var amount = 240;
+    var time = 1000;
+    var size = Math.max(window.innerWidth, window.innerHeight) * 1.3;
+    var t = -1;
+    let canvas2;
+    let ctx2;
+    ///
+
+    let str;
+    let currentSong = 0;
+    let THEME = 0;
+    let cutoff = 0.3;
+    let startOffset1 = 10;
+    let startOffset2 = 1000;
+    let showClicks = 1;
+    let started = false;
+    let showHUD = false;
+    let playing = true;
+    let backColor = "#000000";
+    let frontColor = "#ffffff";
+    const pauseBtn = document.getElementById("pauseBtn"),
+      volume = document.getElementById("volume"),
+      HUD = document.getElementById("options"),
+      clickArea = document.getElementById("clickArea"),
+      closeBtn = document.getElementById("closeBackup"),
+      rainbowToggle = document.getElementById("rainbow"),
+      backgroundColor = document.getElementById("backgroundColor"),
+      visColor = document.getElementById("visColor"),
+      rainbowSlider = document.getElementById("rainbowSlider");
+
+    var audioCtx;
+    var audioElement;
+
+    let demoLights;
+    const demoLightBinCount = 1024; //10000 is ~30-40 seconds
+    let demoLightBuf = new Array(demoLightBinCount);
+    demoLightBuf.fill(0);
+    let demoLightBin = 0;
+    let frontVal = 123;
+    let backVal = 0;
+    let colorOffset = 0;
+    let rainbowVal = 0;
+
+
+    //songs
+    const songs = ["./assets/a.mp3", "./assets/b.mp3", "./assets/c.mp3"];
+
+    closeBtn.addEventListener("click", function () {
+      if (started) {
+        if (showHUD) {
+          //HUD.style.visibility = "hidden";
+          HUD.style =
+            "visibility: hidden; opacity: 0; transition: visibility 0s, linear 120ms, opacity 120ms;";
+          showHUD = false;
+          showClicks = 0;
+        }
+      }
+    });
+    
+    pauseBtn.addEventListener("click", function () {
+      if (currentSong != 3){
+        if (playing) {
+          audioElement.pause();
+          playing = !playing;
+        } else {
+          audioElement.play();
+          playing = !playing;
+        }
+      }
+      
+    });
+
+    rainbowToggle.addEventListener("click", function () {
+      backgroundColor.disabled = !backgroundColor.disabled;
+
+      rainbowSlider.disabled = !rainbowSlider.disabled;
+
+      demoLights = backgroundColor.disabled ?? false;
+
+      if (!demoLights) {
+        visColor.disabled = false;
+        back(backgroundColor.value);
+        front(visColor.value);
+      } else {
+        if (colorOffset >= 0.05) {
+          visColor.disabled = true;
+        }
+        back(convertToColor(backVal));
+        if (colorOffset >= 0.05) {
+          console.log(backVal, colorOffset, backVal + colorOffset);
+          front(convertToColor(backVal + colorOffset));
+        }
+      }
+    });
+
+    document.body.addEventListener("click", function () {
+      if (started) {
+        if (!showHUD) {
+          if (showClicks < 1) {
+            showClicks++;
+          } else {
+            //HUD.style.visibility = "visible";
+            HUD.style =
+              "visibility: visible; opacity: 1; transition: visibility 120ms, linear 120ms, opacity 120ms;";
+            showHUD = true;
+          }
+        }
+      }
+    });
+    clickArea.addEventListener("click", function () {
+      if (started) {
+        if (showHUD) {
+          //HUD.style.visibility = "hidden";
+          HUD.style =
+            "visibility: hidden; opacity: 0; transition: visibility 0s, linear 120ms, opacity 120ms;";
+          showHUD = false;
+          showClicks = 0;
+        }
+      }
+    });
+    const changeSong = function (index) {
+      //console.log(str.getTracks());
+      if (str != undefined){
+        str.getTracks().forEach(function(track) {
+          track.stop();
+        });
+      }
+      
+      
+      currentSong = index;
+      if (index != 3) {
+        audioElement.src = songs[index];
+        audioElement.play();
+        playing = true;
+      } else {
+        function getUserMedia(dictionary, callback) {
+            navigator.mediaDevices.getUserMedia(dictionary)
+            .then((stream) => {
+              gotStream(stream);
+            })
+            .catch((err) => {
+            });
+        }
+        
+        audioElement.pause();
+        //playing = false;
+        getUserMedia({audio:true}, gotStream);
+        
+        function gotStream(stream) {
+          str = stream;
+//             audioCtx = new AudioContext();
+
+//             let num = analyser.frequencyBinCount*2;
+
+//             analyser = audioCtx.createAnalyser();
+//             analyser.fftSize = num;
+
+          // Connect audio processing graph:
+          // live-input -> analyser -> destination
+
+          // Create an AudioNode from the stream.
+          
+          player = audioCtx.createMediaStreamSource(stream);    
+          player.connect(analyser);
+
+          // console.log(navigator.mediaDevices);
+
+
+
+          //analyser.connect(audioCtx.destination);
+
+        }
+
+      }
+    };
+    const changeTheme = function (index) {
+      THEME = index;
+      // if (player == undefined) {
+      //   // Build element
+      //   player = audioCtx.createMediaElementSource(audioElement);
+      //   player.connect(analyser);
+      // }
+      if (index == 0) {
+        console.log(player);
+        
+        //player = audioCtx.createMediaElementSource(audioElement);
+        //analyser = audioCtx.createAnalyser();
+        analyser.fftSize = 128; // 64 bins
+        results = new Uint8Array(analyser.frequencyBinCount);
+        //smoothed = new Array(analyser.frequencyBinCount * 4);
+        player.connect(analyser);
+      } else if (index == 1) {
+        //player = audioCtx.createMediaElementSource(audioElement);
+        //analyser = audioCtx.createAnalyser();
+        analyser.fftSize = 2048; // 1024 bins
+        results = new Uint8Array(analyser.frequencyBinCount);
+        smoothed = new Array(analyser.frequencyBinCount * 4);
+        player.connect(analyser);
+      } else if (index == 2) {
+        //player = audioCtx.createMediaElementSource(audioElement);
+        //analyser = audioCtx.createAnalyser();
+        analyser.fftSize = 128; // 64 bins
+        results = new Uint8Array(analyser.frequencyBinCount);
+        //smoothed = new Array(analyser.frequencyBinCount * 4);
+        player.connect(analyser);
+      } else if (index == 3) {
+        //player = audioCtx.createMediaElementSource(audioElement);
+        //analyser = audioCtx.createAnalyser();
+        analyser.fftSize = 8192; // 4096 bins
+        results = new Uint8Array(analyser.frequencyBinCount);
+        //smoothed = new Array(analyser.frequencyBinCount * 4);
+        player.connect(analyser);
+      } else if (index == 5) {
+        //player = audioCtx.createMediaElementSource(audioElement);
+        //analyser = audioCtx.createAnalyser();
+        analyser.fftSize = 128; // 64 bins
+        results = new Uint8Array(analyser.frequencyBinCount);
+        smoothed = new Array(analyser.frequencyBinCount * 4);
+        player.connect(analyser);
+      } else if (index == 4) {
+        //player = audioCtx.createMediaElementSource(audioElement);
+        //analyser = audioCtx.createAnalyser();
+        analyser.fftSize = 8192; // 4096 bins
+        results = new Uint8Array(analyser.frequencyBinCount);
+        smoothed = new Array(analyser.frequencyBinCount * 2);
+        player.connect(analyser);
+      }
+    };
+    const vol = function (value) {
+      audioElement.volume = parseFloat(value);
+    };
+    const center = function (value) {
+      if (value == -100) {
+        startOffset1 = 500000000000;
+      } else {
+        startOffset1 = Math.abs(value);
+      }
+    };
+    const amplitude = function (value) {
+      startOffset2 = Math.abs(value);
+    };
+    const back = function (value) {
+      backColor = value;
+    };
+    const front = function (value) {
+      frontColor = value;
+    };
+    const ends = function (value) {
+      cutoff = value / 100;
+    };
+    const setColorOffset = function(value) {
+
+      colorOffset = parseFloat(value);
+
+      if (colorOffset >= 0.05) {
+        visColor.disabled = true;
+        front(convertToColor(backVal + colorOffset));
+      } else {
+        visColor.disabled = false;
+        front(visColor.value);
+      }
+    };
+    const convertToColor = function (value) {
+      const a = 127.5
+      const r = Math.floor(a * Math.cos(Math.PI * value) + a + 0.5);
+      const g = Math.floor(a * Math.cos(Math.PI * value - (2/3) * Math.PI) + a + 0.5);
+      const b = Math.floor(a * Math.cos(Math.PI * value - (4/3) * Math.PI) + a + 0.5);
+      // console.log(r, g, b);
+      // console.log(`#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`);
+      return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    };
+
+    var player;
+    var analyser;
+    var results;
+    var smoothed;
+
+    const start = function () {
+      ///
+      canvas2 = document.createElement("canvas");
+      canvas2.width = window.innerWidth;
+      canvas2.height = window.innerHeight;
+      document.body.insertBefore(canvas2, document.body.firstChild);
+      //document.body.appendChild(canvas2);
+      canvas2.id = "circle";
+      ctx2 = canvas2.getContext("2d");
+      int = setInterval(update, time / amount);
+      ///
+
+      var START = document.getElementById("START");
+      START.parentNode.removeChild(START);
+      const ctx = canvas.getContext("2d");
+
+      // audio init
+      audioCtx = new AudioContext();
+      audioElement = document.createElement("audio");
+      document.body.appendChild(audioElement);
+
+      // audio graph setup
+      analyser = audioCtx.createAnalyser();
+      analyser.fftSize = 128; // 64 bins
+      //const deginc = 360 / analyser.frequencyBinCount;
+      player = audioCtx.createMediaElementSource(audioElement);
+      player.connect(audioCtx.destination);
+      player.connect(analyser);
+
+      audioElement.src = "./assets/a.mp3";
+      audioElement.play();
+
+      results = new Uint8Array(analyser.frequencyBinCount);
+      smoothed = new Array(analyser.frequencyBinCount * 4);
+
+      draw = function () {
+        // temporal recursion, call the function in the future
+        window.requestAnimationFrame(draw);
+
+        ctx.canvas.width = window.innerWidth;
+        ctx.canvas.height = window.innerHeight;
+        let middle = [window.innerWidth / 2, window.innerHeight / 2];
+        let offset = window.innerWidth / startOffset1;
+        let offset2 = window.innerWidth / startOffset2;
+        let ranges = [
+          Math.floor(cutoff * analyser.frequencyBinCount),
+          Math.ceil(
+            analyser.frequencyBinCount - cutoff * analyser.frequencyBinCount
+          ),
+        ];
+
+        analyser.getByteFrequencyData(results);
+
+        if (demoLights) {
+          let curLevel = 0;
+          for (level of results) {
+            curLevel += level;
+          }
+          if (curLevel !== 0)
+            curLevel /= analyser.frequencyBinCount;
+          // console.log(curLevel);
+
+          const windowMax = Math.max(...demoLightBuf);
+
+          if (curLevel > 0.99 * windowMax) {
+            backVal = (backVal + 0.002) % 2;
+          }
+
+          if (curLevel > 0.95 * windowMax) {
+            backVal = (backVal + 0.001) % 2;
+            back(convertToColor(backVal));
+            if (colorOffset >= 0.05) {
+              front(convertToColor(backVal + colorOffset));
+            }
+          }
+
+
+          
+          demoLightBin = (demoLightBin + 1) % demoLightBinCount;
+          demoLightBuf[demoLightBin] = curLevel;
+
+          // console.log(Math.min(...demoLightBuf), Math.max(...demoLightBuf));
+          // console.log(demoLightBin);
+        }
+        
+
+        // 'clear' the canvas
+        ctx.fillStyle = backColor;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        //console.log(analyser.frequencyBinCount);
+
+        //ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.translate(middle[0], middle[1]);
+        // for (let i = 0; i < analyser.frequencyBinCount; i++) {
+        //   ctx.rotate(radinc);
+        //   ctx.fillStyle = "white";
+        //   ctx.fillRect(0, offset, 1, results[i]*offset2);
+        // }
+        // for (let i = analyser.frequencyBinCount; i > 0; i--) {
+        //   ctx.rotate(radinc);
+        //   ctx.fillStyle = "white";
+        //   ctx.fillRect(0, offset, 1, results[i - 1]*offset2);
+        // }
+        let radinc =
+          Math.PI / (analyser.frequencyBinCount - (ranges[0] * 2 - 0.5));
+
+        if (THEME != 3 && THEME != 4) {
+          if (analyser.fftSize > 512) {
+            ctx.fillStyle = frontColor;
+            let region = new Path2D();
+            let theta = (90 * Math.PI) / 180;
+            let i = ranges[0];
+            region.moveTo(i, results[i] * offset2 + offset);
+            for (i = ranges[0]; i < ranges[1]; i++) {
+              theta += radinc;
+              region.lineTo(
+                (results[i] * offset2 + offset) * Math.cos(theta),
+                (results[i] * offset2 + offset) * Math.sin(theta)
+              );
+            }
+            for (i = ranges[1]; i > ranges[0]; i--) {
+              theta += radinc;
+              region.lineTo(
+                (results[i - 1] * offset2 + offset) * Math.cos(theta),
+                (results[i - 1] * offset2 + offset) * Math.sin(theta)
+              );
+            }
+            region.closePath();
+            ctx.fill(region);
+          } else {
+            /////////////////////////////////////////////////////////////////
+            if (THEME == 2) {
+              ctx.lineWidth = 4;
+              ctx.strokeStyle = frontColor;
+            } else if (THEME == 5) {
+              ctx.fillStyle = "white";
+            } else {
+              ctx.fillStyle = frontColor;
+            }
+
+            let region = new Path2D();
+
+            let theta = (90 * Math.PI) / 180;
+            let i = ranges[0];
+            let j = ranges[0] * 2;
+            //region.moveTo(i, results[i] * offset2 + offset);
+            for (i = ranges[0]; i < ranges[1]; i++) {
+              theta -= radinc;
+              smoothed[j] = (results[i] * offset2 + offset) * Math.cos(theta);
+              smoothed[j + 1] =
+                (results[i] * offset2 + offset) * Math.sin(theta);
+              j += 2;
+            }
+            for (i = ranges[1]; i > ranges[0]; i--) {
+              theta -= radinc;
+              smoothed[j] =
+                (results[i - 1] * offset2 + offset) * Math.cos(theta);
+              smoothed[j + 1] =
+                (results[i - 1] * offset2 + offset) * Math.sin(theta);
+              j += 2;
+            }
+
+            // console.log("results: ", results)
+            // console.log("smoothed: ", smoothed)
+            //console.log(i, ranges[0] * 2, j, ranges[1] * 4 - 2)
+            let temp = j - 2;
+            // region.moveTo (smoothed[0], smoothed[1]);
+            // for (let i = 0; i < smoothed.length; i += 2) {
+            //   theta += radinc; // 0.01 for cool stuff
+            //   region.lineTo(
+            //     smoothed[i],
+            //     smoothed[i+1]
+            //   );
+            // }
+
+            i = ranges[0] * 2;
+            region.moveTo(
+              (smoothed[temp] + smoothed[ranges[0] * 2]) / 2,
+              (smoothed[temp + 1] + smoothed[ranges[0] * 2 + 1]) / 2
+            );
+            region.quadraticCurveTo(
+              smoothed[i],
+              smoothed[i + 1],
+              (smoothed[i] + smoothed[i + 2]) / 2,
+              (smoothed[i + 1] + smoothed[i + 1 + 2]) / 2
+            );
+            for (i = ranges[0] * 2 + 2; i < temp; i += 2) {
+              var xc = (smoothed[i] + smoothed[i + 2]) / 2;
+              var yc = (smoothed[i + 1] + smoothed[i + 1 + 2]) / 2;
+              region.quadraticCurveTo(smoothed[i], smoothed[i + 1], xc, yc);
+            }
+            // curve through the last two points
+            region.quadraticCurveTo(
+              smoothed[i],
+              smoothed[i + 1],
+              (smoothed[i] + smoothed[ranges[0] * 2]) / 2,
+              (smoothed[i + 1] + smoothed[ranges[0] * 2 + 1]) / 2
+            );
+            region.closePath();
+
+            if (THEME == 2) {
+              ctx.stroke(region);
+            } else if (THEME == 5) {
+              ///////////////////////////////////////
+
+              let region2 = new Path2D();
+
+              let theme4offset = offset * 0.9;
+              let theme4offset2 = offset2 * 1.1;
+
+              theta = (90 * Math.PI) / 180;
+              i = ranges[0];
+              j = ranges[0] * 2;
+              for (i = ranges[0]; i < ranges[1]; i++) {
+                theta -= radinc;
+                smoothed[j] =
+                  (results[i] * theme4offset2 + theme4offset) * Math.cos(theta);
+                smoothed[j + 1] =
+                  (results[i] * theme4offset2 + theme4offset) * Math.sin(theta);
+                j += 2;
+              }
+              for (i = ranges[1]; i > ranges[0]; i--) {
+                theta -= radinc;
+                smoothed[j] =
+                  (results[i - 1] * theme4offset2 + theme4offset) *
+                  Math.cos(theta);
+                smoothed[j + 1] =
+                  (results[i - 1] * theme4offset2 + theme4offset) *
+                  Math.sin(theta);
+                j += 2;
+              }
+
+              temp = j - 2;
+
+              i = ranges[0] * 2;
+              region2.moveTo(
+                (smoothed[temp] + smoothed[ranges[0] * 2]) / 2,
+                (smoothed[temp + 1] + smoothed[ranges[0] * 2 + 1]) / 2
+              );
+              region2.quadraticCurveTo(
+                smoothed[i],
+                smoothed[i + 1],
+                (smoothed[i] + smoothed[i + 2]) / 2,
+                (smoothed[i + 1] + smoothed[i + 1 + 2]) / 2
+              );
+              for (i = ranges[0] * 2 + 2; i < temp; i += 2) {
+                var xc = (smoothed[i] + smoothed[i + 2]) / 2;
+                var yc = (smoothed[i + 1] + smoothed[i + 1 + 2]) / 2;
+                region2.quadraticCurveTo(smoothed[i], smoothed[i + 1], xc, yc);
+              }
+              // curve through the last two points
+              region2.quadraticCurveTo(
+                smoothed[i],
+                smoothed[i + 1],
+                (smoothed[i] + smoothed[ranges[0] * 2]) / 2,
+                (smoothed[i + 1] + smoothed[ranges[0] * 2 + 1]) / 2
+              );
+              region2.closePath();
+
+              let region3 = new Path2D();
+
+              let theme42offset = offset * 0.8;
+              let theme42offset2 = offset2 * 1.2;
+
+              theta = (90 * Math.PI) / 180;
+              i = ranges[0];
+              j = ranges[0] * 2;
+              for (i = ranges[0]; i < ranges[1]; i++) {
+                theta -= radinc;
+                smoothed[j] =
+                  (results[i] * theme42offset2 + theme42offset) *
+                  Math.cos(theta);
+                smoothed[j + 1] =
+                  (results[i] * theme42offset2 + theme42offset) *
+                  Math.sin(theta);
+                j += 2;
+              }
+              for (i = ranges[1]; i > ranges[0]; i--) {
+                theta -= radinc;
+                smoothed[j] =
+                  (results[i - 1] * theme42offset2 + theme42offset) *
+                  Math.cos(theta);
+                smoothed[j + 1] =
+                  (results[i - 1] * theme42offset2 + theme42offset) *
+                  Math.sin(theta);
+                j += 2;
+              }
+
+              temp = j - 2;
+
+              i = ranges[0] * 2;
+              region3.moveTo(
+                (smoothed[temp] + smoothed[ranges[0] * 2]) / 2,
+                (smoothed[temp + 1] + smoothed[ranges[0] * 2 + 1]) / 2
+              );
+              region3.quadraticCurveTo(
+                smoothed[i],
+                smoothed[i + 1],
+                (smoothed[i] + smoothed[i + 2]) / 2,
+                (smoothed[i + 1] + smoothed[i + 1 + 2]) / 2
+              );
+              for (i = ranges[0] * 2 + 2; i < temp; i += 2) {
+                var xc = (smoothed[i] + smoothed[i + 2]) / 2;
+                var yc = (smoothed[i + 1] + smoothed[i + 1 + 2]) / 2;
+                region3.quadraticCurveTo(smoothed[i], smoothed[i + 1], xc, yc);
+              }
+              // curve through the last two points
+              region3.quadraticCurveTo(
+                smoothed[i],
+                smoothed[i + 1],
+                (smoothed[i] + smoothed[ranges[0] * 2]) / 2,
+                (smoothed[i + 1] + smoothed[ranges[0] * 2 + 1]) / 2
+              );
+              region3.closePath();
+
+              ctx.fillStyle = "red";
+              ctx.fill(region3);
+              ctx.fillStyle = "yellow";
+              ctx.fill(region2);
+              ctx.fillStyle = "white";
+              ctx.fill(region);
+              ///////////////////////////////////////
+            } else {
+              ctx.fill(region);
+            }
+          }
+        } else if (THEME == 3){
+          //THEME 3
+          ctx.fillStyle = frontColor;
+          let region = new Path2D();
+          let theta = (90 * Math.PI) / 180;
+          let i = 0;
+          region.moveTo(i, results[i] * offset2);
+          for (i = 0; i < analyser.frequencyBinCount; i++) {
+            theta += 0.1;
+            region.lineTo(
+              results[i] * offset2 * Math.cos(theta),
+              results[i] * offset2 * Math.sin(theta)
+            );
+          }
+          for (i = analyser.frequencyBinCount; i > ranges[0]; i--) {
+            theta += 0.1;
+            region.lineTo(
+              results[i - 1] * offset2 * Math.cos(theta),
+              results[i - 1] * offset2 * Math.sin(theta)
+            );
+          }
+          region.closePath();
+          ctx.fill(region);
+        } else { /////////////////////////////THEME 4
+          ctx.fillStyle = frontColor;
+
+          let region = new Path2D();
+
+          let theta = (90 * Math.PI) / 180;
+          let i = 0;
+          let j = 0;
+          //region.moveTo(i, results[i] * offset2 + offset);
+          for (i = 0; i < analyser.frequencyBinCount; i++) {
+            theta += 0.1;
+            smoothed[j] = (results[i] * offset2) * Math.cos(theta);
+            smoothed[j + 1] =
+              (results[i] * offset2) * Math.sin(theta);
+            j += 2;
+          }
+          
+
+          // console.log("results: ", results)
+          // console.log("smoothed: ", smoothed)
+          //console.log(i, ranges[0] * 2, j, ranges[1] * 4 - 2)
+          let temp = j - 2;
+          // region.moveTo (smoothed[0], smoothed[1]);
+          // for (let i = 0; i < smoothed.length; i += 2) {
+          //   theta += radinc; // 0.01 for cool stuff
+          //   region.lineTo(
+          //     smoothed[i],
+          //     smoothed[i+1]
+          //   );
+          // }
+
+          i = 0;
+          region.moveTo(
+            (smoothed[temp] + smoothed[0]) / 2,
+            (smoothed[temp + 1] + smoothed[1]) / 2
+          );
+          region.quadraticCurveTo(
+            smoothed[i],
+            smoothed[i + 1],
+            (smoothed[i] + smoothed[i + 2]) / 2,
+            (smoothed[i + 1] + smoothed[i + 1 + 2]) / 2
+          );
+          for (i = 2; i < temp; i += 2) {
+            var xc = (smoothed[i] + smoothed[i + 2]) / 2;
+            var yc = (smoothed[i + 1] + smoothed[i + 1 + 2]) / 2;
+            region.quadraticCurveTo(smoothed[i], smoothed[i + 1], xc, yc);
+          }
+          // curve through the last two points
+          region.quadraticCurveTo(
+            smoothed[i],
+            smoothed[i + 1],
+            (smoothed[i] + smoothed[0]) / 2,
+            (smoothed[i + 1] + smoothed[1]) / 2
+          );
+          region.closePath();
+
+          ctx.fill(region);
+        } /////////////////////////////THEME 5
+      };
+      function sleep(ms) {
+        return new Promise((resolve) => setTimeout(draw, ms));
+      }
+      sleep(10);
+    };
+
+    function update() {
+      if (++t >= amount) {
+        clearInterval(int);
+        canvas2.parentNode.removeChild(canvas2);
+        started = true;
+      }
+      ctx2.fillStyle = "white";
+      ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
+      ctx2.beginPath();
+      ctx2.arc(
+        canvas2.width / 2,
+        canvas2.height / 2,
+        size / 2 - (t * (size / 2)) / amount,
+        0,
+        Math.PI * 2,
+        false
+      );
+      ctx2.fill();
+    }
+
+    //window.onload = () => (document.querySelector("button").onclick = start);
+  </script>
+</html>
diff --git a/server.js b/server.js
new file mode 100644
index 00000000..1a6c8a2d
--- /dev/null
+++ b/server.js
@@ -0,0 +1,31 @@
+const express = require("express");
+var cors = require("cors");
+const app = express();
+
+app.use(cors());
+app.use(express.static("public"));
+
+app.get("/", (request, response) => {
+  response.sendFile(__dirname + "/public/views/index.html");
+});
+
+
+
+app.get("/assets/a.mp3", (request, response) => {
+  response.sendFile(__dirname + "/assets/a.mp3");
+});
+app.get("/assets/b.mp3", (request, response) => {
+  response.sendFile(__dirname + "/assets/b.mp3");
+});
+app.get("/assets/c.mp3", (request, response) => {
+  response.sendFile(__dirname + "/assets/c.mp3");
+});
+app.get("/favicon.ico", (request, response) => {
+  response.sendFile(__dirname + "/favicon.ico");
+});
+
+const listener = app.listen(process.env.PORT || 3000, () => {
+  console.log("Your app is listening on port " + listener.address().port);
+});
+
+