Thanks to visit codestin.com
Credit goes to github.com

Skip to content

bicknicktick/mixloop

Repository files navigation

Donate

🎵 MixLoop

Professional Audio Sequence Mixer

MixLoop Screenshot

Go React TailwindCSS FFmpeg

Professional audio mixing application with advanced features including Dolby Stereo simulation, batch processing for 100+ files, real-time progress tracking, and intelligent CPU optimization.


🚀 Developed by BITZY.ID

GitHub stars GitHub forks GitHub watchers

## 💝 Support the Project

If you find this project helpful, consider supporting its development:

Donate

PayPal

Your support helps maintain and improve this project! 🚀

Advanced Features

🎵 Sequential Processing 🔄 Seamless Looping Audio Enhancement
Menggabungkan audio berurutan
audio1→audio2→audio3
(bukan overlay)
Loop dengan crossfade
di boundaries untuk
hasil seamless
Filter untuk meningkatkan
kualitas audio dengan
normalisasi loudness
🎚️ Dolby Stereo Simulation 🚀 Batch Processing 📊 Real-time Progress
Spatial widening dengan
stereotools=mlev=1.2
untuk efek surround
Optimized untuk 100+ files
dengan chunked processing
dan CPU throttling
WebSocket progress tracking
dengan animated progress bar
dan stage indicators
🧠 CPU Optimization 📱 Mobile-First UI 📤 Multiple Formats
Intelligent CPU monitoring
max 70% usage dengan
dynamic throttling
Responsive design
terinspirasi Threads
by Instagram
Export dalam
MP3 320k dan
WAV 24-bit

🛠️ Tech Stack

Enhanced Backend Architecture

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Gorilla Mux   │───▶│  Batch Processor │───▶│  CPU Monitor    │
│     Router      │    │  + WebSocket     │    │  + Throttling   │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                       │                       │
         ▼                       ▼                       ▼
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│  Progress Track │───▶│     FFmpeg      │───▶│  Audio Output   │
│   + Sessions    │    │   + Dolby Sim   │    │   MP3/WAV      │
└─────────────────┘    └─────────────────┘    └─────────────────┘

Modern Frontend Stack

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   React 18 +    │───▶│   TailwindCSS   │───▶│  Glass Morphism │
│      Vite       │    │   + Animations  │    │   + Progress    │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                       │                       │
         ▼                       ▼                       ▼
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   WebSocket     │───▶│  5-Column Grid  │───▶│  Dolby Stereo   │
│   Real-time     │    │   Controls      │    │    Toggle       │
└─────────────────┘    └─────────────────┘    └─────────────────┘

🚀 Quick Start

Prerequisites

Go Node.js FFmpeg

Installation Steps

🔧 Step 1: Install FFmpeg
# Ubuntu/Debian
sudo apt install ffmpeg

# macOS
brew install ffmpeg

# Windows
# Download from https://ffmpeg.org/download.html
⚙️ Step 2: Backend Setup
cd backend
go mod tidy
go run main.go

Server akan berjalan di: http://localhost:8081

🎨 Step 3: Frontend Setup
cd frontend
npm install
npm start

Frontend akan berjalan di: http://localhost:3000


🎛️ Advanced Audio Processing Pipeline

graph LR
    A[📁 Upload Files] --> B[✅ Validation]
    B --> C[🔗 Batch Processing]
    C --> D[🧠 CPU Monitoring]
    D --> E[🔄 Loop Application]
    E --> F[🎚️ Dolby Stereo]
    F --> G[✨ Enhancement]
    G --> H[📊 Progress Tracking]
    H --> I[📤 Export MP3/WAV]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#e8f5e8
    style D fill:#fff3e0
    style E fill:#fce4ec
    style F fill:#f8bbd9
    style G fill:#e0f2f1
    style H fill:#fff9c4
    style I fill:#e1f5fe
Loading

Enhancement & Processing Features

Feature Purpose Settings
🔊 Loudness Norm Normalisasi volume I=-14:TP=-2:LRA=11
🎚️ Dolby Stereo Spatial widening stereotools=mlev=1.2 -ac 2
🧠 CPU Throttling Prevent overload Max 70% CPU usage
🚀 Batch Processing Large file sets Chunked processing 10-20 files
📊 Progress Tracking Real-time updates WebSocket + HTTP fallback

📡 API Reference

Endpoint: /mix

POST Content-Type

Example Request:

curl -X POST http://localhost:8081/mix \
  -F "[email protected]" \
  -F "[email protected]" \
  -F "[email protected]" \
  -F "loops=2" \
  -F "crossfade=1.5" \
  -F "enhance=true" \
  -F "format=mp3" \
  -o mixloop_output.mp3

Parameters:

Parameter Type Default Description
audio_files files - Multiple audio files (MP3/WAV)
loops int 1 Jumlah pengulangan
crossfade float 2.0 Durasi crossfade (detik)
enhance bool true Enable audio enhancement
dolby_stereo bool false Enable Dolby Stereo simulation
format string mp3 Output format (mp3/wav)
session_id string - Session ID untuk progress tracking

📁 Project Structure

mixloop/
├── 📂 backend/                 # 🐹 Golang API Server
│   ├── 📂 handlers/           #    HTTP request handlers
│   ├── 📂 utils/              #    Advanced audio processing
│   │   ├── 📄 batch_processor.go    # Batch processing for 100+ files
│   │   ├── 📄 cpu_monitor.go        # CPU monitoring & throttling
│   │   ├── 📄 progress_tracker.go   # Real-time progress tracking
│   │   ├── 📄 audio_sequence.go     # Dolby Stereo & sequencing
│   │   └── 📄 audio_enhancer.go     # Audio enhancement filters
│   ├── 📄 main.go             #    Server entry point
│   └── 📄 go.mod              #    Go dependencies
├── 📂 frontend/               # ⚛️ React Application
│   ├── 📂 src/                #    Source code
│   │   ├── 📂 components/     #    React components
│   │   │   ├── 📄 Workspace.jsx     # 5-column controls layout
│   │   │   ├── 📄 ProgressBar.jsx   # Animated progress tracking
│   │   │   └── 📄 Landing.jsx       # Modern landing page
│   │   └── 📄 main.jsx        #    App entry point
│   ├── 📂 public/             #    Static assets
│   └── 📄 package.json        #    NPM dependencies
├── 📂 test_audio/             # 🎵 Sample audio files
├── 📄 ss1.png                 # 📸 Application screenshot
├── 📄 README.md               # 📖 This file
└── 📄 API_DOCUMENTATION.md    # 📚 API reference

🎯 Demo & Usage

Live Demo

Demo

Sample Audio Files

Gunakan file audio di folder test_audio/ untuk testing:

  • tone1_440hz.mp3 - 440Hz tone (3 detik)
  • tone2_880hz.mp3 - 880Hz tone (3 detik)
  • tone3_1320hz.mp3 - 1320Hz tone (3 detik)

Expected Result: 9 detik audio sequence (bukan 3 detik overlay)


🤝 Contributing

Contributors Issues Pull Requests

Contributions are welcome!

  1. Fork the repository
  2. Create feature branch (git checkout -b feature/AmazingFeature)
  3. Commit changes (git commit -m 'Add AmazingFeature')
  4. Push to branch (git push origin feature/AmazingFeature)
  5. Open Pull Request

📄 License

License

MIT License - Feel free to use this project for personal and commercial purposes.


💝 Made with ❤️ by BITZY.ID

Website GitHub

⭐ Star this repo if you find it useful!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published