| <!DOCTYPE html> |
| <html lang="fa" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Gemini Real-time TTS</title> |
| <style> |
| body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #f0f2f5; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } |
| .container { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 100%; max-width: 600px; } |
| h1 { text-align: center; color: #333; } |
| textarea { width: 100%; padding: 10px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; margin-bottom: 15px; box-sizing: border-box; resize: vertical; } |
| .button-container { display: flex; gap: 10px; } |
| button { flex-grow: 1; padding: 12px; font-size: 18px; border: none; border-radius: 5px; color: white; cursor: pointer; transition: background-color 0.2s; } |
| #speak-button { background-color: #007bff; } |
| #stop-button { background-color: #dc3545; } |
| button:disabled { background-color: #a0cfff; cursor: not-allowed; } |
| #stop-button:disabled { background-color: #f5c6cb; } |
| #status { margin-top: 15px; text-align: center; color: #555; font-style: italic; } |
| #audio-player-container { margin-top: 20px; } |
| audio { width: 100%; } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>🎙️ پخش صدای آنی Gemini</h1> |
| <textarea id="text-input" rows="4" placeholder="متن خود را اینجا وارد کنید..."></textarea> |
| <div class="button-container"> |
| <button id="speak-button">صحبت کن</button> |
| <button id="stop-button" disabled>توقف</button> |
| </div> |
| <div id="status">در حال اتصال به سرور...</div> |
| <div id="audio-player-container" style="display: none;"> |
| <p>پخش مجدد:</p> |
| <audio id="audio-player" controls></audio> |
| </div> |
| </div> |
|
|
| <script> |
| const textInput = document.getElementById('text-input'); |
| const speakButton = document.getElementById('speak-button'); |
| const stopButton = document.getElementById('stop-button'); |
| const statusDiv = document.getElementById('status'); |
| const audioPlayerContainer = document.getElementById('audio-player-container'); |
| const audioPlayer = document.getElementById('audio-player'); |
| |
| let audioContext; |
| let audioQueue = []; |
| let sourceNodes = []; |
| let isPlaying = false; |
| let isStopped = false; |
| let nextStartTime = 0; |
| let socket; |
| |
| function initializeAudio() { |
| if (!audioContext || audioContext.state === 'suspended') { |
| audioContext = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 24000 }); |
| } |
| nextStartTime = audioContext.currentTime; |
| } |
| |
| function getWebSocketURL() { |
| const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; |
| return `${protocol}//${window.location.host}/ws`; |
| } |
| |
| function connectWebSocket() { |
| const wsURL = getWebSocketURL(); |
| socket = new WebSocket(wsURL); |
| |
| socket.onopen = () => { |
| statusDiv.textContent = "آماده دریافت متن"; |
| speakButton.disabled = false; |
| }; |
| |
| socket.onmessage = async (event) => { |
| if (typeof event.data === 'string') { |
| const message = JSON.parse(event.data); |
| if (message.event === "STREAM_ENDED") { |
| handleStreamEnd(message.url); |
| } else if (message.event === "ERROR") { |
| statusDiv.textContent = `خطا: ${message.message}`; |
| resetUI(); |
| } |
| } else { |
| if (isStopped) return; |
| |
| const arrayBuffer = await event.data.arrayBuffer(); |
| const pcmData = new Int16Array(arrayBuffer); |
| |
| audioQueue.push(pcmData); |
| |
| if (!isPlaying) { |
| playFromQueue(); |
| } |
| } |
| }; |
| |
| socket.onclose = () => { |
| statusDiv.textContent = "اتصال قطع شد. تلاش مجدد..."; |
| resetUI(true); |
| setTimeout(connectWebSocket, 3000); |
| }; |
| } |
| |
| async function playFromQueue() { |
| if (audioQueue.length === 0 || isStopped) { |
| isPlaying = false; |
| return; |
| } |
| |
| isPlaying = true; |
| |
| while (audioQueue.length > 0) { |
| const pcmData = audioQueue.shift(); |
| |
| const float32Data = new Float32Array(pcmData.length); |
| for (let i = 0; i < pcmData.length; i++) { |
| float32Data[i] = pcmData[i] / 32768.0; |
| } |
| |
| const audioBuffer = audioContext.createBuffer(1, float32Data.length, audioContext.sampleRate); |
| audioBuffer.getChannelData(0).set(float32Data); |
| |
| const source = audioContext.createBufferSource(); |
| source.buffer = audioBuffer; |
| source.connect(audioContext.destination); |
| |
| const currentTime = audioContext.currentTime; |
| if (nextStartTime < currentTime) { |
| nextStartTime = currentTime; |
| } |
| |
| source.start(nextStartTime); |
| sourceNodes.push(source); |
| |
| nextStartTime += audioBuffer.duration; |
| } |
| |
| isPlaying = false; |
| } |
| |
| function handleStreamEnd(audioUrl) { |
| if (audioUrl) { |
| audioPlayer.src = audioUrl; |
| audioPlayerContainer.style.display = 'block'; |
| } |
| const checkPlaybackEnd = setInterval(() => { |
| if (audioQueue.length === 0 && audioContext.currentTime > nextStartTime) { |
| if(!isStopped) { |
| statusDiv.textContent = "پخش تمام شد."; |
| resetUI(); |
| } |
| clearInterval(checkPlaybackEnd); |
| } |
| }, 100); |
| } |
| |
| function resetUI(isConnectionError = false) { |
| speakButton.disabled = isConnectionError; |
| stopButton.disabled = true; |
| isPlaying = false; |
| } |
| |
| speakButton.addEventListener('click', () => { |
| const text = textInput.value.trim(); |
| if (!text || !socket || socket.readyState !== WebSocket.OPEN) return; |
| |
| initializeAudio(); |
| isStopped = false; |
| |
| audioQueue = []; |
| sourceNodes.forEach(source => source.stop()); |
| sourceNodes = []; |
| |
| socket.send(text); |
| |
| speakButton.disabled = true; |
| stopButton.disabled = false; |
| statusDiv.textContent = "در حال دریافت و پخش صدا..."; |
| |
| audioPlayerContainer.style.display = 'none'; |
| audioPlayer.src = ""; |
| }); |
| |
| stopButton.addEventListener('click', () => { |
| isStopped = true; |
| audioQueue = []; |
| sourceNodes.forEach(source => source.stop()); |
| sourceNodes = []; |
| statusDiv.textContent = "پخش متوقف شد."; |
| resetUI(); |
| }); |
| |
| window.addEventListener('load', connectWebSocket); |
| </script> |
|
|
| </body> |
| </html> |
