Audio-feature-visualization

The web application allows users to visualize and compare various music recording parameters from multiple recordings simultaneously. There are currently no similar web-based applications available. Users can customize each visualization according to their preferences, and all changes are automatically saved to the database.

Tech Stack

Client:

Server:

Demo

https://audio-feature-visualization.onrender.com/

Documentation

YouTube

https://youtu.be/oowly3jtM-Y

Screenshots

Registration is available for users on the platform, and their information is securely stored in the database. After a successful login, a JSON Web Token (JWT) is generated on the server and sent to the user for subsequent request validation. The form enables validation of input data.

The user can upload recordings, music notation files, and MIDI files to the application, and all data is saved on the server. Recordings can be added via drag-and-drop, renamed, or deleted. The user also has the option in the settings panel to switch the application from Czech to English language.

This is the main page of the application. It consists of multiple components that effortlessly exchange data using the Pinia store and enable communication with the server through RestAPI.

Users have the flexibility to visualize multiple parameters from an unlimited number of recordings. Moreover, they can export all visualizations as needed. Each visualization comes with a dedicated settings panel on the right, allowing users to customize their display preferences.

Run Locally

Clone the project

  git clone https://github.com/MartinKlimes/Audio-feature-visualization-webapp.git

Go to the project directory

  cd frontend

Install dependencies

  npm install

Build the application

  npm run build

Setting up the Flask Server and Database

To run the Flask development server locally, you need to perform the following steps:

Open the file backend/run.py.
Ensure that the correct Database URI is set in backend/mos_backend/init.py.
To set up the required database tables, execute the script create_tables.py (this only needs to be done once).
After configuring the database, you can use the application to register and log in.

martinklimes / audio-feature-visualization-webapp Goto Github PK