ESP32 Drum Pad Web Client

This repository contains a single-page web application that serves as a control interface for an ESP32-based drum pad project. It uses the Web Bluetooth API to connect directly to the ESP32 hardware and transmit character data that triggers specific audio outputs.

Features

• Bluetooth Low Energy (BLE) connectivity to ESP32 devices.
• Touch-responsive interface designed for mobile and desktop use.
• Hardware keyboard integration for desktop users.
• Real-time connection status updates.

Technical Specifications

The web client is configured to connect to an ESP32 operating as a BLE server with the following parameters:

• Target Device Name: ESP32_Music_Machine
• Primary Service UUID: 4fafc201-1fb5-459e-8fcc-c5c9c331914b
• Target Characteristic UUID: beb5483e-36e1-4688-b7f5-ea07361b26a8

Data Mapping

When an input is registered on the web interface, it sends a specific lowercase character over the BLE characteristic to the ESP32:

• Kick Drum: Sends q (Triggered by on-screen button or 'Q' key)
• Snare Drum: Sends w (Triggered by on-screen button or 'W' key)
• Hi-Hat: Sends e (Triggered by on-screen button or 'E' key)

Requirements

1. ESP32 Hardware: An ESP32 microcontroller running compatible firmware that sets up a BLE server matching the UUIDs and device name listed above.
2. Browser Support: A web browser that supports the Web Bluetooth API. Currently, this is supported on Chrome, Edge, and Opera (desktop and Android). Firefox and Safari do not fully support Web Bluetooth at this time.
3. Security Context: The Web Bluetooth API requires a secure context. You must serve index.html over HTTPS or access it via localhost.

Usage Instructions

1. Host the index.html file on a secure server or open it locally using a development server (e.g., Python's http.server or a VS Code Live Server extension) via localhost.
2. Ensure your ESP32 is powered on and advertising its BLE service.
3. Click the Connect to ESP32 button in the web interface.
4. Your browser will prompt you to select a Bluetooth device. Select ESP32_Music_Machine from the list and click Pair.
5. Wait for the status indicator to display "Status: Connected. Ready to play."
6. Click the on-screen buttons or press the corresponding keys on your keyboard to send the character signals to the ESP32.