ProAudio Cutter | Free Online Audio Trimmer
/* RESET & BASE */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: #f8f9fa; /* Light grey background */
color: #333; /* Dark text for readability */
min-height: 100vh;
padding: 15px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
width: 100%;
}
/* HEADER - Clean Design */
.header {
text-align: center;
padding: 25px 20px;
background: linear-gradient(135deg, #2c3e50, #4a6491);
border-radius: 20px;
margin-bottom: 25px;
box-shadow: 0 8px 25px rgba(44, 62, 80, 0.15);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.header h1 {
font-size: 2.4rem;
margin-bottom: 10px;
color: white;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.header p {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
opacity: 0.9;
}
/* MAIN TOOL CONTAINER - Light & Clean */
.tool-container {
background: white;
border-radius: 20px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
width: 100%;
}
/* UPLOAD AREA - Better Mobile Layout */
.upload-area {
border: 3px dashed #4285f4;
border-radius: 18px;
padding: 40px 20px;
text-align: center;
background: #f8f9ff;
cursor: pointer;
transition: all 0.3s;
margin-bottom: 25px;
position: relative;
overflow: hidden;
width: 100%;
}
.upload-area:hover {
border-color: #0d6efd;
background: #edf2ff;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(66, 133, 244, 0.15);
}
.upload-icon {
font-size: 50px;
color: #4285f4;
margin-bottom: 15px;
}
.upload-area h3 {
font-size: 1.3rem;
margin-bottom: 10px;
color: #2c3e50;
line-height: 1.3;
font-weight: 600;
}
.upload-area p {
font-size: 0.95rem;
color: #6c757d;
margin-bottom: 25px;
line-height: 1.4;
}
/* WAVEFORM SECTION - Now with Playback Controls */
.waveform-container {
background: #f8f9fa;
border-radius: 15px;
padding: 20px;
margin: 25px 0;
border: 1px solid #dee2e6;
width: 100%;
}
.waveform-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
flex-wrap: wrap;
gap: 10px;
}
.waveform-header h3 {
color: #2c3e50;
font-size: 1.2rem;
}
#waveform {
width: 100%;
height: 140px;
margin: 15px 0;
background: #fff;
border-radius: 10px;
border: 1px solid #e9ecef;
}
/* PLAYBACK CONTROLS - Crucial Features */
.playback-controls {
display: flex;
align-items: center;
gap: 15px;
margin-top: 20px;
padding: 15px;
background: #f1f3f4;
border-radius: 12px;
flex-wrap: wrap;
justify-content: center;
}
.playback-btn {
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
background: #4285f4;
color: white;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
box-shadow: 0 4px 10px rgba(66, 133, 244, 0.3);
}
.playback-btn:hover {
background: #3367d6;
transform: scale(1.05);
}
.playback-btn:active {
transform: scale(0.95);
}
.time-display {
font-family: 'Courier New', monospace;
font-size: 1.1rem;
color: #2c3e50;
font-weight: 600;
min-width: 120px;
text-align: center;
}
.volume-control {
display: flex;
align-items: center;
gap: 10px;
min-width: 150px;
}
.volume-control span {
font-size: 20px;
color: #4285f4;
}
/* CONTROLS GRID */
.controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 30px 0;
width: 100%;
}
.control-group {
background: #f8f9fa;
padding: 20px;
border-radius: 15px;
border: 1px solid #e9ecef;
}
.control-group h4 {
color: #2c3e50;
margin-bottom: 15px;
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 8px;
}
/* BUTTONS - Better Design */
.btn {
padding: 12px 24px;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
color: white;
margin: 5px;
display: inline-block;
text-align: center;
width: calc(50% - 10px);
max-width: 200px;
}
.btn-primary {
background: linear-gradient(135deg, #4285f4, #0d6efd);
}
.btn-success {
background: linear-gradient(135deg, #28a745, #20c997);
}
.btn-warning {
background: linear-gradient(135deg, #ffc107, #fd7e14);
}
.btn-danger {
background: linear-gradient(135deg, #dc3545, #c82333);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.btn:active {
transform: translateY(0);
}
/* FEATURES GRID */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin: 30px 0;
width: 100%;
}
.feature-card {
background: white;
padding: 20px;
border-radius: 15px;
border-left: 4px solid #4285f4;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
border: 1px solid #e9ecef;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(66, 133, 244, 0.15);
}
.feature-card h4 {
color: #2c3e50;
margin-bottom: 10px;
font-size: 1rem;
}
.feature-card p {
color: #6c757d;
font-size: 0.9rem;
line-height: 1.5;
}
/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
body {
padding: 10px;
}
.container {
padding: 10px;
max-width: 100%;
}
.header {
padding: 20px 15px;
margin-bottom: 20px;
border-radius: 15px;
}
.header h1 {
font-size: 1.8rem;
}
.header p {
font-size: 0.95rem;
}
.tool-container {
padding: 20px 15px;
border-radius: 15px;
}
/* UPLOAD AREA MOBILE OPTIMIZED */
.upload-area {
padding: 30px 15px;
margin-bottom: 20px;
border-radius: 15px;
}
.upload-icon {
font-size: 40px;
}
.upload-area h3 {
font-size: 1.1rem;
line-height: 1.3;
padding: 0 5px;
}
.upload-area p {
font-size: 0.85rem;
padding: 0 5px;
}
/* UPLOAD BUTTONS - Better mobile layout */
.upload-buttons {
display: flex;
flex-direction: row;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.upload-buttons .btn {
width: 48%;
min-width: 140px;
margin: 5px 0;
}
/* PLAYBACK CONTROLS MOBILE */
.playback-controls {
padding: 12px;
gap: 10px;
justify-content: space-around;
}
.playback-btn {
width: 45px;
height: 45px;
font-size: 16px;
}
.time-display {
font-size: 0.95rem;
min-width: 100px;
}
.volume-control {
min-width: 130px;
}
/* CONTROLS - Stack on mobile */
.controls {
grid-template-columns: 1fr;
gap: 15px;
}
.control-group {
padding: 15px;
}
/* BUTTONS IN CONTROL GROUPS */
.control-group .btn {
width: 100%;
max-width: 100%;
margin: 8px 0;
}
/* FEATURES GRID - Single column on mobile */
.features-grid {
grid-template-columns: 1fr;
gap: 15px;
}
#waveform {
height: 120px;
}
}
@media (max-width: 480px) {
.header h1 {
font-size: 1.6rem;
}
.upload-area h3 {
font-size: 1rem;
}
/* UPLOAD BUTTONS - Stack vertically on very small screens */
.upload-buttons {
flex-direction: column;
align-items: center;
}
.upload-buttons .btn {
width: 100%;
max-width: 250px;
}
.playback-controls {
flex-direction: column;
align-items: stretch;
}
.time-display {
order: -1;
margin-bottom: 10px;
}
.btn {
padding: 10px 20px;
font-size: 14px;
}
}
@media (max-width: 360px) {
.header {
padding: 15px 10px;
}
.header h1 {
font-size: 1.4rem;
}
.upload-area {
padding: 25px 10px;
}
.upload-area h3 {
font-size: 0.95rem;
}
}
/* ========== FAQ SECTION ========== */
.faq-item {
background: #f8f9fa;
padding: 20px;
border-radius: 15px;
margin-bottom: 15px;
border: 1px solid #e9ecef;
color: #333; /* Dark text */
}
.faq-item h4 {
color: #2c3e50;
margin-bottom: 10px;
font-size: 1.1rem;
}
.faq-item p {
color: #495057;
line-height: 1.5;
}
/* ========== ARTICLE SECTION ========== */
article {
color: #333; /* Dark text for readability */
}
article h2, article h3 {
color: #2c3e50;
margin-top: 25px;
margin-bottom: 15px;
}
article p {
color: #495057;
line-height: 1.6;
margin-bottom: 20px;
}
article strong {
color: #4285f4;
}
/* LOADING ANIMATION */
.loader {
display: none;
text-align: center;
margin: 20px 0;
}
.spinner {
border: 5px solid rgba(66, 133, 244, 0.1);
border-top: 5px solid #4285f4;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* UTILITY CLASSES */
.upload-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
margin-top: 15px;
}
.section-title {
color: #2c3e50;
margin-top: 40px;
margin-bottom: 20px;
text-align: center;
font-size: 1.8rem;
}
/* SELECT DROPDOWN */
select {
width: 100%;
padding: 12px 15px;
border-radius: 10px;
border: 1px solid #dee2e6;
background: white;
color: #495057;
font-size: 15px;
margin-bottom: 15px;
cursor: pointer;
}
select:focus {
outline: none;
border-color: #4285f4;
box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
}
// Audio Processing Variables
let wavesurfer;
let isPlaying = false;
let startTime = 0;
let endTime = 0;
let currentVolume = 0.8;
// Initialize Wavesurfer with playback
function initWaveSurfer() {
wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: '#4a90e2',
progressColor: '#357abd',
cursorColor: '#ff6b6b',
cursorWidth: 2,
barWidth: 3,
barRadius: 3,
barGap: 3,
height: 140,
responsive: true,
normalize: true,
backend: 'WebAudio',
plugins: []
});
// Set initial volume
wavesurfer.setVolume(currentVolume);
// Update time display
wavesurfer.on('ready', function() {
const duration = wavesurfer.getDuration();
document.getElementById('totalTime').textContent = formatTime(duration);
endTime = duration;
// Create regions for cutting
wavesurfer.addRegion({
start: startTime,
end: endTime,
color: 'rgba(255, 107, 107, 0.3)',
drag: true,
resize: true
});
});
// Update current time
wavesurfer.on('audioprocess', function(time) {
document.getElementById('currentTime').textContent = formatTime(time);
});
// Play/pause button update
wavesurfer.on('play', function() {
isPlaying = true;
document.getElementById('playPauseBtn').innerHTML = '⏸️';
});
wavesurfer.on('pause', function() {
isPlaying = false;
document.getElementById('playPauseBtn').innerHTML = '▶️';
});
wavesurfer.on('finish', function() {
isPlaying = false;
document.getElementById('playPauseBtn').innerHTML = '▶️';
});
}
// File Upload Handler
document.getElementById('audioInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
loadAudioFile(file);
}
});
// Drag and Drop
const uploadArea = document.getElementById('uploadArea');
uploadArea.addEventListener('dragover', (e) => {
e.preventDefault();
uploadArea.style.borderColor = '#0d6efd';
uploadArea.style.transform = 'translateY(-3px)';
});
uploadArea.addEventListener('dragleave', () => {
uploadArea.style.borderColor = '#4285f4';
uploadArea.style.transform = 'translateY(0)';
});
uploadArea.addEventListener('drop', (e) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
if (file && file.type.startsWith('audio/')) {
loadAudioFile(file);
}
uploadArea.style.borderColor = '#4285f4';
uploadArea.style.transform = 'translateY(0)';
});
// Load Audio File
function loadAudioFile(file) {
if (file.size > 100 * 1024 * 1024) {
alert('File too large! Maximum size is 100MB.');
return;
}
document.getElementById('loader').style.display = 'block';
const reader = new FileReader();
reader.onload = function(e) {
const audioUrl = e.target.result;
if (!wavesurfer) {
initWaveSurfer();
}
wavesurfer.load(audioUrl);
wavesurfer.on('ready', function() {
document.getElementById('loader').style.display = 'none';
document.getElementById('waveformContainer').style.display = 'block';
updateVolumeDisplay();
});
};
reader.readAsDataURL(file);
}
// Load Sample Audio
function loadSample() {
document.getElementById('loader').style.display = 'block';
if (!wavesurfer) {
initWaveSurfer();
}
// Load a sample audio (using a public domain audio URL)
wavesurfer.load('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3');
wavesurfer.on('ready', function() {
document.getElementById('loader').style.display = 'none';
document.getElementById('waveformContainer').style.display = 'block';
updateVolumeDisplay();
});
}
// PLAYBACK CONTROLS
function playPause() {
if (!wavesurfer) {
alert('Please load an audio file first!');
return;
}
if (isPlaying) {
wavesurfer.pause();
} else {
wavesurfer.play();
}
}
function skipBackward() {
if (!wavesurfer) return;
const currentTime = wavesurfer.getCurrentTime();
wavesurfer.seekTo((currentTime - 5) / wavesurfer.getDuration());
}
function skipForward() {
if (!wavesurfer) return;
const currentTime = wavesurfer.getCurrentTime();
wavesurfer.seekTo((currentTime + 5) / wavesurfer.getDuration());
}
// VOLUME CONTROL
document.getElementById('volumeSlider').addEventListener('input', function(e) {
currentVolume = e.target.value / 100;
if (wavesurfer) {
wavesurfer.setVolume(currentVolume);
}
document.getElementById('volumeValue').textContent = e.target.value + '%';
});
function updateVolumeDisplay() {
document.getElementById('volumeValue').textContent = Math.round(currentVolume * 100) + '%';
document.getElementById('volumeSlider').value = currentVolume * 100;
}
// MARKER FUNCTIONS
function setStartMarker() {
if (!wavesurfer) {
alert('Please load an audio file first!');
return;
}
startTime = wavesurfer.getCurrentTime();
alert('Start marker set at: ' + formatTime(startTime));
updateMarkers();
}
function setEndMarker() {
if (!wavesurfer) {
alert('Please load an audio file first!');
return;
}
endTime = wavesurfer.getCurrentTime();
alert('End marker set at: ' + formatTime(endTime));
updateMarkers();
}
function updateMarkers() {
// In a full implementation, this would update visual markers on waveform
console.log('Cut segment: ' + formatTime(startTime) + ' to ' + formatTime(endTime));
}
// Format time to MM:SS
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs = endTime) {
alert('Please set valid start and end markers first!');
return;
}
document.getElementById('loader').style.display = 'block';
setTimeout(() => {
alert('Audio trimmed from ' + formatTime(startTime) + ' to ' + formatTime(endTime) + '! Click Download to save.');
document.getElementById('loader').style.display = 'none';
}, 1000);
}
function splitAudio() {
if (!wavesurfer) {
alert('Please load an audio file first!');
return;
}
const currentTime = wavesurfer.getCurrentTime();
alert('Audio would be split at: ' + formatTime(currentTime) + '\n\nIn full version, this creates two separate audio files.');
}
function resetCuts() {
if (wavesurfer) {
startTime = 0;
endTime = wavesurfer.getDuration();
wavesurfer.seekTo(0);
updateMarkers();
alert('All cut markers have been reset.');
}
}
// EFFECTS
function fadeIn() {
if (!wavesurfer) {
alert('Please load an audio file first!');
return;
}
alert('Fade In effect applied to beginning of audio segment.');
}
function fadeOut() {
if (!wavesurfer) {
alert('Please load an audio file first!');
return;
}
alert('Fade Out effect applied to end of audio segment.');
}
function normalizeAudio() {
if (!wavesurfer) {
alert('Please load an audio file first!');
return;
}
alert('Volume normalization applied - audio levels balanced.');
}
// Speed Control
let speed = 1.0;
function changeSpeed() {
if (!wavesurfer) {
alert('Please load an audio file first!');
return;
}
speed = speed === 1.0 ? 1.5 : speed === 1.5 ? 0.75 : 1.0;
document.getElementById('speedValue').textContent = speed + 'x';
wavesurfer.setPlaybackRate(speed);
alert('Playback speed set to ' + speed + 'x');
}
// Preview Audio
function previewAudio() {
if (!wavesurfer) {
alert('Please load an audio file first!');
return;
}
if (startTime {
const format = document.getElementById('formatSelect').value;
const filename = `edited_audio_${Date.now()}.${format}`;
// Simulate download
const dummyLink = document.createElement('a');
dummyLink.href = '#';
dummyLink.download = filename;
document.body.appendChild(dummyLink);
dummyLink.click();
document.body.removeChild(dummyLink);
document.getElementById('loader').style.display = 'none';
alert(`Download started: ${filename}\n\nNote: In full version, this would be your actual edited audio file with all applied effects.`);
}, 1500);
}
// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
initWaveSurfer();
console.log('ProAudio Cutter with Playback Controls loaded!');
});
