Noise Navigator - Your Urban Serenity Guide: Real-Time Noise Map & Quiet Exploration

Detect in real-time, report as a community, and discover your city's soundscape. Find your exclusive quiet corners or help others pinpoint bustling zones.

[Project Name] Showcase

Project Overview

In the clamor of modern cities, finding a moment of peace has become a sought-after luxury. "Noise Navigator" aims to address this by serving not just as a real-time noise map application, but as an interactive platform guiding users to explore and share the urban sound environment. Users can leverage their device's microphone to perceive ambient noise levels instantly, anonymously sharing this data onto a public map, thereby co-creating a community-maintained "soundscape" of the city. Concurrently, users can discover and save their preferred "Quiet Havens" or reference others' findings to plan their routes and activities. This project is dedicated to making it easier for everyone to find necessary quiet spaces while also raising public awareness of urban noise issues.

Key Features & Solutions

  • Concept & Implementation: Utilizes the browser's navigator.mediaDevices.getUserMedia API to access the microphone, analyzing audio data via AudioContext and AnalyserNode to estimate ambient noise in decibels (dB). Detected levels are instantly shown on the dashboard (decibelLevelEl), visualized through a dynamic noise bar (noiseBarEl) and a sound wave canvas (soundWaveCanvas), offering users an intuitive understanding of the current sound environment.
  • Concept & Implementation: Integrates the Leaflet.js library to display user-reported noise data points (latitude, longitude, dB level, timestamp) as color-coded markers (custom-marker-icon) on an interactive map. Users can zoom and pan to view historical noise distributions, with their current location highlighted by a distinct user marker (userMarker).
  • Concept & Implementation: Encourages users to discover and tag personally identified quiet and comfortable locations. After enabling noise detection, if the current location is assessed as quiet, users can save it as a "Quiet Haven" with custom names and notes. These havens are marked with special icons (custom-haven-marker) on the map and listed on the dashboard (quietHavensListEl), facilitated by localStorage for persistence.
  • Concept & Implementation: A simple achievement system (e.g., finding X quiet spots, reporting Y noise levels) is included to enhance user engagement and contribution. Achievement data (achievementsStatusEl) is stored locally via localStorage and can be reset by the user.
  • Concept & Implementation: Features a built-in translations object for English, Japanese, and Chinese. Users can easily switch interface languages via the languageSelector, with preferences saved in localStorage, enhancing global usability.

Project Details

  • My Role:Maker/Owner
  • Duration:Q2 2025
  • Tools Used:VS Code, React

Technology Stack

#Leaflet.js#TailwindCSS