<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video to Audio Converter</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/
all.min.css">
<style>
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%;
</style>
</head>
<body>
<div class="container">
<h1>Video to Audio Converter</h1>
<div class="file-upload">
<i class="fas fa-upload"></i>
<span>Click or drop a video file here</span>
<input type="file" id="videoFile" accept="video/*">
</div>
<button id="convertButton">Convert</button>
<div class="progress-bar" id="progressBar">
<div class="progress" id="progress"></div>
</div>
<a id="downloadLink"></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
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);
</script>
</body>
</html>
