Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/barrymun/music-visualizer-v2
Music visualizer made with TypeScript and HTML canvas
https://github.com/barrymun/music-visualizer-v2
canvas typescript
Last synced: 10 days ago
JSON representation
Music visualizer made with TypeScript and HTML canvas
- Host: GitHub
- URL: https://github.com/barrymun/music-visualizer-v2
- Owner: barrymun
- License: mit
- Created: 2023-09-15T13:42:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-29T12:43:52.000Z (3 months ago)
- Last Synced: 2024-11-07T00:27:15.364Z (about 2 months ago)
- Topics: canvas, typescript
- Language: TypeScript
- Homepage: https://music-visualizer-v2.neilmurphy.dev/
- Size: 105 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Music Visualizer using VanJS, TypeScript, and HTML Canvas API
This application utilizes the [VanJS](https://vanjs.org/) reactive framework in combination with TypeScript and the HTML Canvas API to create a dynamic and engaging music visualizer.
## Features
- **Song Selector**: Easily choose from a set of songs using an HTML select element.
- **Play/Pause Toggle**: Control music playback.
- **Next & Previous Buttons**: Navigate through the song array. If a song has played for more than 5 seconds and the previous button is clicked, it will rewind to the beginning.
- **Volume Control & Mute**: Adjust the volume using a slider, and toggle sound with the mute button. The mute icon updates based on volume status.
- **Seek-bar Slider**: Jump to any part of the track.
- **Track Details**: View the artist name and song title at the bottom of the visualizer.
- **Interactive Visualizer**: Experience a dynamic canvas that moves with the frequency of the music. The app leverages the audio context library and adjusts the fftSize based on the screen size.
## Tracks
All tracks used in this visualizer are under Creative Commons license conditions:
- [Nettson - xoxo](https://soundcloud.com/nettson/nettson-xoxo-official)
- [J.A.K - ocean ave](https://soundcloud.com/vgl9/afternoon)
- [Vlad Gluschenko - Afternoon](https://soundcloud.com/arkadenmusicofficial/ocean-ave-1)
## Installation & Setup
1. Clone the repository:
```bash
git clone https://github.com/barrymun/music-visualizer-v2.git
```
2. Navigate to the cloned directory:
```bash
cd music-visualizer-v2
```
3. Install dependencies:
```bash
yarn install
```
4. Start the development server:
```bash
yarn run dev
```
Visit `http://localhost:your-port-number` (the port will be displayed in the console) to experience the visualizer.
## Acknowledgments
Huge thanks to the creators of [VanJS](https://vanjs.org/).
## Note for Mobile Users 📢
If you are experiencing issues with audio not playing on mobile devices, please ensure your device is not set to silent mode or do not disturb mode. Some devices prevent audio playback in web applications when in these modes. Adjust your device settings and try again.
## Hosting Information 🌐
This project is hosted using Amazon Web Services (AWS). The assets are stored in an S3 bucket, and delivered globally via Amazon CloudFront.
## License
This project is licensed under the MIT License. For detailed information, see the [LICENSE](./LICENSE) file in the root directory.
## TODO
- [ ] Fix: `Uncaught (in promise) DOMException: Failed to execute 'connect' on 'AudioNode': cannot connect to an AudioNode`. This seems to occur in `music-visualizer.ts:252` when rapidly clicking previous or next buttons. App functionality does not break.