Select Text read_text.html
novel_balacoon.html
<!-- balacoon.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Audio and Video Combiner</title>
<link
rel="stylesheet"
href="{{ url_for('static', filename='css/dark.css') }}"
/>
<style>
.media-container {
display: flex;
flex-wrap: wrap;
margin: 20px 0; /* Spacing above and below the section */
}
.media-item {
margin: 10px; /* Spacing between items */
padding: 10px;
border: 1px solid #ccc; /* Optional: for visibility */
border-radius: 8px; /* Optional: rounded corners */
width: calc(30% - 20px); /* Adjust for responsive layout */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Optional: adds shadow effect */
text-align: center; /* Centering text */
}
.mediaitem {
margin: 10px; /* Spacing between items */
padding: 10px;
border: 1px solid #ccc; /* Optional: for visibility */
border-radius: 8px; /* Optional: rounded corners */
width: calc(20% - 20px); /* Adjust for responsive layout */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Optional: adds shadow effect */
text-align: center; /* Centering text */
}
button {
padding: 10px 15px; /* Consistent padding */
font-size: 1.6vw; /* Better sizing */
cursor: pointer;
margin-bottom: 5px; /* Space below button */
}
.audio-label {
display: block; /* Set to block for better spacing */
margin-top: 5px; /* Add some space above the label */
color: orange; /* Add color */
word-wrap: break-word; /* Wrap text if too long */
}
video {
width: 250px;
height: auto;
}
.ltblue {
background-color: lightblue;
}
.ltgreen {
background-color: lightgreen;
}
</style>
</head>
<body>
<a href="/balacoon"><button>Refresh</button></a><br />
<a href="/"><button>Home</button></a>
<h1>Audio and Video Combiner / novel_balacoon.html</h1>
<p>The green numbers *6671 below represent different speakers.</p>
<div class="media-container">
<div class="mediaitem">
<button onclick="document.getElementById('Play_11614').play()">
Play 11614:
</button>
<audio id="Play_11614" controls>
<source
src="{{ url_for('static', filename='novel_audio_mp3/samples/11614.mp3') }}"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
</div>
<div class="mediaitem">
<button onclick="document.getElementById('Play_11697').play()">
Play 11697:
</button>
<audio id="Play_11697" controls>
<source
src="{{ url_for('static', filename='novel_audio_mp3/samples/11697.mp3') }}"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
</div>
<div class="mediaitem">
<button onclick="document.getElementById('Play_12787').play()">
Play 12787:
</button>
<audio id="Play_12787" controls>
<source
src="{{ url_for('static', filename='novel_audio_mp3/samples/12787.mp3') }}"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
</div>
<div class="mediaitem">
<button class="ltgreen" onclick="document.getElementById('Play_6097').play()">
Play 6097:
</button>
<audio id="Play_6097" controls>
<source
src="{{ url_for('static', filename='novel_audio_mp3/samples/6097.mp3') }}"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
</div>
<div class="mediaitem">
<button onclick="document.getElementById('Play_6670').play()">
Play 6670:
</button>
<audio id="Play_6670" controls>
<source
src="{{ url_for('static', filename='novel_audio_mp3/samples/6670.mp3') }}"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
</div>
<div class="mediaitem">
<button onclick="document.getElementById('Play_6671').play()">
Play 6671:
</button>
<audio id="Play_6671" controls>
<source
src="{{ url_for('static', filename='novel_audio_mp3/samples/6671.mp3') }}"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
</div>
<div class="mediaitem">
<button onclick="document.getElementById('Play_8051').play()">
Play 8051:
</button>
<audio id="Play_8051" controls>
<source
src="{{ url_for('static', filename='novel_audio_mp3/samples/8051.mp3') }}"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
</div>
<div class="mediaitem">
<button onclick="document.getElementById('Play_9017').play()">
Play 9017:
</button>
<audio id="Play_9017" controls>
<source
src="{{ url_for('static', filename='novel_audio_mp3/samples/9017.mp3') }}"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
</div>
<div class="mediaitem">
<button onclick="document.getElementById('Play_9136').play()">
Play 9136:
</button>
<audio id="Play_9136" controls>
<source
src="{{ url_for('static', filename='novel_audio_mp3/samples/9136.mp3') }}"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
</div>
<div class="mediaitem">
<button onclick="document.getElementById('Play_92').play()">
Play 92:
</button>
<audio id="Play_92" controls>
<source
src="{{ url_for('static', filename='novel_audio_mp3/samples/92.mp3') }}"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
</div>
<div>
<form method="post">
{% for spwaker in supported_speakers %}
<input
type="radio"
name="bal_speaker"
id="{{ spwaker }}"
value="{{ spwaker }}"
required
/>
<span>{{ spwaker }} </span>
{% endfor %}
<textarea
name="text"
rows="10"
cols="50"
placeholder="Enter your text here..."
required
></textarea
><br /><br />
<input type="submit" value="Convert to MP3" />
<a href="{{ url_for('balacoon_download_file', filename=file) }}"
>Download</a
>
</form>
<hr />
</div>
<form id="video-audio-form" action="/add_sound_to_image" method="post">
<label>Select jpg from static/archived-store/:</label><br />
<div class="media-container">
{% for image in image_files %}
<div class="media-item">
<input
type="radio"
name="image_path"
id="{{ image }}"
value="{{ image }}"
onclick="previewImage('{{ image }}')"
required
/>
<label for="{{ image }}">
<img
src="{{ image }}"
class="image-preview"
alt="{{ image }}"
style="max-width: 100%; height: auto"
/>
<!-- remove the first 22 characters of the {{image}} -->
<!-- remove the last 4 characters of the {{image}} -->
{{ image[22:-4] }}
</label>
</div>
{% endfor %}
</div>
<img id="image-preview" alt="Image Preview" /><br /><br />
<h2>Generated Audio Files:</h2>
<label>Select Mp3 Title from static/output:</label><br />
<div class="media-container">
{% if audio_files %} {% for audio in audio_files %}
<div class="media-item">
<button type="button" onclick="playAudio('{{ loop.index }}')">
Preview
</button>
<audio id="audio_{{ loop.index }}" style="display: none">
<source src="{{ audio }}" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<input
type="radio"
name="audio_path"
value="{{ audio }}"
required
/>
<span class="audio-label">{{ audio[14:-4] }}</span>
</div>
{% endfor %} {% endif %}
</div>
<button type="button" id="create-video">Create Video</button>
</form>
<h2>Output Video</h2>
<div id="output-video-section"></div>
<script>
document
.getElementById("create-video")
.addEventListener("click", function () {
const form = document.getElementById("video-audio-form");
const formData = new FormData(form);
const imageSelected = formData.get("image_path");
const audioSelected = formData.get("audio_path");
if (!imageSelected || !audioSelected) {
alert("Please select both an image and audio before proceeding.");
return;
}
fetch("/combine_novel", {
method: "POST",
body: formData,
})
.then((response) => response.json())
.then((data) => {
if (data.success) {
document.getElementById("output-video-section").innerHTML =
`
<h3>Combined Video:</h3>
<video controls>
<source src="${data.output_video}" type="video/mp4">
Your browser does not support the video tag.
</video>
`;
} else {
alert(data.error);
}
})
.catch((error) => console.error("Error:", error));
});
function playAudio(audioId) {
const audioElement = document.getElementById(`audio_${audioId}`);
const audios = document.querySelectorAll("audio");
// Pause and hide any currently playing audio
audios.forEach((audio) => {
if (!audio.paused) {
audio.pause();
audio.currentTime = 0;
audio.style.display = "none"; // Hide after stopping
}
});
// Show and play the selected audio
audioElement.style.display = "block"; // Show the audio element
audioElement.play();
}
</script>
</div>
</body>
</html>
Back to file list