Immersive Ambient Sound Website with ReactJs (AI configuration coming soon)

Immersive Ambient Sound website that helps users to focus while doing work by listening to suitable background music build using ReactJs. Also has an Auto Space function which includes AI build using Tensorflow, that provide an auto suitable background music based on given preferences

Note

This Project is completed for Learning purposes. Feel free to use it and let me know ◡̈

Screen Record (So far)

screen.record.mp4

Platform that will be use

• ReactJS

• JavaScript

• CSS

• HTML

• Python

• Tensorflow

Function of the Website

1. Auto Space : The Auto Space function in the website allows AI to decide the perfect combination of ambient music to accompany the users while they are doing their work. It starts by asking a few questions to the users before deciding the music suitable. The users, can pause, stop, control the sound or switch to Manual Space.

2. Manual Space : The Manual Space function in the website allows the users to manually control ambient musics that were provided on the website. The users can play multiple combination of musics at one time, pause, stop and control the volume of the musics or switch to Auto Space instead.

1.Screenshot (Auto Space)

Start Page & Choose Auto Space Page

• Main Page : First page user will land on

• Choose Auto Space function : Users can choose between Auto Space or Manual Space here. In this Scenario, Auto Space is chosen

Auto Space Settings Page

• Information for Auto Space : Users can input information like what type of work they want to do, what kind of background music that they prefer and how long they are planningto do the work

Auto Space Main Page

• Page Overview : Main page where the users can view their local time, music player which includes volume control and quotes that changes every 5 minutes interval

• Volume Adjustment : Users can pause,stop or control the volume of the music player

• Donate : Users can click the donate button to contribute

• Switch to Manual Space : Users can also switch to Manual Space if they want to

2.Screenshot (Manual Space)

Start Page & Choose Manual Space Page

• Main Page : First page user will land on

• Choose Auto Space function : Users can choose between Auto Space or Manual Space here. In this Scenario, Manual Space is chosen

Manual Space Settings Page

• Information for Manual Space : Because dont really need to give information for the AI, they can just simply put how long they are planning to do the work, and move to the Main Page

Manual Space Main Page

• Page Overview : Main page where the users can view their local time, music player which includes volume control and quotes that changes every 5 minutes interval

• Volume Adjustment : Users can pause,stop or control the volume of the music player

• Donate : Users can click the donate button to contribute

• Switch to Auto Space : Users can also switch to Auto Space if they want to