Text

<p class="large" style="text-align:center">Obiettivo Pontida APS per questo natale vuore regalarvi la possibilità di fare ai vostri figli, amici o familiari degli auguri personalizzati da parte di babbo natale.</p>

Embed

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LA VOCE DI BABBO NATALE (TTS)</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: #1a1a1a;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .card-background {
            /* Gradiente profondo dal rosso scuro al rosso vivo */
            background: linear-gradient(180deg, #8B0000 0%, #CC0000 70%, #8B0000 100%);
        }

        /* Colore festoso per il pulsante Genera Voce (Verde Natale) */
        .festive-button { 
            background-color: #008000; /* Verde più luminoso */
            box-shadow: 0 4px #004d00; /* Ombra verde scuro */
            transition: all 0.1s;
        }
        .festive-button:hover { 
            background-color: #006600; /* Verde leggermente più scuro all'hover */
            box-shadow: 0 2px #003300;
            transform: translateY(2px);
        }
        
        audio {
            width: 100%;
            border: 2px solid #fff;
            border-radius: 8px;
            padding: 5px;
            background-color: #f0f0f0;
        }
        
        .download-button {
            background-color: #006633; /* Verde Natale */
            transition: background-color 0.2s;
        }
        .download-button:hover {
            background-color: #004d26;
        }

        /* Animazione Neve */
        .snow-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1; 
            overflow: hidden;
            border-radius: 0.75rem;
        }

        .snowflake {
            position: absolute;
            background: #fff;
            border-radius: 50%;
            opacity: 0.8;
            animation: fall linear infinite;
        }

        @keyframes fall {
            from { top: -5%; }
            to { top: 105%; }
        }
        
        @media (max-width: 640px) {
            .flex-col-sm {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    
    <div class="w-full max-w-lg p-6 md:p-10 card-background rounded-xl shadow-2xl border-t-8 border-white relative z-10 overflow-hidden text-white">
        
        <div id="snow-container" class="snow-container"></div>

        <div class="relative z-20"> 

            <div class="absolute -top-12 left-1/2 transform -translate-x-1/2 text-5xl">
                <span class="text-green-600">🎄</span>
                <span class="text-yellow-500">🌟</span>
                <span class="text-green-600">🎄</span>
            </div>

            <div class="text-center mb-6 pt-4">
                <div class="text-6xl mb-2 animate-bounce">🎅</div> 
                <h1 class="text-3xl font-extrabold text-white">DAI VOCE A BABBO NATALE </h1>
                <p class="text-sm text-gray-200">Scrivi il tuo messaggio e ascolta la magia!</p>
            </div>

            <div class="space-y-3">
                <textarea id="text-input"
                          class="w-full p-4 border-2 border-white rounded-lg focus:ring-green-300 focus:border-green-300 transition duration-150 ease-in-out resize-none shadow-inner text-gray-800"
                          rows="5"
                          placeholder="Esempio: Oh, oh, oh! Buon Natale a tutti i bambini buoni del mondo!"></textarea>

                <div class="flex flex-col sm:flex-row gap-3">
                    <button id="generate-button" onclick="generateSantaVoice()"
                            class="w-full sm:w-2/3 py-3 px-4 rounded-lg text-white font-bold text-lg shadow-md transition duration-200 focus:outline-none focus:ring-4 focus:ring-white festive-button"
                            aria-label="Genera l'audio con la voce di Babbo Natale">
                        Genera Voce
                    </button>
                    <button id="reset-button" onclick="resetGenerator()"
                            class="w-full sm:w-1/3 py-3 px-4 rounded-lg text-white font-bold text-lg shadow-md transition duration-200 bg-gray-700 hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300"
                            aria-label="Azzera il testo e l'audio">
                        Reset
                    </button>
                </div>
            </div>

            <div id="audio-controls" class="mt-8 text-center min-h-10 space-y-3">
                </div>
            <p id="status-message" class="text-gray-200 text-sm mt-2 text-center font-semibold">Il tuo audio apparirà qui.</p>
            
        </div>
    </div>

    <script>
        // La chiave API è stata inserita su richiesta dell'utente.
        const apiKey = "AIzaSyA5NCZUa8lffLuGwl1PVWR2NgxhnxL8hc0"; 
        
        const API_URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-tts:generateContent";
        const maxRetries = 5;
        // Frequenza di campionamento target per l'output WAV
        const TARGET_SAMPLE_RATE = 8000; 

        // Converte Base64 in ArrayBuffer
        function base64ToArrayBuffer(base64) {
            const binaryString = atob(base64);
            const len = binaryString.length;
            const bytes = new Uint8Array(len);
            for (let i = 0; i < len; i++) {
                bytes[i] = binaryString.charCodeAt(i);
            }
            return bytes.buffer;
        }

        /**
         * Esegue il downsampling sui dati audio PCM (Signed 16-bit).
         * @param {Int16Array} inputPCM Dati audio PCM 16-bit firmati.
         * @param {number} inputRate Frequenza di campionamento in ingresso (dall'API).
         * @param {number} outputRate Frequenza di campionamento desiderata.
         * @returns {Int16Array} Dati PCM ricampionati.
         */
        function downsamplePCM(inputPCM, inputRate, outputRate) {
            if (inputRate <= outputRate) {
                return inputPCM;
            }
            const ratio = inputRate / outputRate;
            const outputLength = Math.floor(inputPCM.length / ratio);
            const outputPCM = new Int16Array(outputLength);

            for (let i = 0; i < outputLength; i++) {
                // Campionamento semplice Nearest Neighbor
                const inputIndex = Math.floor(i * ratio);
                outputPCM[i] = inputPCM[inputIndex];
            }
            return outputPCM;
        }


        /**
         * Converte i dati PCM (Signed 16-bit) in un Blob WAV riproducibile.
         * @param {Int16Array} pcm16 Dati audio PCM 16-bit firmati.
         * @param {number} sampleRate La frequenza di campionamento target per il contenitore WAV.
         * @returns {Blob} Un Blob contenente il file audio WAV.
         */
        function pcmToWav(pcm16, sampleRate) {
            const numChannels = 1;
            const bytesPerSample = 2; // PCM a 16 bit
            const dataLength = pcm16.length * bytesPerSample;

            const buffer = new ArrayBuffer(44 + dataLength);
            const view = new DataView(buffer);

            // Scrive dati stringa nel DataView
            function writeString(view, offset, string) {
                for (let i = 0; i < string.length; i++) {
                    view.setUint8(offset + i, string.charCodeAt(i));
                }
            }

            // RIFF chunk descriptor
            writeString(view, 0, 'RIFF'); // ChunkID
            view.setUint32(4, 36 + dataLength, true); // ChunkSize
            writeString(view, 8, 'WAVE'); // Format

            // fmt sub-chunk
            writeString(view, 12, 'fmt '); // Subchunk1ID
            view.setUint32(16, 16, true); // Subchunk1Size (16 for PCM)
            view.setUint16(20, 1, true); // AudioFormat (1 for PCM)
            view.setUint16(22, numChannels, true); // NumChannels
            view.setUint32(24, sampleRate, true); // SampleRate (Target Rate)
            view.setUint32(28, sampleRate * numChannels * bytesPerSample, true); // ByteRate
            view.setUint16(32, numChannels * bytesPerSample, true); // BlockAlign
            view.setUint16(34, 16, true); // BitsPerSample (16-bit)

            // data sub-chunk
            writeString(view, 36, 'data'); // Subchunk2ID
            view.setUint32(40, dataLength, true); // Subchunk2Size

            // Scrive i dati PCM
            let offset = 44;
            for (let i = 0; i < pcm16.length; i++) {
                view.setInt16(offset, pcm16[i], true); // setInt16 scrive il valore PCM firmato
                offset += 2;
            }

            return new Blob([buffer], { type: 'audio/wav' });
        }

        /**
         * Resetta il campo di testo, il messaggio di stato e l'output audio.
         */
        function resetGenerator() {
            const textInput = document.getElementById('text-input');
            const statusMessage = document.getElementById('status-message');
            const audioControls = document.getElementById('audio-controls');
            const generateButton = document.getElementById('generate-button');
            
            // Messaggio di esempio aggiornato in italiano
            if (textInput) textInput.value = 'Oh, oh, oh! Buon Natale a tutti i bambini buoni del mondo!'; 
            if (statusMessage) statusMessage.textContent = `Il tuo audio apparirà qui.`;
            if (audioControls) audioControls.innerHTML = '';
            if (generateButton) generateButton.disabled = false;
        }


        /**
         * Genera l'audio TTS utilizzando una voce tipo Babbo Natale.
         */
        async function generateSantaVoice() {
            const textInput = document.getElementById('text-input');
            const statusMessage = document.getElementById('status-message');
            const audioControls = document.getElementById('audio-controls');
            const button = document.getElementById('generate-button');
            
            if (!textInput || !statusMessage || !audioControls || !button) return;
            
            const userText = textInput.value.trim();

            if (!userText) {
                statusMessage.textContent = "Per favor, inserisci un testo nel campo sopra!";
                return;
            }

            // Istruzione per un tono caldo, profondo e allegro (tipo Babbo Natale)
            const fullPrompt = `Parlando in modo scorrevole e pacato, con tono molto caldo, grave e profondo, e allegro, come se fossi Babbo Natale, di': "${userText}"`;

            statusMessage.textContent = "Generazione della voce in corso... (1/3)";
            button.disabled = true;
            audioControls.innerHTML = '';
            button.classList.add('opacity-50', 'cursor-not-allowed');


            const payload = {
                contents: [{
                    parts: [{ text: fullPrompt }]
                }],
                generationConfig: {
                    responseModalities: ["AUDIO"],
                    speechConfig: {
                        voiceConfig: {
                            prebuiltVoiceConfig: { voiceName: "Orus" } // Voce profonda adatta
                        },
                        languageCode: "it-IT" 
                    }
                },
                model: "gemini-2.5-flash-preview-tts"
            };

            for (let attempt = 0; attempt < maxRetries; attempt++) {
                try {
                    // L'URL usa l'apiKey
                    const url = `${API_URL}?key=${apiKey}`; 
                    
                    const response = await fetch(url, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(payload)
                    });

                    // Legge il corpo della risposta come testo per un migliore debug
                    const responseText = await response.text(); 
                    let result;

                    if (!response.ok) {
                        console.error(`API Error HTTP Status: ${response.status}. Raw body: ${responseText}`);

                        let errorBody = {};
                        try {
                            if (responseText) {
                                errorBody = JSON.parse(responseText);
                            }
                        } catch (e) {
                            // Ignora l'errore di parsing
                        }
                        
                        // Genera un messaggio di errore robusto basato sul body
                        const errorMessage = errorBody.error?.message || `Errore HTTP ${response.status}. Controlla la console per i dettagli.`;
                        statusMessage.textContent = `ERRORE CRITICO: ${errorMessage.substring(0, 100)}...`;
                        
                        throw new Error(errorMessage);
                    }
                    
                    if (!responseText) {
                        throw new Error("Risposta API vuota inaspettata.");
                    }
                    
                    result = JSON.parse(responseText);
                    
                    const part = result?.candidates?.[0]?.content?.parts?.[0];
                    const audioData = part?.inlineData?.data;
                    const mimeType = part?.inlineData?.mimeType;

                    if (!audioData || !mimeType || !mimeType.startsWith("audio/L16")) {
                        throw new Error("Dati audio non validi o mancanti dalla risposta.");
                    }
                    
                    const rateMatch = mimeType.match(/rate=(\d+)/);
                    if (!rateMatch) throw new Error("Frequenza di campionamento non trovata nel mime type.");
                    const apiSampleRate = parseInt(rateMatch[1], 10);

                    statusMessage.textContent = "Downsampling e conversione audio... (2/3)";

                    // 1. Decodifica Base64 in ArrayBuffer e poi Int16Array
                    const pcmData = base64ToArrayBuffer(audioData);
                    const pcm16 = new Int16Array(pcmData);
                    
                    // 2. Ricampionamento
                    statusMessage.textContent = `Ricampionamento audio... (3/3)`; 
                    const downsampledPCM = downsamplePCM(pcm16, apiSampleRate, TARGET_SAMPLE_RATE);

                    // 3. Incapsula i dati PCM ricampionati in un blob WAV
                    const wavBlob = pcmToWav(downsampledPCM, TARGET_SAMPLE_RATE);
                    const audioUrl = URL.createObjectURL(wavBlob);

                    // 4. Crea l'elemento audio e il pulsante di download
                    const fileName = `Babbo_Natale_Messaggio_${new Date().toISOString().replace(/[:.]/g, '-')}.wav`;
                    
                    audioControls.innerHTML = `
                        <audio controls class="w-full">
                            <source src="${audioUrl}" type="audio/wav">
                            Il tuo browser non supporta la riproduzione audio.
                        </audio>
                        <a href="${audioUrl}" download="${fileName}"
                            class="w-full mt-3 inline-flex items-center justify-center py-3 px-4 rounded-lg text-white font-bold shadow-lg focus:outline-none focus:ring-4 focus:ring-green-300 download-button">
                            Scarica Audio (.wav)
                        </a>
                    `;
                    statusMessage.textContent = `Voce generata con successo! Premi play per ascoltare o scarica il file.`;
                    
                    button.disabled = false;
                    button.classList.remove('opacity-50', 'cursor-not-allowed');
                    return; 

                } catch (error) {
                    console.error("TTS attempt error:", error);
                    if (attempt < maxRetries - 1) {
                        const delay = Math.pow(2, attempt) * 1000;
                        await new Promise(resolve => setTimeout(resolve, delay));
                        statusMessage.textContent = `Tentativo fallito: ${error.message.substring(0, 50)}... Riprovo in ${delay / 1000}s... (Tentativo ${attempt + 2}/${maxRetries})`;
                    } else {
                        audioControls.innerHTML = '';
                        if (!statusMessage.textContent.startsWith("ERRORE:")) {
                            statusMessage.textContent = `Errore grave e irrecuperabile dopo ${maxRetries} tentativi. Controlla la console per i dettagli.`;
                        }
                        button.disabled = false;
                        button.classList.remove('opacity-50', 'cursor-not-allowed');
                        return;
                    }
                }
            }
        }

        // Funzione per creare e animare la neve
        function createSnowflake() {
            const snowContainer = document.getElementById('snow-container');
            if (!snowContainer) return;

            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake');

            const size = Math.random() * 3 + 2;
            snowflake.style.width = `${size}px`;
            snowflake.style.height = `${size}px`;

            // Posizione orizzontale casuale all'interno del contenitore
            snowflake.style.left = `${Math.random() * 100}%`;

            // Durata e ritardo casuali per la caduta
            const duration = Math.random() * 10 + 5; 
            const delay = Math.random() * 5; 
            
            snowflake.style.animationDuration = `${duration}s`;
            snowflake.style.animationDelay = `${delay}s`;
            
            snowContainer.appendChild(snowflake);

            // Rimuovi il fiocco di neve e ricrea per un ciclo infinito
            setTimeout(() => {
                snowflake.remove();
                createSnowflake(); 
            }, duration * 1000); 
        }

        // Avvia la generazione della neve e imposta il testo predefinito
        window.onload = function () {
            const statusMessage = document.getElementById('status-message');
            if (statusMessage) {
                statusMessage.textContent = `Il tuo audio apparirà qui.`;
            }
            
            // Imposta il testo di default
            const textInput = document.getElementById('text-input');
            if (textInput) {
                textInput.value = 'Oh, oh, oh! Buon Natale a tutti i bambini buoni del mondo!';
            }

            for (let i = 0; i < 150; i++) {
                createSnowflake();
            }
        };

    </script>

</body>
</html>

<p style="text-align:center"><strong>per avere un risultato migliore sulla pronuncia, consiglio di giocare con la punteggiatura!  </strong></p>
<p style="text-align:center"><strong>In caso di errore significa che il server è sovraccarico per le troppe richieste, riprovare più tardi, Grazie</strong></p>
<p style="text-align:center"><strong>Se il problema persiste, scrivete il testo alla nostra email e vi invieremo l'audio al più presto.</strong></p>

obiettivo pontida

Event Planning

PT Serif

Rufina

<p>Questo sito usa dei <a href="https://obiettivopontida.com/cookie-policy" target="_blank" rel="noopener">cookies</a> </p>