Ether is a visual audio project, built using React and Ableton Live.
Play it using the a, s and d keys on your keyboard, press and hold to play the entire sample.
- Firstly, I created the sounds in Ableton Live using synths and effects.
- I then set up the react app so that when you press one of the respective qwerty keys, the audio is played until you let go or the sample ends. The audio fades out then back in using SetTimeOut.
- I created the buttons styling to light up on press and release and finally set the background colour to transition in and out with the audio.
A screen capture of the app, enable
Ether.-.Google.Chrome.2021-09-29.18-09-13_Trim.mp4
As a user
So that I can enjoy some synthesized sounds
I want to be able to hear the audio samples play in my browser
As a user
So that I can play the sounds like a keyboard
I want to press the qwerty keyboard to play sounds
As a user
So that I can play the notes for as long as I like
I would like the audio to stop and start for the duration I hold the key down
As a user
So that I can be immersed in the visual experience
I want to see visual changes based on my qwerty keyboard playing
Enter the following in your terminal:
$ git clone https://github.com/charlierdm/Ether-Visual-Audio.git
In the root directory, run the following to install dependencies:
$ npm install
To run the app:
npm start
The site will load in your browser, if for any reason it doesn't, click >> http://localhost:3000/