MP4 TO MP3
<?php
/*
* Template Name: Video to Audio Converter Template
*/
get_header();
?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div id="conversion-container">
<h2 class="conversion-title">Video to Audio Converter</h2>
<p class="conversion-description">Select a video file in MP4 format to convert it to MP3 audio.</p>
<form id="video-converter-form" enctype="multipart/form-data">
<div class="form-group">
<label for="video_file" class="file-label">Select a video file:</label>
<input type="file" name="video_file" id="video_file" accept=".mp4" class="file-input">
<span class="file-types">Supported format: MP4</span>
</div>
<div class="button-container">
<button type="button" onclick="convertVideo()" class="convert-button">Convert</button>
<button type="button" onclick="resetForm()" class="reset-button">Reset</button>
</div>
</form>
<div id="conversion-loader" style="display: none;">
<div class="loader"></div>
<p class="conversion-message">Converting...</p>
</div>
<div id="conversion-result"></div>
<div id="download-button"></div>
<div id="conversion-messages"></div>
</div>
</main>
</div>
<style>
/* CSS styles for the converter */
#conversion-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
.conversion-title {
font-size: 24px;
margin-bottom: 10px;
}
.conversion-description {
font-size: 16px;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
.file-label {
display: block;
font-size: 16px;
margin-bottom: 5px;
text-align: left;
}
.file-input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
width: 100%;
}
.file-types {
font-size: 14px;
color: #666;
margin-top: 5px;
display: block;
text-align: left;
}
.button-container {
text-align: center;
margin-top: 20px;
}
.convert-button,
.reset-button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-right: 10px;
}
.convert-button:hover,
.reset-button:hover {
background-color: #45a049;
}
.conversion-loader {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.loader {
display: inline-block;
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.conversion-message {
font-size: 16px;
margin-top: 10px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#conversion-result {
margin-top: 20px;
text-align: center;
}
.conversion-result img {
max-width: 100%;
}
#download-button {
margin-top: 20px;
text-align: center;
}
.download-link {
margin-top: 10px;
display: inline-block;
padding: 8px 16px;
font-size: 16px;
background-color: #337ab7;
color: #fff;
text-decoration: none;
border-radius: 3px;
transition: background-color 0.3s ease;
}
.download-link:hover {
background-color: #286090;
}
#conversion-messages {
margin-top: 20px;
text-align: center;
}
.error-message {
color: red;
font-weight: bold;
margin-bottom: 10px;
}
.success-message {
color: green;
font-weight: bold;
margin-bottom: 10px;
}
</style>
<script>
// JavaScript code for the converter
function convertVideo() {
var inputFile = document.getElementById('video_file');
// Check if a file is selected
if (inputFile.files.length > 0) {
var file = inputFile.files[0];
// Show loading indicator
document.getElementById('conversion-loader').style.display = 'block';
// Create a new FileReader
var reader = new FileReader();
reader.onload = function(e) {
var audio = document.createElement('audio');
audio.controls = true;
audio.src = URL.createObjectURL(file);
// Hide the loading indicator
document.getElementById('conversion-loader').style.display = 'none';
// Display the converted audio
document.getElementById('conversion-result').innerHTML = '';
document.getElementById('conversion-result').appendChild(audio);
// Create a download link for the converted audio
var downloadLink = document.createElement('a');
downloadLink.href = audio.src;
downloadLink.download = 'converted_audio.mp3';
downloadLink.className = 'download-link';
downloadLink.innerHTML = 'Download';
// Add the download link to the page
document.getElementById('download-button').innerHTML = '';
document.getElementById('download-button').appendChild(downloadLink);
// Display conversion success message
var messagesContainer = document.getElementById('conversion-messages');
messagesContainer.innerHTML = '<p class="success-message">Conversion successful!</p>';
};
reader.readAsDataURL(file);
} else {
// Show error message if no file is selected
var messagesContainer = document.getElementById('conversion-messages');
messagesContainer.innerHTML = '<p class="error-message">Please select a video file.</p>';
}
}
function resetForm() {
document.getElementById('video-converter-form').reset();
document.getElementById('conversion-result').innerHTML = '';
document.getElementById('download-button').innerHTML = '';
document.getElementById('conversion-messages').innerHTML = '';
}
</script>
<?php get_footer(); ?>
Post a Comment