chingu-voyages / v9-bears-team-11 Goto Github PK

View Code? Open in Web Editor NEW

2.0 6.0 4.0 582 KB

Synth Audio Generator using Tone.js | Voyage-9 | https://chingu.io/

Home Page: https://codepen.io/shimphillip/full/OeYdbd

HTML 21.85% JavaScript 38.80% CSS 39.36%

chingu html css js webaudio-api tonejs

v9-bears-team-11's Introduction

v9-bears-team-11

Synth Audio Generator using Tone.js | Voyage-9 | https://chingu.io/

User stories

User can click on piano keys to play notes

Mouse pressing down on a key will continuously play one note instead of firing off the same note multiple times.
You can drag down with mousepress to play neighboring notes.

Users can keypress notes on the keyboard - matching letters are displayed on pinao keys.

Keypressing down on a key will continuously play one note instead of firing off the same note multiple times.

User can click on one of 4 buttons to change to a different synth.
Notes will be recorded when a key is played.

You can toggle ability to record with a checkbox.

Contributors

Phillip Shim
Paul Gamble

v9-bears-team-11's People

Contributors

Stargazers

Watchers

Forkers

paulywill ye-man

v9-bears-team-11's Issues

Work Item: Do some research into Electric Piano

Look at typical features of an electric piano.

We own one... what are some of the unused features?)

Project / Stack / Workflow

@shimphillip and @paulywill decided on:

[ x] Project - sound generator / something that create sample/beats/piano audio | perhaps ability for users to record to mp3 or generate the code of audio
[ x ] Stack - combination of Gatsby.js / Web Audio api
[ x ] Workflow - Wednesday evening meetings / Discord / VS Code Live share / github workflow?

Feature: Ability to record "track/sounds"

The ability to record to download/share with others.

Work Item: R&D into Tone.js and all the available features.

Look at what's available in the https://tonejs.github.io/ and all/any methods we can use.

Feature: Unsplash header, search term "audio"

https://unsplash.com/search/photos/audio

Work Item: Continue with full feature piano

Continue with creating a full electric piano including some buttons for volume and power(?)

Work Item: Generate Sound using Web Audio API

Create some samples using Web Audio API.

Ref:

Work Item: CSS Piano Prototype

Create CSS piano.

Ref: https://www.freecodecamp.org/news/all-you-need-to-know-about-the-web-audio-api-3df170559378/

Work Item: Buttons for Additional Features

Using the layout (#19) create buttons additional features:

Gain/ Volume
Pitch
Tempo?

I like the first example from an example demo here: https://www.jqueryscript.net/demo/Touchable-Knob-style-Range-Input-Plugin-With-jQuery-fancyknob/

@shimphillip: Any issues with jquery in Gatsby?

Once the buttons are created make them responsive similar to the piano keys.

CI/CD ? Travis or something else?

@shimphillip, I'm only familiar with Travis CI.

Do you want to use something like that or try something else?

Circle CI?

Work Item: Make the Piano Keys

Modify the listener method to detect the length of note to play.

Would be nice if this method can output to the console the note and time of note after the piano key is released.

ie : C4, 8n

Work Item: Mock Up and Layout

Create a mockup of MVP front-end and button layout.

(Nice to Have) Feature: Use webcam to create music

Not discussed but in addition to manually clicking instruments to create the sound it would be a "nice to have feature" to create music using webcam.

I believe this could be accomplished with a combination of react webcam

This appears to be working on mobile as well: https://codepen.io/paulywill/pen/QXWKMe?editors=1000

And using something like Opencv.js histogram calculation:
https://codepen.io/huningxin/pen/wqBvRo