I build this project to learn more about the canvas element. I wanted to do something with music to, so I decided to mix these two things to create an application that visualizes sound.
The goal of this project is to get better at html canvas and Javascript. I also want to learn about music with code.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
To run this project you'll need any code editor
Before we can get started, we'll need to clone this repository. We can do this by typing the following line of code in the terminal:
git clone https://github.com/InjuMichorius/Audio-Visualization.gitOpen the index.html. The application should now be running on your local machine!
Below is a list of features I'd love to add to this application. The features are split up using the MoSCoW method.
M - Must haves These features are requirements for the end product
- Visualisation of sound
- (Web) Audio
S - Should haves These features are wanted, but not necessary for a usable product
- Option to add own music
- Sound effect on click for discoverability
C - Could haves These features can be added if there is enough time to do so
- List of music which you can choose from
W - Would haves These features can be added in the future
- Edit visualization pattern
Code standards are important when working on any project; your code stays consistent and is readable for everyone. I defined code standards for HTML, CSS and JS while working on this project.
- Variables & functions are written in camelCase
- Promises are handled with async functions using await
- I don't use var, only const or let
- I put spaces around operators ( = + - * / ) and after commas (exception for for loops)
- I use indentation with TAB
- I always end a statement with a semi-colon;
- Functions have their opening bracket on the same line as the name, with 1 space in between
- I use ES6 syntax where possible
- I try to avoid !important as much as possible
- Layout/general styling is always above more specific styling
- Selectors are not unnecessary long nor short
- I use CSS3 syntax where possible
- I avoid old display properties like float
- CSS Selectors must have a space between the name and bracket
- I only use IDs when the element is present once on a page and it's necessary for styling or Javascript
- I always write semantic HTML according to W3C Validator
- Divs are only used when necessary for styling purposes
- Classes allow easy re-usage
- Indentation is always clear
This project is licensed under the MIT license by © Inju Michorius, 2021. See the LISENCE.md file for details.