Vizl

A simple music visualiser for SoundCloud® tracks using WebGL, Svelte & Typescript.

To see it in action, go here, enter a link like this one from SoundCloud®, and hit the plus button!

Development

• Make sure you have Node & npm installed
• Clone the repo
• cd into repo directory
• npm install

...then start the dev server Rollup + Express:

npm run dev

Navigate to localhost:8081. You should see Vizl running. Edit a component file in src, save it, and reload the page to see your changes.

If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code. If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.

Building and running in production mode

To create an optimised version of the app:

npm run build

You can run the newly built app with npm run start. This uses Express to serve the built Svelte app.

fly.io

To run this on fly.io:

• Create an app with flyctl and replace the in fly.toml.
• flyctl secrets set SOUNDCLOUD_CLIENT_ID=<SOUNDCLOUD-CLIENT-ID>
• flyctl secrets set SOUNDCLOUD_CLIENT_SECRET=<SOUNDCLOUD-CLIENT-SECRET>
• flyctl deploy

Details

This app was originally written in plain Javascript with jQuery. There's a legacy unmaintained branch with said legacy code here.