Video to Audio Converter body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); max-width: 500px; width: 100%; text-align: center; } h1 { color: #333; } .file-upload { margin: 20px 0; position: relative; border: 2px dashed #007bff; border-radius: 5px; display: flex; justify-content: center; align-items: center; padding: 20px; cursor: pointer; } .file-upload input[type="file"] { position: absolute; width: 100%; height: 100%; cursor: pointer; opacity: 0; } .file-upload i { color: #007bff; font-size: 2rem; } .file-upload span { display: block; margin-top: 10px; } #convertButton { background-color: #007bff; color: white; border: none; padding: 10px 30px; border-radius: 5px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease; } #convertButton:hover { background-color: #0056b3; } #downloadLink { display: none; margin-top: 20px; font-size: 1rem; background-color: #28a745; color: white; padding: 10px 30px; text-decoration: none; border-radius: 5px; transition: background-color 0.3s ease; } #downloadLink:hover { background-color: #218838; } .progress-bar { width: 100%; background-color: #e0e0e0; border-radius: 5px; margin-top: 20px; display: none; } .progress { height: 20px; background-color: #007bff; border-radius: 5px; width: 0%; } Video to Audio Converter Click or drop a video file here Convert function convertVideoToAudio() { var videoFile = document.getElementById('videoFile').files[0]; if (videoFile) { var reader = new FileReader(); reader.onload = function (event) { var videoData = event.target.result; var videoBlob = new Blob([videoData], { type: videoFile.type }); var videoUrl = URL.createObjectURL(videoBlob); var video = document.createElement('video'); video.src = videoUrl; video.onloadedmetadata = function () { var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var mediaSource = audioCtx.createMediaElementSource(video); var audioDestination = audioCtx.createMediaStreamDestination(); mediaSource.connect(audioDestination); var audioStream = audioDestination.stream; var mediaRecorder = new MediaRecorder(audioStream); var audioChunks = []; mediaRecorder.ondataavailable = function (event) { audioChunks.push(event.data); updateProgress(event); }; mediaRecorder.onstop = function () { var audioBlob = new Blob(audioChunks, { type: 'audio/wav' }); var audioUrl = URL.createObjectURL(audioBlob); var downloadLink = document.getElementById('downloadLink'); downloadLink.href = audioUrl; downloadLink.download = 'audio.wav'; downloadLink.innerHTML = 'Download Audio'; downloadLink.style.display = 'block'; // Hide progress bar document.getElementById('progressBar').style.display = 'none'; document.getElementById('progress').style.width = '0%'; }; mediaRecorder.start(); video.play(); // Show progress bar document.getElementById('progressBar').style.display = 'block'; video.onended = function () { mediaRecorder.stop(); }; }; video.style.display = 'none'; document.body.appendChild(video); }; reader.readAsArrayBuffer(videoFile); } } function updateProgress(event) { // Dummy progress update logic, you might need to adapt this var progress = document.getElementById('progress'); var percentage = Math.min((event.loaded / event.total) * 100, 100); progress.style.width = percentage + '%'; } document.getElementById('convertButton').addEventListener('click', convertVideoToAudio);
