Select Text read_text.html

sound_to_video.html

<!-- sound_to_video.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sound to Video</title>
    <link rel="stylesheet" href="/static/css/dark.css">

</head>
<body>
    <h1>Add Sound to Video / sound_to_video.html</h1>
    <a href="/"><button>Home</button></a>

    <form id="video-audio-form" action="/add_audio" method="POST">
        <h2>Select a Video</h2>
        <div class="media-container">
            {% for video in video_files %}
                <div class="media-item">
                    <label>
                        <input type="radio" name="video" value="{{ video }}">
                        <video controls>
                            <source src="/static/temp_exp/{{ video }}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                        <span class="media-label">{{ video[:-4] }}</span>
                    </label>
                </div>
            {% endfor %}
        </div>

        <h2>Preview and Select an Audio</h2>
        <div class="media-container">
            {% for audio in audio_files %}
                <div class="media-item">
                    <label>
                        <!-- Preview Button for MP3 -->
                        <button type="button" onclick="playAudio('{{ audio }}')">Preview</button>
                        <audio id="audio_{{ audio }}" controls style="display: none;">
                            <source src="/static/audio_mp3/{{ audio }}" type="audio/mpeg">
                            Your browser does not support the audio element.
                        </audio>
                        <br>
                        <input type="radio" name="audio" value="{{ audio }}">{{ audio }}
                    </label>
                </div>
            {% endfor %}
        </div>

        <!-- Create Video button -->
        <button type="button" id="create-video">Create Video</button>
    </form>

    <h2>Output Video</h2>
    <div id="output-video-section"></div>

    <script>
        // Function to play the selected MP3
        function playAudio(audioFile) {
            const audioElement = document.getElementById(`audio_${audioFile}`);
            
            // Stop any other audio that's currently playing
            const audios = document.querySelectorAll('audio');
            audios.forEach(audio => {
                if (!audio.paused) {
                    audio.pause();
                    audio.currentTime = 0; // Reset to the start
                }
            });

            // Play the selected audio
            audioElement.style.display = 'block'; // Show the hidden audio control
            audioElement.play();
        }

        document.getElementById('create-video').addEventListener('click', function() {
            const form = document.getElementById('video-audio-form');
            const videoSelected = form.querySelector('input[name="video"]:checked');
            const audioSelected = form.querySelector('input[name="audio"]:checked');

            // Check if both video and audio are selected
            if (!videoSelected || !audioSelected) {
                alert("Please select both a video and an audio file.");
                return;
            }

            // Popup confirmation: Continue or Cancel
            const userConfirmed = confirm("Video and audio selected. Do you want to continue?");
            if (!userConfirmed) {
                return;  // User chose 'Cancel', stop the process
            }

            // Prepare form data manually to ensure video and audio are sent properly
            const formData = new FormData();
            formData.append('video', videoSelected.value);
            formData.append('audio', audioSelected.value);

            // Perform fetch request
            fetch('/combine', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('output-video-section').innerHTML = `
                        <h3>Combined Video:</h3>
                        <video width="200" controls>
                            <source src="/static/output_videos/${data.output_video}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    `;
                } else {
                    alert(data.error);
                }
            })
            .catch(error => {
                alert('Error occurred during video processing.');
                console.error('Error:', error);
            });
        });
    </script>
</body>
</html>
Back to file list