Free Online Audio Trimmer and Ringtone Maker

Project Overview

A lightweight, client-side web application designed to allow users to upload, preview, trim, and download audio segments. This tool serves as both an audio cutter and a ringtone generator, prioritizing privacy by keeping all processing local using the Web Audio API and File API.

Core Features

• Drag-and-Drop Upload: Intuitive file input area that accepts common audio formats (MP3, WAV, OGG).
• Waveform Visualization: Real-time visual representation of audio using the HTML5 Canvas API to allow precise selection.
• Precision Controls: Input fields for exact start and end times, alongside a draggable range slider for visual selection.
• Preview Player: Playback controls (Play, Pause, Stop) that loop the selected segment for fine-tuning.
• Privacy-First Processing: Zero server-side interaction. All editing, encoding, and downloading happen client-side.
• Download Logic: Export the trimmed segment immediately as a local file download via Blob URLs.

User Interface Design

• Layout: A clean, centered column layout. Header at the top contains the H1 title and a brief instruction line. The main editing area houses the waveform visualization. The control panel (sliders and action buttons) is positioned immediately below the waveform.
• Palette: A clean, professional aesthetic using a light-mode palette: #FFFFFF (background), #F4F7F6 (secondary surfaces), #2C3E50 (text), and #3498DB (primary action/accent color).
• Responsiveness: Fluid grid design ensures the tool works perfectly on desktops, tablets, and smartphones.
• Interactivity: Smooth CSS transitions for button hover states, focus states, and progress indicators. Micro-interactions for playback status updates.

Constraints & Technical Requirements

• Single File: The entire application must be contained in a single index.html file. All CSS and JavaScript must be embedded within <style> and <script> tags, respectively.
• No External Frameworks: Pure, vanilla JavaScript only. No React, Vue, or heavy dependencies.
• No Dark Mode: Implement a fixed, professional light-mode aesthetic only. Do not provide a dark mode toggle.
• No Footer: The layout must be streamlined. Do not include a footer section.
• Sandbox Compatibility: The code must be clean, modular, and optimized to function perfectly within a sandboxed iframe or a standard web view.