Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anirbanmu/Vizl
Vizl - SoundCloud® music visualizer via WebGL, WebAudio, Svelte & Typescript.
https://github.com/anirbanmu/Vizl
html5 javascript music music-visualiser shaders svelte sveltejs typescript webaudio webgl
Last synced: 3 months ago
JSON representation
Vizl - SoundCloud® music visualizer via WebGL, WebAudio, Svelte & Typescript.
- Host: GitHub
- URL: https://github.com/anirbanmu/Vizl
- Owner: anirbanmu
- License: mit
- Created: 2015-10-08T06:43:38.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2024-06-20T22:32:13.000Z (5 months ago)
- Last Synced: 2024-07-10T12:06:12.973Z (4 months ago)
- Topics: html5, javascript, music, music-visualiser, shaders, svelte, sveltejs, typescript, webaudio, webgl
- Language: TypeScript
- Homepage: https://vizl.anirbanmu.com
- Size: 420 KB
- Stars: 5
- Watchers: 4
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [Vizl](https://vizl.anirbanmu.com)
A simple music visualiser for SoundCloud® tracks using [WebGL](https://get.webgl.org/), [Svelte](https://svelte.dev/) & [Typescript](https://www.typescriptlang.org/).
To see it in action, go [here](https://vizl.anirbanmu.com), enter a link like this [one](https://soundcloud.com/nocopyrightsounds/alan-walker-fade-ncs-release) from SoundCloud®, and hit the plus button!
## Development
- Make sure you have [Node](https://nodejs.org/en/download/package-manager/) & npm [installed](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
- Clone the repo
- `cd` into repo directory
- `npm install`
...then start the dev server [Rollup](https://rollupjs.org) + [Express](https://expressjs.com/):
```bash
npm run dev
```
Navigate to [localhost:8081](http://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](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). 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:
```bash
npm run build
```
You can run the newly built app with `npm run start`. This uses [Express](https://expressjs.com/) to serve the built [Svelte](https://svelte.dev/) app.
## [fly.io](https://fly.io/)
To run this on fly.io:
- Create an app with [flyctl](https://fly.io/docs/flyctl/installing/) and replace the in fly.toml.
- `flyctl secrets set SOUNDCLOUD_CLIENT_ID=`
- `flyctl secrets set 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](https://github.com/anirbanmu/Vizl/tree/legacy).