feat: Geração de música cantada com melodia e instrumentos pelo MiniMax music-2.0 e barra de progresso animada em roxo vibrante no player
This commit is contained in:
+38
-1
@@ -7591,7 +7591,20 @@ window.toggleCustomAudio = (btn) => {
|
||||
});
|
||||
}
|
||||
|
||||
// Equalizer / Waveform Animation quando toca
|
||||
// Formatação de Tempo (mm:ss)
|
||||
const formatAudioTime = (sec) => {
|
||||
if (!sec || isNaN(sec)) return '0:00';
|
||||
const m = Math.floor(sec / 60);
|
||||
const s = Math.floor(sec % 60);
|
||||
return `${m}:${s < 10 ? '0' : ''}${s}`;
|
||||
};
|
||||
|
||||
// Equalizer / Waveform & Barra de Progresso Roxo Vibrante
|
||||
const musicaCustomProgressContainer = document.getElementById('musicaCustomProgressContainer');
|
||||
const musicaCustomProgressBar = document.getElementById('musicaCustomProgressBar');
|
||||
const musicaCurrentTime = document.getElementById('musicaCurrentTime');
|
||||
const musicaDurationTime = document.getElementById('musicaDurationTime');
|
||||
|
||||
if (musicaAudioPlayer) {
|
||||
musicaAudioPlayer.addEventListener('play', () => {
|
||||
const bars = document.querySelectorAll('#musicaWaveformVisualizer .wave-bar');
|
||||
@@ -7601,6 +7614,30 @@ window.toggleCustomAudio = (btn) => {
|
||||
const bars = document.querySelectorAll('#musicaWaveformVisualizer .wave-bar');
|
||||
bars.forEach(b => b.classList.remove('wave-active'));
|
||||
});
|
||||
musicaAudioPlayer.addEventListener('timeupdate', () => {
|
||||
const cur = musicaAudioPlayer.currentTime || 0;
|
||||
const dur = musicaAudioPlayer.duration || 0;
|
||||
if (musicaCurrentTime) musicaCurrentTime.textContent = formatAudioTime(cur);
|
||||
if (musicaDurationTime && dur) musicaDurationTime.textContent = formatAudioTime(dur);
|
||||
if (musicaCustomProgressBar && dur > 0) {
|
||||
const pct = Math.min(100, Math.max(0, (cur / dur) * 100));
|
||||
musicaCustomProgressBar.style.width = `${pct}%`;
|
||||
}
|
||||
});
|
||||
musicaAudioPlayer.addEventListener('loadedmetadata', () => {
|
||||
const dur = musicaAudioPlayer.duration || 0;
|
||||
if (musicaDurationTime) musicaDurationTime.textContent = formatAudioTime(dur);
|
||||
});
|
||||
|
||||
if (musicaCustomProgressContainer) {
|
||||
musicaCustomProgressContainer.addEventListener('click', (e) => {
|
||||
const rect = musicaCustomProgressContainer.getBoundingClientRect();
|
||||
const clickPos = (e.clientX - rect.left) / rect.width;
|
||||
if (musicaAudioPlayer.duration) {
|
||||
musicaAudioPlayer.currentTime = clickPos * musicaAudioPlayer.duration;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// --- GERAR MÚSICA (COMPOR 3 VERSÕES + ÁUDIO) ---
|
||||
|
||||
+22
-8
@@ -1138,20 +1138,34 @@
|
||||
</div>
|
||||
|
||||
<!-- Waveform / Equalizer Animado -->
|
||||
<div id="musicaWaveformVisualizer" style="display: flex; align-items: center; justify-content: center; gap: 3px; height: 32px; padding: 4px; background: rgba(0,0,0,0.15); border-radius: 6px;">
|
||||
<div id="musicaWaveformVisualizer" style="display: flex; align-items: center; justify-content: center; gap: 4px; height: 36px; padding: 6px 12px; background: rgba(0,0,0,0.3); border-radius: 8px; border: 1px solid rgba(168,85,247,0.25);">
|
||||
<div class="wave-bar" style="width: 4px; height: 30%; background: #a855f7; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 60%; background: #a855f7; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 90%; background: #a855f7; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 60%; background: #c084fc; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 90%; background: #e879f9; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 45%; background: #a855f7; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 75%; background: #a855f7; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 35%; background: #a855f7; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 75%; background: #c084fc; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 35%; background: #e879f9; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 85%; background: #a855f7; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 50%; background: #a855f7; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 95%; background: #a855f7; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 50%; background: #c084fc; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 95%; background: #e879f9; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 40%; background: #a855f7; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 70%; background: #c084fc; border-radius: 2px;"></div>
|
||||
<div class="wave-bar" style="width: 4px; height: 30%; background: #a855f7; border-radius: 2px;"></div>
|
||||
</div>
|
||||
|
||||
<audio id="musicaAudioPlayer" controls style="width: 100%; margin-top: 2px;"></audio>
|
||||
<!-- Barra de Progresso Roxo Vibrante Interativa -->
|
||||
<div id="musicaProgressBox" style="display: flex; flex-direction: column; gap: 6px; margin-top: 4px;">
|
||||
<div id="musicaCustomProgressContainer" style="position: relative; width: 100%; height: 10px; background: rgba(255,255,255,0.12); border-radius: 6px; cursor: pointer; overflow: hidden; border: 1px solid rgba(168,85,247,0.3); box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);">
|
||||
<div id="musicaCustomProgressBar" style="position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, #9333ea 0%, #a855f7 50%, #c084fc 100%); border-radius: 6px; box-shadow: 0 0 12px rgba(168,85,247,0.85); transition: width 0.1s linear;"></div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: #c084fc; font-weight: 600;">
|
||||
<span id="musicaCurrentTime">0:00</span>
|
||||
<span style="font-size: 0.7rem; color: var(--text-secondary);">🟣 Barra de Reprodução Musical</span>
|
||||
<span id="musicaDurationTime">0:00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<audio id="musicaAudioPlayer" controls style="width: 100%; margin-top: 2px; accent-color: #a855f7;"></audio>
|
||||
</div>
|
||||
|
||||
<!-- ABAS DAS 3 VERSÕES -->
|
||||
|
||||
+14
-3
@@ -4133,9 +4133,9 @@ code {
|
||||
}
|
||||
|
||||
@keyframes wave-pulse {
|
||||
0% { height: 20%; background-color: #a855f7; }
|
||||
50% { height: 95%; background-color: #ec4899; }
|
||||
100% { height: 40%; background-color: #3b82f6; }
|
||||
0% { height: 20%; background-color: #9333ea; box-shadow: 0 0 4px #9333ea; }
|
||||
50% { height: 95%; background-color: #c084fc; box-shadow: 0 0 10px #c084fc; }
|
||||
100% { height: 40%; background-color: #e879f9; box-shadow: 0 0 6px #e879f9; }
|
||||
}
|
||||
|
||||
@keyframes wave-pulse-poesia {
|
||||
@@ -4150,6 +4150,17 @@ code {
|
||||
100% { height: 40%; background-color: #059669; }
|
||||
}
|
||||
|
||||
#musicaAudioPlayer {
|
||||
accent-color: #a855f7 !important;
|
||||
outline: none;
|
||||
filter: contrast(1.15) saturate(1.4);
|
||||
}
|
||||
|
||||
#musicaCustomProgressContainer:hover #musicaCustomProgressBar {
|
||||
background: linear-gradient(90deg, #a855f7 0%, #c084fc 60%, #f472b6 100%) !important;
|
||||
box-shadow: 0 0 16px rgba(192, 132, 252, 1) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#musicaLeftPanel, #musicaRightPanel,
|
||||
#poesiaLeftPanel, #poesiaRightPanel,
|
||||
|
||||
Reference in New Issue
Block a user