React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.

Audio Visualiser

A React-based audio visualiser that creates dynamic visualisations using p5.js. The application allows users to select different audio files and visualisation modes to create unique visual experiences.

Features

• Multiple visualisation modes
• Audio file selection
• Real-time frequency analysis
• Responsive canvas that adapts to window size
• Play/Stop controls

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Setup

1. Clone the repository:

git clone <repository-url>
cd audio-visualiser

2. Install dependencies:

npm install
# or
yarn

3. Add your audio files:

   • Create an mp3s directory in the public folder if it doesn't exist
   • Add your MP3 files to the public/mp3s directory
   • Update the audioFiles array in src/components/Home.jsx with your audio files:

   const audioFiles = [
     { name: "Your Audio Name", path: "/mp3s/your-audio-file.mp3" },
     // Add more audio files here
   ];

4. Start the development server:

npm run dev
# or
yarn dev

5. Open your browser and navigate to http://localhost:5173

Deploying

To deploy to Github Pages, run:

npm run predeploy

to build a production version of the app, and then:

npm run deploy

to deploy the app to GH pages. You should find this triggers a build and deploy action in https://github.com/CogappLabs/audio-visualiser/actions.

Project Structure

src/
├── components/
│   ├── modes/           # Visualisation mode components
│   │   ├── sketch.js    # Default visualisation mode
│   │   └── serene.js    # Alternative visualisation mode
│   ├── AudioVisualiser.jsx  # Main visualisation component
│   └── Home.jsx         # Home page with file/mode selection
├── App.jsx              # Main app component with routing
└── main.jsx            # Application entry point

Adding New Visualisation Modes

1. Create a new file in the src/components/modes directory
2. Follow the pattern of existing mode files:
   • Export a p5 sketch function
   • Implement setup, draw, and setAudio methods
   • Add any custom visualisation logic
3. Import and add the new mode to the MODES object in src/components/AudioVisualiser.jsx
4. Add the name of the new mode to the MODES object in src/components/Home.jsx

Development Notes

• The project uses React 18 with Strict Mode enabled for better development experience
• p5.js is used for canvas rendering and audio analysis
• The application uses React Router for navigation
• All visualisation modes are modular and can be easily extended

width = canvas width, var from p5 height = canvas height, var from p5

License

[Your chosen license]