Video to Audio Converter
/* General Styling */
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #ff7e5f, #feb47b);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 100%;
max-width: 600px;
}
h1 {
color: #2c3e50;
font-size: 2em;
margin-bottom: 20px;
}
.tool-box {
margin-bottom: 20px;
}
#video-input {
font-size: 1.1em;
margin: 10px 0;
}
#convert-btn {
background-color: #2ecc71;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 1em;
border-radius: 5px;
transition: background-color 0.3s;
}
#convert-btn:hover {
background-color: #27ae60;
}
.output-box {
display: none;
margin-top: 20px;
}
#progress-bar {
display: none;
margin-top: 20px;
width: 100%;
height: 5px;
background-color: #ccc;
}
#progress-bar div {
height: 100%;
background-color: #2ecc71;
width: 0;
}
a {
display: inline-block;
margin-top: 15px;
background-color: #3498db;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
a:hover {
background-color: #2980b9;
}
@media (max-width: 600px) {
.container {
padding: 20px;
}
h1 {
font-size: 1.5em;
}
}
// Initialize FFmpeg.wasm
const { createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
const videoInput = document.getElementById('video-input');
const convertButton = document.getElementById('convert-btn');
const audioOutput = document.getElementById('audio-output');
const downloadLink = document.getElementById('download-link');
const progressBar = document.getElementById('progress-bar');
async function loadFFmpeg() {
await ffmpeg.load();
console.log("FFmpeg Loaded Successfully");
}
async function convertVideoToAudio() {
if (!videoInput.files.length) {
alert("Please select a video file to convert.");
return;
}
const videoFile = videoInput.files[0];
const videoName = videoFile.name;
// Display the progress bar
progressBar.style.display = 'block';
const progressDiv = document.createElement('div');
progressBar.appendChild(progressDiv);
// Show the loading status
progressDiv.style.width = '0%';
// Write the video file to FFmpeg's virtual file system
ffmpeg.FS('writeFile', videoName, await fetchFile(videoFile));
// Convert video to audio (MP3 format)
ffmpeg.setProgress(({ ratio }) => {
progressDiv.style.width = `${Math.round(ratio * 100)}%`;
});
await ffmpeg.run('-i', videoName, 'output.mp3');
// Read the converted audio file
const audioData = ffmpeg.FS('readFile', 'output.mp3');
// Create an audio URL for the converted audio
const audioBlob = new Blob([audioData.buffer], { type: 'audio/mp3' });
const audioUrl = URL.createObjectURL(audioBlob);
// Display the audio player and download link
audioOutput.src = audioUrl;
downloadLink.href = audioUrl;
downloadLink.style.display = 'inline-block';
// Hide progress bar after conversion
progressBar.style.display = 'none';
progressDiv.style.width = '100%';
}
// Event listener for the convert button
convertButton.addEventListener('click', async () => {
convertButton.disabled = true;
await convertVideoToAudio();
convertButton.disabled = false;
});
// Initialize FFmpeg on page load
loadFFmpeg();
