- by Arema Arega
- https://www.arema-arega.com/
- @ FullStack Develoment Course
- https://codeop.tech/full-stack-development-bootcamp/
<iframe width="560" height="315" src="https://youtu.be/5Nw31b64smo" frameborder="0" allowfullscreen></iframe>- Analyze the audio input of the user.
- Visualize real time frequencies and notes.
- Show a list of the audio uploads kept inside the database and the current audio.
- Visualize the selected chords and a guitar chart (the selected chord should appear on the guitar chart example)
- Right Now I'm still working on the Develoment & Implementation of new features, like some of the mentioned below, but I haven't updated the information of the new Components or feat on this Readme.
- Integrating sound visualization components for interactive uses
- Adding an integration with Images manipulation
- user login
For those cloning this repository:
-
LICENSE : https://github.com/arema-arega/inter-art/blob/main/LICENSE
-
Please include Copyright (c) 2023 Arema Arega
-
And if you have any feedback please leave a comment.
Thank you.
- Visual Studio Code editor https://code.visualstudio.com/
- MySQL https://www.mysql.com/
- Postman https://www.postman.com/
- Node.js https://nodejs.org/en/about
- Web Audio Api https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
- Tones https://github.com/bit101/tones
- React Router https://reactrouter.com/en/main/start/tutorial
- react-chords https://github.com/tombatossals/react-chords
- nextUI https://nextui.org/docs/components/image
- clsx https://www.npmjs.com/package/clsx
https://www.geeksforgeeks.org/deployment-of-react-application-using-github-pages/
1 - Set the Repository Public
2 - Install GitHub Pages
npm install gh-pages --save-dev
And React-Scripts https://www.npmjs.com/package/react-scripts
npm i react-scripts
3 - Add to package.json file
Example:
"homepage": "https://<Username>.github.io/<Repository-name>"
For my Project:
"homepage": "https://arema-arega.github.io/inter-art/"
4 - Then we will add “deploy” and “predeploy “properties in the scrip
"scripts":{
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
5 - Commit
git add .
git commit -m "commit"
git push
6 - Deploy
npm run deploy
- AudioUploadPage
-
- renders AudioUpload component
- AudioVisualizerPage
-
- renders AudioVisualizer components
- InfoListPage
-
- renders InfoSong & InfoList components
- ChordsVisualizerPage
-
- renders GuitarChords, ChordKeyCreator & ChordSuffixCreator components
- StartPage (that hasn't been used)
-
currentScreenSize (to Logo Component and to AudioVisualizer component)
-
currentScreenWidth (to AudioVisualizer component)
-
The the changes of the audio input coming from the AudioUpload component and extracts the information to be sent as prop:
-
- audio (Passed to the AudioVisualizerPage as {audiolink} and sent again as a prop to the Audiovisualizer component)
-
- info (Passed to the InforListPageused as {info} and sent again as a prop to the infolist component and the songlist component)
constants (UseState & Eventhandelers) return:
- Logo component
- header (links)
- main (rutes)
- the buttons:because they have their own css file:button.css
- the Typo family that is included on the main HTML, index.html file: @import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;200;300;400;500;600&display=swap');
Renders: AudioUpload component
- Live sound (through sound card prefered ex: band playing, djs, mic)
- links from 3rd parties // taking into account that on the app there is a html element creation for the sound const audioLink = audio && URL.createObjectURL(audio) that doesn't need to be used in this case.
- Allowing more file types to be inputed like wav, flac, midi, etc
- handles the upload and obtains the data from an audiofile object, that will be passed to the app parent component that then will send it to:
- AudioVisualizer => that may passed in the future to the Chord VisualizerInfoListPage (Song List) / the DataBase Music (table songs)
AudioUpload
- Live sound (through sound card prefered ex: band playing, djs, mic)
- links from 3rd parties // taking into account that on the app there is a html element creation for the sound const audioLink = audio && URL.createObjectURL(audio) that doesn't need to be used in this case
- Allowing more file types to be inputed like wav, flac, midi, etc
- handles the upload and obtains the data from an audiofile object, that will be passed to the app parent component that then will send it to:
- AudioVisualizer => that may passed in the future to the Chord VisualizerInfoListPage (Song List) / the DataBase Music (table songs)
Renders the AudioVisualizer component
- The fast fourier it's not been recognized within the UseEffect on the Audiovisalizer component So the frequency analyzer and the canvas render are affected
- The stop function it's not working its got do with the audio content creation within the useeffect
- Live Frequency
- BPM analyzer
- Root note
- To connect the obtained data to the chord creation component so the user will be able to receive chord suggestions.
- Each capture Frequency is transformed into notes and saved in the data array to be shown after
- Sound bits that are rendered into colors inside the canvas with a draw function, while it's being played live.
- The user can select the frequency and the canvas size of the visualizer
AudioVisualizer
-
The fast fourier is not been recognized within the UseEffect on the Audiovisalizer component So the frequency analyzer and the canvas render are affected
-
The stop function it's not working it's got do with the audio content creation within the useeffect
-
Live Frequency
-
BPM analyzer
-
Root note
-
To connect the obtained data to the chord creation component so the user will be able to receive chord suggestions.
- The user uploads an audio on the AudioVisualizer component to obtain the data from it:
- Each captured Frequency is transformed into notes and saved in the data array to be shown after
- Sound bits that are rendered into colors inside the canvas with a draw function, while it's been played live.
- The user can select the frequency and the canvas size of the visualizer
- Songlist Component
- InfoList Component
- if (!info) {console.log("No song info provided");
- return; // Exit the function if info is null };
- The user can see and delete the info from the list made out of the uploaded audio {info}that have been sent automatically by the Songlist Component to the table songs located inside the database music:
-
id: 1
-
name: Maria - Dana Hill
-
size: 20
-
on the InfoList Component the user can see the {info} of the audio that it's been played
- the SongList Component is rendered on the InfoList Page
- if (!info) {console.log("No song info provided");
- return; // Exit the function if info is null };
- The user can see and delete the info from the list made out of the uploaded audio {info}that have been sent automatically by the Songlist Componentto the table songs located inside the database music:
- id: 1
- name: Maria - Dana Hill
- size: 20
- The InfoList Component is rendered on the InfoListPage allowing the user to see the {info} of the audio that it's been played.
ChordVisualizer page renders:
- KeyCreator for Selecting the Key of ChordC, D , Eb...etc
- ChordSuffixCreator for Selecting the type of Chordmenor, mayor...etc
- Both combined (KeyCreator & ChordSuffixCreator) create the Actual Chordthat should be used for rendering the:
- GuitarChords to show a guitar chart with the selected chord position
- To be able to select the root note and suffix of the chord to see it on the guitar chart above.
- To give the possibility to the user to move the position of the notes on the guitar chartand obtain the name of the chord
- To play a chord and to obtain its name and possible positions on a guitar chart from the audio input.
- GuitarChords component is rendered on the ChordsVisualizerPage to show a guitar chart with the selected chord position.
-
The component is receiving the chord from @tombatossals/react-chords/lib/Chord' (Installation of the library: npm install @tombatossals/react-chords)
-
The idea will be to use this library for chord-matching(using for example filter()) to render the chord generated by the selected (key) KeyCreator & (suffix) ChordSuffixCreator
-
For that the GuitarChords should receive the props sended by the parent:
-
- ChordsVisualizerPage
-
-
- (GuitarChords selectedKeyValue= {(selectedKeyValue)} selectedSuffix={(selectedSuffix)})
-
-
- using them:
-
-
- const GuitarChords = (selectedKeyValue, selectedSuffix)
-
-
- to match their values with react-chords library to render the actual Chord that has been selected on the ChordsVisualizerPage.
-
KeyCreator component is renderedon the ChordsVisualizerPage for Selecting the Key of ChordC, D , Eb...etc
- https://github.com/tombatossals/chords-db#chords-db1-
- git clone https://github.com/tombatossals/chords-db.git2
- cd chords-db
- ChordSuffixCreator component is renderedon the ChordsVisualizerPage for Selecting the type of Chordminor, mayor...etc
-
This page was made as the initial point for the user to navigatethe idea was that the user sees the Big Logo presses on it and the journey within the app starts
-
On the LOGO component: const handleLogoClick = () => {navigate("/audio-upload");
-
Navigate to the AudioUpload page when the logo is clicked};
-
The conditional rendering on the app component has not been implemented for this to happen.
-
When the Logo Image is clicked the user is taken to the AudioUpload Page: const handleLogoClick = () => {navigate("/audio-upload");};
-
The logo uses the library: https://nextui.org/docs/components/image (it's the only component using it on the app)
-
The Logo component uses the currentScreenSize prop sent from the app parent component
- To put a max and min condition on the rendering of the logo on the percentage value:
- const percentage = Math.min(currentScreenSize / 12, 50);
- AudioVisualizer component
- the Logo component
- Button: This Component is used through all the app components. Using a CSS file "./button.css" with the different customizations
- This Component is used through all the app components it's used to customizes all the buttons.
