Copy This Code And Paste Your Web Site | Check :Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MP3 Cutter</title>
<style>
/* General body styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
/* Container to center the content and make it responsive */
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
/* Styling the file input, buttons, and labels */
input[type="file"] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="number"], button {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 1rem;
}
button {
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
/* Style for the audio player */
audio {
width: 100%;
margin-top: 20px;
}
/* Responsive Design for smaller screens */
@media (max-width: 600px) {
body {
padding: 10px;
}
h1 {
font-size: 1.5rem;
}
input[type="number"], button {
font-size: 0.9rem;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Input for selecting an MP3 file -->
<input type="file" id="audioFile" accept="audio/*" />
<!-- Start and End Time Inputs -->
<label for="startTime">Start Time (seconds): </label>
<input type="number" id="startTime" value="0" step="0.1" min="0" />
<label for="endTime">End Time (seconds): </label>
<input type="number" id="endTime" value="10" step="0.1" min="0" />
<button onclick="cutAudio()">Cut MP3</button>
<!-- Audio Element to play the selected file -->
<audio id="audioPlayer" controls></audio>
</div>
<script>
let audioContext;
let audioBuffer;
document.getElementById('audioFile').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
// Load the audio into the audio context
initAudioContext(e.target.result);
};
reader.readAsArrayBuffer(file);
}
});
// Initialize Audio Context
function initAudioContext(arrayBuffer) {
if (!audioContext) {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
}
audioContext.decodeAudioData(arrayBuffer, function(buffer) {
audioBuffer = buffer;
const url = URL.createObjectURL(new Blob([arrayBuffer], { type: 'audio/mp3' }));
document.getElementById('audioPlayer').src = url;
}, function(e) {
console.error('Error decoding audio file:', e);
});
}
// Function to cut the audio
function cutAudio() {
const startTime = parseFloat(document.getElementById('startTime').value);
const endTime = parseFloat(document.getElementById('endTime').value);
if (endTime > startTime && audioBuffer) {
const trimmedBuffer = trimAudio(audioBuffer, startTime, endTime);
exportAudio(trimmedBuffer);
} else {
alert('Invalid start or end time');
}
}
// Function to trim the audio
function trimAudio(buffer, startTime, endTime) {
const duration = endTime - startTime;
const startSample = Math.floor(startTime * buffer.sampleRate);
const endSample = Math.floor(endTime * buffer.sampleRate);
const trimmedBuffer = audioContext.createBuffer(
buffer.numberOfChannels,
endSample - startSample,
buffer.sampleRate
);
for (let i = 0; i < buffer.numberOfChannels; i++) {
const channelData = buffer.getChannelData(i);
trimmedBuffer.copyToChannel(channelData.subarray(startSample, endSample), i, 0);
}
return trimmedBuffer;
}
// Function to export trimmed audio
function exportAudio(buffer) {
const offlineContext = new OfflineAudioContext(buffer.numberOfChannels, buffer.length, buffer.sampleRate);
const source = offlineContext.createBufferSource();
source.buffer = buffer;
source.connect(offlineContext.destination);
source.start(0);
offlineContext.startRendering().then(function(renderedBuffer) {
const audioBlob = bufferToWave(renderedBuffer);
const url = URL.createObjectURL(audioBlob);
const a = document.createElement('a');
a.href = url;
a.download = 'trimmed_audio.wav';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
}
// Convert buffer to WAV Blob
function bufferToWave(abuffer) {
const numberOfChannels = abuffer.numberOfChannels;
const length = abuffer.length * numberOfChannels * 2 + 44;
const buffer = new ArrayBuffer(length);
const view = new DataView(buffer);
let pos = 0;
// Write WAV header
setUint32(0x46464952); // "RIFF"
setUint32(length - 8); // File length - 8
setUint32(0x45564157); // "WAVE"
// Format chunk
setUint32(0x20746D66); // "fmt " chunk
setUint32(16); // Chunk length
setUint16(1); // PCM (uncompressed)
setUint16(numberOfChannels);
setUint32(abuffer.sampleRate);
setUint32(abuffer.sampleRate * 2 * numberOfChannels);
setUint16(numberOfChannels * 2);
setUint16(16); // 16-bit samples
// Data chunk
setUint32(0x61746164); // "data" chunk
setUint32(length - pos - 4);
for (let i = 0; i < abuffer.length; i++) {
for (let channel = 0; channel < numberOfChannels; channel++) {
const sample = abuffer.getChannelData(channel)[i];
view.setInt16(pos, sample < 0 ? sample * 0x8000 : sample * 0x7FFF, true);
pos += 2;
}
}
return new Blob([buffer], { type: 'audio/wav' });
function setUint16(data) {
view.setUint16(pos, data, true);
pos += 2;
}
function setUint32(data) {
view.setUint32(pos, data, true);
pos += 4;
}
}
</script>
</body>
</html>
The purpose of this project is to develop a simple, intuitive, and efficient MP3 cutter tool that can be accessed through a web browser. The idea behind this tool is to offer a quick and easy way for users to edit audio files without requiring professional audio editing software like Audacity or Adobe Audition. This tool should be lightweight, responsive, and user-friendly, making it accessible to both technical and non-technical users.
An MP3 cutter tool typically allows the user to upload an MP3 file, select the desired portion of the file using visual or time markers, and then extract and save the trimmed portion as a new file. This functionality should be complemented by smooth performance, an intuitive interface, and compatibility across different devices (desktops, tablets, smartphones).
2. Project Requirements
a) Technical Stack
To build this project, we will use the following technologies:
HTML5/CSS3: For the basic structure and styling of the website. HTML5 will be used to structure the front-end, including the file input element, buttons, and other user interface components, while CSS3 will be used to style the elements and ensure the application is responsive across different devices.
JavaScript: JavaScript will play a key role in creating the interactivity needed for selecting the audio segment, controlling playback, and managing user interactions. JavaScript will also handle audio file manipulation via libraries like howler.js or wavesurfer.js.
Web Audio API: For manipulating the audio file, including loading, playing, visualizing, and slicing it. This API provides a powerful framework for handling audio operations in modern web browsers.
Backend (Optional): If the app needs to handle large files or save user files, you can build a simple back-end using Node.js with Express to handle file uploads and processing, or you can opt for a serverless solution using AWS Lambda.
File Handling API (JavaScript): HTML5 offers native capabilities for file handling, which can be used in this project to load, preview, and trim MP3 files on the client side.
b) Features and Functionalities
The tool will have the following core features:
1. MP3 File Upload: Users should be able to upload an MP3 file from their local system. The tool will handle validation to ensure only MP3 files can be uploaded.
2. Audio Playback: The tool should allow users to listen to the entire MP3 file or the selected portion of the file. Playback control buttons like play, pause, and stop should be available for ease of use.
3. Visual Representation of Audio: Using a waveform or timeline, users can visually identify the peaks and troughs in the audio, making it easier to select the parts they wish to cut. Libraries like wavesurfer.js can help in rendering this waveform representation.
4. Trimming Functionality: Users should be able to set the start and end points of the portion they want to extract from the MP3 file. The selection can be made using draggable markers or by inputting the time directly (in seconds).
5. Preview: After selecting a portion of the audio, users should be able to preview their selection before finalizing the cut.
6. Download the Cut Audio: Once the desired portion is selected, the tool will allow the user to download the trimmed MP3 file. The process will involve using the Web Audio API to slice the audio file and create a downloadable blob.
7. Responsive Design: The tool should be fully responsive and accessible on both desktop and mobile devices. Users should be able to access the same functionalities regardless of the device they are using.
8. No Server Required (Optional): For a lightweight solution, all audio file processing could be done on the client-side using JavaScript. However, for large files or additional features (like saving trimmed files to the cloud), a back-end could be implemented.
3. Detailed Project Description
a) Front-End Development
i) HTML Structure
HTML will form the basic skeleton of the web page. Some important elements to include are:
File Input Element: This allows users to upload their MP3 files. It will accept files with an .mp3 extension only to prevent other file formats from being uploaded.
<input type="file" id="audioFile" accept=".mp3">
Audio Player: To allow users to play and preview their MP3 files, we’ll use the native HTML5 <audio> tag, enhanced by JavaScript for further functionalities like trimming and visualization.
<audio id="audioPlayer" controls></audio>
Waveform Visualizer: We will use the wavesurfer.js library to create a visual representation of the audio file. This helps users visually determine which part of the audio they want to cut.
<div id="waveform"></div>
Trim Controls: To allow users to select the portion of the audio to cut, we’ll include draggable start and end markers, or an input for manually entering the start and end times.
<label for="startTime">Start Time (seconds):</label>
<input type="number" id="startTime">
<label for="endTime">End Time (seconds):</label>
<input type="number" id="endTime">
ii) CSS Styling
The CSS will focus on creating a clean, user-friendly interface with emphasis on the audio visualization and trim controls. Key CSS aspects include:
Responsive Design: Using media queries to ensure the layout adjusts properly on mobile and desktop screens.
@media screen and (max-width: 768px) {
#audioPlayer, #waveform {
width: 100%;
}
}
Visual Feedback: Styling for buttons, waveforms, and controls so that users have a clear understanding of how to interact with the application.
#audioPlayer {
margin-top: 20px;
}
#waveform {
height: 100px;
background-color: #f5f5f5;
}
b) JavaScript Functionality
The bulk of the tool’s logic will be handled using JavaScript. Here are the key components:
i) File Handling
Once a user uploads an MP3 file, JavaScript will handle loading the file and preparing it for manipulation.
document.getElementById('audioFile').addEventListener('change', function() {
const file = this.files[0];
const url = URL.createObjectURL(file);
document.getElementById('audioPlayer').src = url;
loadWaveform(file);
});
ii) Waveform Visualization
To provide a visual representation of the audio file, we can use the wavesurfer.js library. This allows users to select portions of the audio by interacting with the waveform.
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'blue',
progressColor: 'purple'
});
function loadWaveform(file) {
const reader = new FileReader();
reader.onload = function(event) {
const audioData = event.target.result;
wavesurfer.loadBlob(file);
};
reader.readAsArrayBuffer(file);
}
iii) Trimming the Audio
When a user selects a start and end time, JavaScript will use the Web Audio API to slice the audio file. The user can then download the trimmed portion.
function trimAudio(startTime, endTime) {
const originalAudio = wavesurfer.backend.buffer;
const trimmedAudio = originalAudio.slice(startTime * originalAudio.sampleRate, endTime * originalAudio.sampleRate);
// Convert trimmed audio to a blob for download
const blob = new Blob([trimmedAudio], { type: 'audio/mp3' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'trimmed-audio.mp3';
link.click();
}
c) Back-End Development (Optional)
If you choose to implement a back-end, this can be done using Node.js and Express. The back-end would handle file uploads, process the audio, and return the trimmed file. However, for a lightweight and scalable solution, you could integrate cloud services like AWS Lambda for serverless execution, and S3 for storage.
4. Testing and Debugging
Testing will involve ensuring that:
1. File Upload Works: Users can upload files and handle various edge cases like large files or invalid formats.
2. Audio Plays Back Smoothly: The tool should allow seamless playback and manipulation of the audio file.
3. Trimming is Accurate: The selected portion should match the audio output, and the downloaded file should be of high quality.
