Skip to content

A minimalist processing project to visualize your favorite music in 3D (sound spectrum). With Angular 7.x and Threejs

License

Notifications You must be signed in to change notification settings

chris282/JS-SoundSpectrum

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Welcome to my Sound Spectrum project, based on Angular 7 and Three.js ! Help me by contributing to this project, as I am learning Angular an javascript. I want to make this project as good as my Java sound spectrum project (available here : https://github.com/chris282/Java-SoundSpectrum ) :)

First Run :

Run "npm install" inside this project folder to install all dependencies.

npm install

To build the project :

ng build

To launch the project :

ng serve

Open it on your browser : http://localhost:4200/

RoadMap

  • The 3D scene is working.
  • The FFT algorithm is in place, I have to test it.

So here are the next steps TODO :

  • Get the audio stream of the computer or microphone.
  • Put the audio stream to the DFT (FFT) transform
  • Put the FFT output values into an array
  • Display raw data from the FFT output values (with text).
  • Display the FFT output values in 2D with simple visualization
  • Display the FFT output values in 3D with a nice visualization

History

This project was initiated from ng-three-template by JohnnyDevNull ( https://github.com/JohnnyDevNull/ng-three-template ) generated with Angular CLI and is designed as a basic template for ThreeJS combined with Angular and Bootstrap in Version 4.x

The project is setup to use global SCSS only and ViewEncapsulation.None.

Feel free to do anything you want with this template.

Three Links

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

About

A minimalist processing project to visualize your favorite music in 3D (sound spectrum). With Angular 7.x and Threejs

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 56.8%
  • CSS 29.7%
  • JavaScript 9.3%
  • HTML 4.2%