https://github.com/chrisrobison/spectrogram
A tool to view the spectrogram of an audio stream or file or to create an audio file containing the spectrogram of a provided image.
https://github.com/chrisrobison/spectrogram
Last synced: 16 days ago
JSON representation
A tool to view the spectrogram of an audio stream or file or to create an audio file containing the spectrogram of a provided image.
- Host: GitHub
- URL: https://github.com/chrisrobison/spectrogram
- Owner: chrisrobison
- License: mit
- Created: 2025-04-25T09:20:26.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-12T22:34:02.000Z (10 months ago)
- Last Synced: 2025-08-13T00:26:17.911Z (10 months ago)
- Language: HTML
- Size: 18.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎵 Image-to-Audio Spectrogram Visualizer 🎨
A real-time audio visualization tool that converts images to sound and displays spectrograms of audio from various sources (microphone, audio files, or images converted to audio).
## ✨ Features
- **🎤 Multiple Input Sources**:
- Microphone input for real-time audio visualization
- Audio file upload (.mp3, .wav, etc.)
- Image-to-audio conversion with spectrogram display
- **📊 Real-time Visualization**:
- Responsive spectrogram display
- Customizable color mapping
- Pause/resume functionality
- **📱 Responsive Design**:
- Works on both desktop and mobile devices
- Adaptive interface with hamburger menu on small screens
- **🖼️ Image Processing**:
- Server-side image-to-audio conversion
- Uses the 'enscribe' command-line tool
- Supports common image formats (JPEG, PNG, GIF)
## 🚀 Installation
### Prerequisites
- 🖥️ Web server with PHP support
- 🛠️ 'enscribe' command-line tool installed on the server
- 🌐 Modern web browser with Web Audio API support
### Setup
1. Clone this repository:
```bash
git clone https://github.com/yourusername/image-to-audio-spectrogram.git
cd image-to-audio-spectrogram
```
2. Create required directories:
```bash
mkdir uploads
mkdir audio
```
3. Set proper permissions:
```bash
chmod 755 uploads
chmod 755 audio
```
4. Make sure PHP has permission to execute the 'enscribe' command.
5. Deploy to your web server or run locally with PHP's built-in server:
```bash
php -S localhost:8000
```
## 🎮 Usage
1. Open the application in your web browser.
2. Choose an input source:
- **🎤 Microphone**: Click "Start Mic" to use your device's microphone
- **🎧 Audio File**: Upload an audio file using the "Audio File" button
- **🖼️ Image File**: Upload an image to convert to audio using the "Image File" button
3. Adjust visualization parameters:
- **🌈 Hue**: Changes the color spectrum used in the visualization
- **☀️ Base**: Adjusts the base brightness level
- **📊 Range**: Controls the dynamic range of brightness
4. Additional controls:
- **⏯️ Pause/Resume**: Freezes or continues the visualization
- **🧹 Clear**: Resets the visualization display
## ⚙️ How It Works
### Client-Side
The web application uses the Web Audio API to:
- Capture audio from the microphone
- Process audio files
- Analyze frequency data using an FFT analyzer
- Visualize the frequency spectrum as a scrolling spectrogram
### Server-Side
The PHP handler (`enscribe_handler.php`):
1. Receives uploaded images
2. Validates file types and sizes
3. Executes the 'enscribe' command to convert images to audio
4. Returns the path to the generated audio file
## 🔬 Technical Details
- The spectrogram visualizes frequency data from 0Hz to ~22kHz (depending on sample rate)
- Frequency data is mapped logarithmically for more natural audio visualization
- The Web Audio API's AnalyserNode performs real-time FFT analysis
- Color mapping uses HSL color space for intuitive parameter control
## 🔒 Security Considerations
- File validation prevents upload of unauthorized file types
- Command execution is protected against injection using `escapeshellcmd()` and `escapeshellarg()`
- File size limits prevent server resource abuse
## 🔧 Troubleshooting
- **🔇 No audio visualization**: Ensure your browser supports the Web Audio API
- **🎤 Microphone access denied**: Check browser permissions for microphone access
- **🖼️ Image processing fails**: Verify the 'enscribe' command is properly installed and accessible to PHP
- **📱 Blank display on mobile**: Try rotating your device or refreshing the page
## 🌐 Browser Compatibility
- Chrome 70+
- Firefox 63+
- Safari 12.1+
- Edge 79+
## 📄 License
[MIT License](LICENSE)
## 👏 Acknowledgments
- The 'enscribe' tool for image-to-audio conversion
- Web Audio API for real-time audio processing capabilities