Skip to content

README.md

Latest commit

 

History

History
81 lines (64 loc) · 3.7 KB

README.md

File metadata and controls

81 lines (64 loc) · 3.7 KB

Audio-Visualization 🎶

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.

Click here for the live demo

Table of Contents 🧭

  1. Goal
  2. Getting started
  3. Wishlist
  4. Practises

Goal 💪🏻

The goal of this project is to get better at html canvas and Javascript. I also want to learn about music with code.

Getting started ✨

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Technical requirements

To run this project you'll need any code editor

📥 Installing

1. Clone this repository 👯

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.git

2. Open index.html 💻

Open the index.html. The application should now be running on your local machine!

Feature wishlist / backlog 👑

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

Design patterns and Best Practices 👩🏻‍💻

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.

Javascript code standards

  • 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

CSS code standards

  • 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

HTML code standards

  • 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

License 🔐

This project is licensed under the MIT license by © Inju Michorius, 2021. See the LISENCE.md file for details.