🎙️MicMasterFlex

MicMasterFlex is a web app that allows users to configure the positions of a microphone array on an interactive grid.

Designed for audio engineers and researchers, this tool offers an intuitive interface for precise microphone placement, enabling users to simulate and optimize array setups for various acoustic applications.

Table of Contents

1. Demo
2. Project motivation
3. Prerequisites
4. Installation
5. Running the project locally
6. Building the project locally
7. Project structure
8. Keyboard Shortcuts
9. Lighthouse Audit
10. Citation

📸 Demo

mic-master-flex-demo.mov

💡 Project Motivation

MicMasterFlex was born out of challenges encountered during the Robots as Furniture project at Brown University Human-centered Robotics Initiative, where configuring a microphone array for sound localization required precise positioning of multiple microphones.

Given the complex arrangement, writing down positions manually without a visual guide proved inefficient and error-prone.

MicMasterFlex addresses this by offering an interactive, visual interface to configure microphone positions on a grid, making it easier to plan and visualize the array layout.

Additionally, the tool generates the necessary numpy code for these positions, streamlining the setup process for audio processing and sound localization tasks.

📋 Prerequisites

In order to run the project locally, you must have Bun runtime installed.

💾 Installation

To install the project locally, clone the git repository and install all dependencies by running the following commands in your terminal:

git clone https://github.com/nicolasperez19/mic-master-flex.git
cd mic-master-flex
bun install

🏃‍♂️💨 Running the Project Locally

To run the project locally in developer mode, run the following command in your terminal:

bun run dev

🏗️ Building the Project Locally

To build the project locall, run the following command in your terminal:

bun run build

The production version of the site will be available in the ./dist folder.

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

⌨️ Keyboard Shortcuts

MicMasterFlex now supports keyboard shortcuts for changing modes:

• Press '1' for Pan mode
• Press '2' for Add mode
• Press '3' for Edit mode
• Press '4' for Delete mode =======

🌟 Lighthouse Audit

We have integrated Lighthouse CI into our continuous integration process to ensure the highest quality of our web application. Lighthouse CI runs audits for performance, accessibility, best practices, SEO, and more.

Running Lighthouse CI Locally

To run Lighthouse CI locally, use the following command:

npm run lighthouse

This will execute the Lighthouse CI audit and provide a detailed report of the results.

📝 Citation

If you'd like to cite this project, please use this BibTex:

@article{perez2024micmasterflex,
  title={MicMasterFlex},
  author={Nicolas Perez},
  journal={https://example.com/},
  year={2024}
}