team-synesthesia/audioanimated

An interactive web application that allows users to create music with beautiful animations that move to your music and share their creations with their freinds

audioAnimated

An interactive web application that allows users to create music with beautiful animations that move to your music and share their creations with their freinds.

1. Watch our recorded demo to see what you can create: https://youtu.be/h_EGWJua-0w
2. Then Create an account
3. Record with our in-app recording software, or upload existing files into your project editor. Create music by layering and connecting tracks together.

4. Choose a base graphic for your project, and watch the animation move and breathe with your song.

5. Share with your friends by generating a sharable link.

Setup

Database:

• In Dev you will need to create a local postgresdb called audioanimated. Then run the script script/seed.js. This will create the schema and add the seed data for local dev.
• In Prod you will need to set this database up somewhere of your choice then provide the environment variable DATABASE_URL. E.g.:

  DATABASE_URL="postgresql://<<username>>:<<password>>@<<host-address>>:<<port>>/<<dbname>>"
  

File storage:

The music files are now stored in an s3 bucket in AWS for both develepment and production running of the application. You will need to create an AWS account, create and s3 bucket and allow access via AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY.

Environment variables

You will need to provide these environment variables in dev and prod:

A .env file is required to run this app in development.

1. Add a .env in the root dir of this repo
2. add these variables:

AWS_ACCESS_KEY_ID=xxx // as mentioned above
AWS_SECRET_ACCESS_KEY=xxx // as mentioned above
S3_BUCKET_NAME=audioanimated // or whatever you call the bucket
S3_REGION=us-east-2 // choose the same region that you web server uses
S3_ENV_PREFIX=dev // this is just a prefix in the bucket to separate files between environments

// prod only:
DATABASE_URL=postgresql://<<username>>:<<password>>@<<host-address>>:<<port>>/<<dbname>> // only needed in prod

audio files that are uploaded or created in the app will be saved in the s3 bucket.

Development

• install all required packages using $ npm install
• You will need to have postgreSQL installed in your local dev env.
• create the database audioanimated
• Seed the database by running $ npm run seed
• Run the app in dev by running both :
  • $ npm run server
  • $ npm run client

audioanimated's Issues

work on nav bar and project theme

handle re-record experience - MVP

change audio flow from source->gain->ac.destination to source->gain->analyser->ac.destination

have to get audio reconnected to graphics

debug failure to decode on file upload

capture blob duration before sending files to backend

react component display canvas with web GL

replicate record test to see if same lag is present

fix styling on section columns so they are even

work on app design

fix state changes for all file related things

• upon creation of a new file, need to create reducer /action to add file in redux
• upon deletion of a file, need to create delete reducer /action to remove file in redux
• upon deletion remove raw data from raw data redux state

NOT NEEDED NOW:

• fix login sign up routing problem (this is already done)
• get rid of random 0 on all projects page (this is already done)

implement fix for recording latency - MVP

create dummy data demo and put iFrames on splash page - MVP

POC sending 2 ogg files from back end to front and playing both simultaneously in browser

ensure player stops when navigating away from page

deploy boilerplate app

BUG: uploading files does not work on new projects, also create section route is not working

render graphics on playAll push - MVP

create react form to upload file and associated redux

add fudge factor controller to UI experience in Audio Context 2 track example

Add Placement for graphics on single project page

stich together audio sections

test

working on wire frames

Fix section player - Restart, Show seconds, terminate and Loop

Finalize Splash Page (final demo, update the descriptions/text) - MVP

react component for the looper project

Start building routes based on agreed sql models

explore New React app template

play all is broken after merging in branch 63

need to fix this before moving on to adding graphics to play all feature

BUG - new files are being assigned to the wrong user

Clean up boiler plate to remove unneeded items

POC simple front end that records audio while you listen to two mp3s playing simultaneously

Create all projects component and connect to backend route

record-ground-work-part-II

add options on filecard

• add on/off toggle on FileCard to change if file is being play by the section player
• include volume slider on each file card that will adjust the level of a file that is being played in a section

allow user to change graphics fn when clicking button in sidebar

create final project page

implement "Back" button for re-recording

handle new project experience - record for first time - MVP

create sidebar

Think about user flow for how recording will work

Add styling on all projects page and add app footer

catch up on POC work and understand what was done

make sure project count in navbar updates after project creation

BUG. new file options dont show up on a new section until you refresh the page

react components to add file, overlay and section

record

add audio context to the single project component

make a file library system and move file routes to there

Create DB in Sequelize based on google sheets schema