Text to Speech Responsive<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background-color: #f0f2f5;\r\n line-height: 1.6;\r\n color: #333;\r\n padding: 20px;\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n }\r\n\r\n .card {\r\n background: white;\r\n border-radius: 12px;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n padding: 20px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n h1 {\r\n color: #2c3e50;\r\n margin-bottom: 20px;\r\n font-size: 2em;\r\n text-align: center;\r\n }\r\n\r\n h3 {\r\n color: #34495e;\r\n margin: 15px 0;\r\n }\r\n\r\n .input-group {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .input-field {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n input[type=\"text\"] {\r\n flex: 1;\r\n min-width: 200px;\r\n padding: 12px 15px;\r\n border: 2px solid #ddd;\r\n border-radius: 8px;\r\n font-size: 16px;\r\n transition: border-color 0.3s;\r\n }\r\n\r\n input[type=\"text\"]:focus {\r\n border-color: #3498db;\r\n outline: none;\r\n }\r\n\r\n .button-group {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n button {\r\n padding: 12px 20px;\r\n border: none;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-size: 16px;\r\n font-weight: 500;\r\n transition: all 0.3s;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 120px;\r\n }\r\n\r\n button i {\r\n margin-right: 8px;\r\n }\r\n\r\n .btn-speak {\r\n background-color: #2ecc71;\r\n color: white;\r\n }\r\n\r\n .btn-speak:hover {\r\n background-color: #27ae60;\r\n }\r\n\r\n .btn-stop {\r\n background-color: #e74c3c;\r\n color: white;\r\n }\r\n\r\n .btn-stop:hover {\r\n background-color: #c0392b;\r\n }\r\n\r\n .btn-clear {\r\n background-color: #f39c12;\r\n color: white;\r\n }\r\n\r\n .btn-clear:hover {\r\n background-color: #d35400;\r\n }\r\n\r\n .btn-preset {\r\n background-color: #3498db;\r\n color: white;\r\n }\r\n\r\n .btn-preset:hover {\r\n background-color: #2980b9;\r\n }\r\n\r\n .history-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 20px;\r\n }\r\n\r\n .history-table th,\r\n .history-table td {\r\n padding: 12px;\r\n text-align: left;\r\n border-bottom: 1px solid #ddd;\r\n }\r\n\r\n .history-table th {\r\n background-color: #f8f9fa;\r\n font-weight: 600;\r\n }\r\n\r\n .history-table tr:hover {\r\n background-color: #f5f5f5;\r\n }\r\n\r\n .action-btn {\r\n padding: 8px 12px;\r\n min-width: auto;\r\n margin: 0 5px;\r\n }\r\n\r\n .btn-play {\r\n background-color: #2ecc71;\r\n }\r\n\r\n .btn-download {\r\n background-color: #3498db;\r\n }\r\n\r\n .btn-delete {\r\n background-color: #e74c3c;\r\n }\r\n\r\n .history-actions {\r\n display: flex;\r\n justify-content: flex-end;\r\n gap: 10px;\r\n margin-top: 20px;\r\n }\r\n\r\n @media screen and (max-width: 768px) {\r\n .container {\r\n padding: 10px;\r\n }\r\n\r\n h1 {\r\n font-size: 1.5em;\r\n }\r\n\r\n button {\r\n width: 100%;\r\n }\r\n\r\n .history-table {\r\n display: block;\r\n overflow-x: auto;\r\n }\r\n\r\n .history-actions {\r\n flex-direction: column;\r\n }\r\n\r\n .action-btn {\r\n width: auto;\r\n }\r\n }\r\n\r\n \/* Loading Spinner *\/\r\n .loading {\r\n display: none;\r\n width: 20px;\r\n height: 20px;\r\n border: 2px solid #f3f3f3;\r\n border-radius: 50%;\r\n border-top: 2px solid #3498db;\r\n animation: spin 1s linear infinite;\r\n margin-left: 10px;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"card\">\r\n <h1>Text to Speech<\/h1>\r\n \r\n <div class=\"input-group\">\r\n <h3>Masukkan Teks<\/h3>\r\n <div class=\"input-field\">\r\n <input type=\"text\" id=\"textInput\" placeholder=\"Ketik teks yang ingin diucapkan...\">\r\n <div class=\"button-group\">\r\n <button onclick=\"speakText()\" class=\"btn-speak\">\r\n <i>\ud83d\udd0a<\/i> Ucapkan\r\n <\/button>\r\n <button onclick=\"stopSpeak()\" class=\"btn-stop\">\r\n <i>\u23f9\ufe0f<\/i> Stop\r\n <\/button>\r\n <button onclick=\"clearInput()\" class=\"btn-clear\">\r\n <i>\ud83d\uddd1\ufe0f<\/i> Hapus\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"preset-messages\">\r\n <h3>Pesan Siap Pakai<\/h3>\r\n <div class=\"button-group\">\r\n <button onclick=\"speakMessage('Selamat datang di website kami')\" class=\"btn-preset\">\r\n <i>\ud83d\udc4b<\/i> Selamat Datang\r\n <\/button>\r\n <button onclick=\"speakMessage('Anda memiliki satu pesan baru')\" class=\"btn-preset\">\r\n <i>\ud83d\udce8<\/i> Pesan Baru\r\n <\/button>\r\n <button onclick=\"speakMessage('Terima kasih telah mengunjungi website kami')\" class=\"btn-preset\">\r\n <i>\ud83d\ude4f<\/i> Terima Kasih\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card\">\r\n <h3>Riwayat Teks<\/h3>\r\n <div id=\"historyTable\"><\/div>\r\n <div class=\"history-actions\">\r\n <button onclick=\"clearHistory()\" class=\"btn-clear\">\r\n <i>\ud83d\uddd1\ufe0f<\/i> Hapus Semua\r\n <\/button>\r\n <button onclick=\"downloadAllMP3()\" class=\"btn-download\">\r\n <i>\u2b07\ufe0f<\/i> Download Semua\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n<div id=\"status-recording\" style=\"display: none;\">\r\n Sedang merekam audio... Mohon tunggu.\r\n<\/div>\r\n\r\n\r\n\r\n\r\n <script>\r\n \/\/ Fungsi untuk membersihkan input\r\n function clearInput() {\r\n document.getElementById('textInput').value = '';\r\n }\r\n\r\n \/\/ Mengecek dukungan browser\r\n if (!('speechSynthesis' in window)) {\r\n alert(\"Browser Anda tidak mendukung text-to-speech\");\r\n }\r\n\r\n \/\/ Fungsi untuk menyimpan ke cookie\r\n function saveToHistory(text) {\r\n let history = getCookieHistory();\r\n const timestamp = new Date().toLocaleString();\r\n const id = Date.now(); \/\/ Unique ID untuk setiap entri\r\n history.push({ id, text, timestamp });\r\n \r\n if (history.length > 50) history.shift();\r\n document.cookie = `textHistory=${JSON.stringify(history)}; expires=${new Date(Date.now() + 86400000).toUTCString()}; path=\/`;\r\n \r\n updateHistoryTable();\r\n }\r\n\r\n \/\/ Fungsi untuk mendapatkan history dari cookie\r\n function getCookieHistory() {\r\n const cookie = document.cookie.split('; ').find(row => row.startsWith('textHistory='));\r\n return cookie ? JSON.parse(cookie.split('=')[1]) : [];\r\n }\r\n\r\n \/\/ Fungsi untuk menghapus item spesifik dari history\r\n function deleteHistoryItem(id) {\r\n let history = getCookieHistory();\r\n history = history.filter(item => item.id !== id);\r\n document.cookie = `textHistory=${JSON.stringify(history)}; expires=${new Date(Date.now() + 86400000).toUTCString()}; path=\/`;\r\n updateHistoryTable();\r\n }\r\n\r\n \/\/ Fungsi untuk mengupdate tabel history\r\n function updateHistoryTable() {\r\n const history = getCookieHistory();\r\n const table = document.getElementById('historyTable');\r\n \r\n let html = `\r\n <table class=\"history-table\">\r\n <thead>\r\n <tr>\r\n <th>No<\/th>\r\n <th>Teks<\/th>\r\n <th>Waktu<\/th>\r\n <th>Aksi<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n `;\r\n\r\n history.forEach((item, index) => {\r\n html += `\r\n <tr>\r\n <td>${index + 1}<\/td>\r\n <td>${item.text}<\/td>\r\n <td>${item.timestamp}<\/td>\r\n <td>\r\n <button onclick=\"speakMessage('${item.text}')\" class=\"action-btn btn-play\">\u25b6\ufe0f<\/button>\r\n <button onclick=\"downloadMP3('${item.text}', ${index + 1})\" class=\"action-btn btn-download\">\u2b07\ufe0f<\/button>\r\n <button onclick=\"deleteHistoryItem(${item.id})\" class=\"action-btn btn-delete\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/td>\r\n <\/tr>\r\n `;\r\n });\r\n\r\n html += '<\/tbody><\/table>';\r\n table.innerHTML = history.length ? html : '<p>Belum ada riwayat<\/p>';\r\n }\r\n\r\n \/\/ Fungsi untuk mengucapkan teks dari input\r\n function speakText() {\r\n const text = document.getElementById('textInput').value;\r\n if (text) {\r\n speak(text);\r\n saveToHistory(text);\r\n document.getElementById('textInput').value = '';\r\n }\r\n }\r\n\r\n \/\/ Fungsi utama text-to-speech\r\n function speak(text) {\r\n window.speechSynthesis.cancel();\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n utterance.lang = 'id-ID';\r\n utterance.pitch = 1;\r\n utterance.rate = 1;\r\n utterance.volume = 1;\r\n window.speechSynthesis.speak(utterance);\r\n }\r\n\r\n \/\/ Fungsi untuk pesan siap pakai\r\n function speakMessage(message) {\r\n speak(message);\r\n saveToHistory(message);\r\n }\r\n\r\n \/\/ Fungsi untuk menghentikan suara\r\n function stopSpeak() {\r\n window.speechSynthesis.cancel();\r\n }\r\n\r\n \/\/ Fungsi untuk menghapus history\r\n function clearHistory() {\r\n if (confirm('Apakah Anda yakin ingin menghapus semua riwayat?')) {\r\n document.cookie = 'textHistory=[]; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=\/';\r\n updateHistoryTable();\r\n }\r\n }\r\n\r\n \/\/ Fungsi download MP3\r\n async function downloadMP3(text, index) {\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n utterance.lang = 'id-ID';\r\n \r\n const audioContext = new (window.AudioContext || window.webkitAudioContext)();\r\n const mediaStreamDestination = audioContext.createMediaStreamDestination();\r\n \r\n const mediaRecorder = new MediaRecorder(mediaStreamDestination.stream);\r\n const chunks = [];\r\n\r\n mediaRecorder.ondataavailable = (e) => chunks.push(e.data);\r\n mediaRecorder.onstop = () => {\r\n const blob = new Blob(chunks, { type: 'audio\/mp3' });\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `speech_${index}.mp3`;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n URL.revokeObjectURL(url);\r\n };\r\n\r\n mediaRecorder.start();\r\n window.speechSynthesis.speak(utterance);\r\n\r\n utterance.onend = () => {\r\n mediaRecorder.stop();\r\n audioContext.close();\r\n };\r\n }\r\n\r\n \/\/ Download semua MP3\r\n function downloadAllMP3() {\r\n const history = getCookieHistory();\r\n if (history.length === 0) {\r\n alert('Tidak ada riwayat untuk diunduh');\r\n return;\r\n }\r\n \r\n if (confirm(`Akan mengunduh ${history.length} file MP3. Lanjutkan?`)) {\r\n history.forEach((item, index) => {\r\n setTimeout(() => {\r\n downloadMP3(item.text, index + 1);\r\n }, index * 1000);\r\n });\r\n }\r\n }\r\n\r\n \/\/ Event listener untuk input\r\n document.getElementById('textInput').addEventListener('keypress', function(e) {\r\n if (e.key === 'Enter') {\r\n speakText();\r\n }\r\n });\r\n\r\n \/\/ Load history saat halaman dimuat\r\n window.onload = function() {\r\n updateHistoryTable();\r\n setTimeout(() => {\r\n speak(\"Selamat datang di website text to speech\");\r\n }, 1000);\r\n };\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \/\/ Fungsi untuk mengupdate tabel history\r\nfunction updateHistoryTable() {\r\n const history = getCookieHistory().reverse(); \/\/ Tambahkan reverse() untuk menampilkan data terbaru di atas\r\n const table = document.getElementById('historyTable');\r\n \r\n let html = `\r\n <table class=\"history-table\">\r\n <thead>\r\n <tr>\r\n <th>No<\/th>\r\n <th>Teks<\/th>\r\n <th>Waktu<\/th>\r\n <th>Aksi<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n `;\r\n\r\n history.forEach((item, index) => {\r\n html += `\r\n <tr>\r\n <td>${index + 1}<\/td>\r\n <td>${item.text}<\/td>\r\n <td>${item.timestamp}<\/td>\r\n <td>\r\n <button onclick=\"playHistory('${item.text}')\" class=\"action-btn btn-play\">\u25b6\ufe0f<\/button>\r\n <button onclick=\"downloadMP3('${item.text}', ${index + 1})\" class=\"action-btn btn-download\">\u2b07\ufe0f<\/button>\r\n <button onclick=\"deleteHistoryItem(${item.id})\" class=\"action-btn btn-delete\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/td>\r\n <\/tr>\r\n `;\r\n });\r\n\r\n html += '<\/tbody><\/table>';\r\n table.innerHTML = history.length ? html : '<p>Belum ada riwayat<\/p>';\r\n}\r\n\r\n\/\/ Fungsi baru untuk play history tanpa menyimpan ke history lagi\r\nfunction playHistory(text) {\r\n window.speechSynthesis.cancel();\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n utterance.lang = 'id-ID';\r\n utterance.pitch = 1;\r\n utterance.rate = 1;\r\n utterance.volume = 1;\r\n window.speechSynthesis.speak(utterance);\r\n}\r\n\r\n\/\/ Ganti onclick di table menjadi playHistory\r\n\/\/ Dari: onclick=\"speakMessage('${item.text}')\"\r\n\/\/ Menjadi: onclick=\"playHistory('${item.text}')\"\r\n \r\n \r\n \r\n \r\n \/\/ Fungsi untuk mengkonversi teks ke audio blob\r\nasync function textToAudioBlob(text) {\r\n return new Promise((resolve, reject) => {\r\n \/\/ Buat audio context\r\n const audioContext = new (window.AudioContext || window.webkitAudioContext)();\r\n const mediaStreamDestination = audioContext.createMediaStreamDestination();\r\n const mediaRecorder = new MediaRecorder(mediaStreamDestination.stream);\r\n const audioChunks = [];\r\n\r\n \/\/ Konfigurasi utterance\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n utterance.lang = 'id-ID';\r\n utterance.rate = 1.0;\r\n utterance.pitch = 1.0;\r\n utterance.volume = 1.0;\r\n\r\n \/\/ Setup audio processing\r\n const source = audioContext.createOscillator();\r\n const gainNode = audioContext.createGain();\r\n source.connect(gainNode);\r\n gainNode.connect(mediaStreamDestination);\r\n\r\n \/\/ Handle data recording\r\n mediaRecorder.ondataavailable = (event) => {\r\n if (event.data.size > 0) {\r\n audioChunks.push(event.data);\r\n }\r\n };\r\n\r\n mediaRecorder.onstop = () => {\r\n const audioBlob = new Blob(audioChunks, { \r\n type: 'audio\/mpeg' \r\n });\r\n resolve(audioBlob);\r\n };\r\n\r\n \/\/ Start recording\r\n mediaRecorder.start();\r\n\r\n \/\/ Handle speech synthesis\r\n window.speechSynthesis.speak(utterance);\r\n\r\n utterance.onend = () => {\r\n setTimeout(() => {\r\n mediaRecorder.stop();\r\n source.stop();\r\n audioContext.close();\r\n }, 100); \/\/ Tambah sedikit delay untuk memastikan semua audio terekam\r\n };\r\n\r\n source.start();\r\n });\r\n}\r\n\r\n\/\/ Fungsi untuk download MP3\r\nasync function downloadMP3(text, index) {\r\n try {\r\n \/\/ Create audio element untuk merekam suara\r\n const audio = new Audio();\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n utterance.lang = 'id-ID';\r\n\r\n \/\/ Buat MediaRecorder untuk merekam audio\r\n const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });\r\n const mediaRecorder = new MediaRecorder(audioStream);\r\n const audioChunks = [];\r\n\r\n mediaRecorder.ondataavailable = (event) => {\r\n audioChunks.push(event.data);\r\n };\r\n\r\n mediaRecorder.onstop = () => {\r\n const audioBlob = new Blob(audioChunks, { type: 'audio\/mpeg' });\r\n const audioUrl = URL.createObjectURL(audioBlob);\r\n \r\n \/\/ Download file\r\n const a = document.createElement('a');\r\n a.href = audioUrl;\r\n a.download = `speech_${index}.mp3`;\r\n document.body.appendChild(a);\r\n a.click();\r\n \r\n \/\/ Cleanup\r\n document.body.removeChild(a);\r\n URL.revokeObjectURL(audioUrl);\r\n audioStream.getTracks().forEach(track => track.stop());\r\n };\r\n\r\n \/\/ Mulai merekam\r\n mediaRecorder.start();\r\n\r\n \/\/ Mainkan text-to-speech\r\n window.speechSynthesis.speak(utterance);\r\n\r\n utterance.onend = () => {\r\n setTimeout(() => {\r\n mediaRecorder.stop();\r\n }, 500); \/\/ Tambah delay untuk memastikan seluruh audio terekam\r\n };\r\n\r\n } catch (error) {\r\n console.error('Error generating audio:', error);\r\n alert('Terjadi kesalahan saat menghasilkan file audio. Pastikan browser mengizinkan akses mikrofon.');\r\n }\r\n}\r\n\r\n\/\/ Fungsi untuk download semua MP3\r\nasync function downloadAllMP3() {\r\n const history = getCookieHistory();\r\n if (history.length === 0) {\r\n alert('Tidak ada riwayat untuk diunduh');\r\n return;\r\n }\r\n\r\n if (confirm(`Akan mengunduh ${history.length} file audio. Lanjutkan?`)) {\r\n for (let i = 0; i < history.length; i++) {\r\n try {\r\n await downloadMP3(history[i].text, i + 1);\r\n \/\/ Tunggu sebentar antara setiap download\r\n await new Promise(resolve => setTimeout(resolve, 2000));\r\n } catch (error) {\r\n console.error(`Error downloading audio ${i + 1}:`, error);\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n\/\/ Fungsi helper untuk menampilkan status\r\nfunction showStatus(message) {\r\n const statusElement = document.getElementById('status-recording');\r\n statusElement.textContent = message;\r\n statusElement.style.display = 'block';\r\n}\r\n\r\nfunction hideStatus() {\r\n const statusElement = document.getElementById('status-recording');\r\n statusElement.style.display = 'none';\r\n}\r\n\r\n \r\n \r\n \r\n <\/script> \r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Text to Speech Responsive Text to Speech Masukkan Teks \ud83d\udd0a Ucapkan \u23f9\ufe0f Stop \ud83d\uddd1\ufe0f Hapus Pesan Siap Pakai \ud83d\udc4b Selamat Datang \ud83d\udce8 Pesan Baru \ud83d\ude4f Terima Kasih Riwayat Teks \ud83d\uddd1\ufe0f Hapus Semua \u2b07\ufe0f Download Semua Sedang merekam audio… Mohon tunggu.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/82"}],"collection":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":25,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/82\/revisions"}],"predecessor-version":[{"id":533,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/82\/revisions\/533"}],"wp:attachment":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/media?parent=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Text to Speech Responsive<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background-color: #f0f2f5;\r\n line-height: 1.6;\r\n color: #333;\r\n padding: 20px;\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n }\r\n\r\n .card {\r\n background: white;\r\n border-radius: 12px;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n padding: 20px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n h1 {\r\n color: #2c3e50;\r\n margin-bottom: 20px;\r\n font-size: 2em;\r\n text-align: center;\r\n }\r\n\r\n h3 {\r\n color: #34495e;\r\n margin: 15px 0;\r\n }\r\n\r\n .input-group {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .input-field {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n input[type=\"text\"] {\r\n flex: 1;\r\n min-width: 200px;\r\n padding: 12px 15px;\r\n border: 2px solid #ddd;\r\n border-radius: 8px;\r\n font-size: 16px;\r\n transition: border-color 0.3s;\r\n }\r\n\r\n input[type=\"text\"]:focus {\r\n border-color: #3498db;\r\n outline: none;\r\n }\r\n\r\n .button-group {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n button {\r\n padding: 12px 20px;\r\n border: none;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-size: 16px;\r\n font-weight: 500;\r\n transition: all 0.3s;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 120px;\r\n }\r\n\r\n button i {\r\n margin-right: 8px;\r\n }\r\n\r\n .btn-speak {\r\n background-color: #2ecc71;\r\n color: white;\r\n }\r\n\r\n .btn-speak:hover {\r\n background-color: #27ae60;\r\n }\r\n\r\n .btn-stop {\r\n background-color: #e74c3c;\r\n color: white;\r\n }\r\n\r\n .btn-stop:hover {\r\n background-color: #c0392b;\r\n }\r\n\r\n .btn-clear {\r\n background-color: #f39c12;\r\n color: white;\r\n }\r\n\r\n .btn-clear:hover {\r\n background-color: #d35400;\r\n }\r\n\r\n .btn-preset {\r\n background-color: #3498db;\r\n color: white;\r\n }\r\n\r\n .btn-preset:hover {\r\n background-color: #2980b9;\r\n }\r\n\r\n .history-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 20px;\r\n }\r\n\r\n .history-table th,\r\n .history-table td {\r\n padding: 12px;\r\n text-align: left;\r\n border-bottom: 1px solid #ddd;\r\n }\r\n\r\n .history-table th {\r\n background-color: #f8f9fa;\r\n font-weight: 600;\r\n }\r\n\r\n .history-table tr:hover {\r\n background-color: #f5f5f5;\r\n }\r\n\r\n .action-btn {\r\n padding: 8px 12px;\r\n min-width: auto;\r\n margin: 0 5px;\r\n }\r\n\r\n .btn-play {\r\n background-color: #2ecc71;\r\n }\r\n\r\n .btn-download {\r\n background-color: #3498db;\r\n }\r\n\r\n .btn-delete {\r\n background-color: #e74c3c;\r\n }\r\n\r\n .history-actions {\r\n display: flex;\r\n justify-content: flex-end;\r\n gap: 10px;\r\n margin-top: 20px;\r\n }\r\n\r\n @media screen and (max-width: 768px) {\r\n .container {\r\n padding: 10px;\r\n }\r\n\r\n h1 {\r\n font-size: 1.5em;\r\n }\r\n\r\n button {\r\n width: 100%;\r\n }\r\n\r\n .history-table {\r\n display: block;\r\n overflow-x: auto;\r\n }\r\n\r\n .history-actions {\r\n flex-direction: column;\r\n }\r\n\r\n .action-btn {\r\n width: auto;\r\n }\r\n }\r\n\r\n \/* Loading Spinner *\/\r\n .loading {\r\n display: none;\r\n width: 20px;\r\n height: 20px;\r\n border: 2px solid #f3f3f3;\r\n border-radius: 50%;\r\n border-top: 2px solid #3498db;\r\n animation: spin 1s linear infinite;\r\n margin-left: 10px;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"card\">\r\n <h1>Text to Speech<\/h1>\r\n \r\n <div class=\"input-group\">\r\n <h3>Masukkan Teks<\/h3>\r\n <div class=\"input-field\">\r\n <input type=\"text\" id=\"textInput\" placeholder=\"Ketik teks yang ingin diucapkan...\">\r\n <div class=\"button-group\">\r\n <button onclick=\"speakText()\" class=\"btn-speak\">\r\n <i>\ud83d\udd0a<\/i> Ucapkan\r\n <\/button>\r\n <button onclick=\"stopSpeak()\" class=\"btn-stop\">\r\n <i>\u23f9\ufe0f<\/i> Stop\r\n <\/button>\r\n <button onclick=\"clearInput()\" class=\"btn-clear\">\r\n <i>\ud83d\uddd1\ufe0f<\/i> Hapus\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"preset-messages\">\r\n <h3>Pesan Siap Pakai<\/h3>\r\n <div class=\"button-group\">\r\n <button onclick=\"speakMessage('Selamat datang di website kami')\" class=\"btn-preset\">\r\n <i>\ud83d\udc4b<\/i> Selamat Datang\r\n <\/button>\r\n <button onclick=\"speakMessage('Anda memiliki satu pesan baru')\" class=\"btn-preset\">\r\n <i>\ud83d\udce8<\/i> Pesan Baru\r\n <\/button>\r\n <button onclick=\"speakMessage('Terima kasih telah mengunjungi website kami')\" class=\"btn-preset\">\r\n <i>\ud83d\ude4f<\/i> Terima Kasih\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card\">\r\n <h3>Riwayat Teks<\/h3>\r\n <div id=\"historyTable\"><\/div>\r\n <div class=\"history-actions\">\r\n <button onclick=\"clearHistory()\" class=\"btn-clear\">\r\n <i>\ud83d\uddd1\ufe0f<\/i> Hapus Semua\r\n <\/button>\r\n <button onclick=\"downloadAllMP3()\" class=\"btn-download\">\r\n <i>\u2b07\ufe0f<\/i> Download Semua\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n<div id=\"status-recording\" style=\"display: none;\">\r\n Sedang merekam audio... Mohon tunggu.\r\n<\/div>\r\n\r\n\r\n\r\n\r\n <script>\r\n \/\/ Fungsi untuk membersihkan input\r\n function clearInput() {\r\n document.getElementById('textInput').value = '';\r\n }\r\n\r\n \/\/ Mengecek dukungan browser\r\n if (!('speechSynthesis' in window)) {\r\n alert(\"Browser Anda tidak mendukung text-to-speech\");\r\n }\r\n\r\n \/\/ Fungsi untuk menyimpan ke cookie\r\n function saveToHistory(text) {\r\n let history = getCookieHistory();\r\n const timestamp = new Date().toLocaleString();\r\n const id = Date.now(); \/\/ Unique ID untuk setiap entri\r\n history.push({ id, text, timestamp });\r\n \r\n if (history.length > 50) history.shift();\r\n document.cookie = `textHistory=${JSON.stringify(history)}; expires=${new Date(Date.now() + 86400000).toUTCString()}; path=\/`;\r\n \r\n updateHistoryTable();\r\n }\r\n\r\n \/\/ Fungsi untuk mendapatkan history dari cookie\r\n function getCookieHistory() {\r\n const cookie = document.cookie.split('; ').find(row => row.startsWith('textHistory='));\r\n return cookie ? JSON.parse(cookie.split('=')[1]) : [];\r\n }\r\n\r\n \/\/ Fungsi untuk menghapus item spesifik dari history\r\n function deleteHistoryItem(id) {\r\n let history = getCookieHistory();\r\n history = history.filter(item => item.id !== id);\r\n document.cookie = `textHistory=${JSON.stringify(history)}; expires=${new Date(Date.now() + 86400000).toUTCString()}; path=\/`;\r\n updateHistoryTable();\r\n }\r\n\r\n \/\/ Fungsi untuk mengupdate tabel history\r\n function updateHistoryTable() {\r\n const history = getCookieHistory();\r\n const table = document.getElementById('historyTable');\r\n \r\n let html = `\r\n <table class=\"history-table\">\r\n <thead>\r\n <tr>\r\n <th>No<\/th>\r\n <th>Teks<\/th>\r\n <th>Waktu<\/th>\r\n <th>Aksi<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n `;\r\n\r\n history.forEach((item, index) => {\r\n html += `\r\n <tr>\r\n <td>${index + 1}<\/td>\r\n <td>${item.text}<\/td>\r\n <td>${item.timestamp}<\/td>\r\n <td>\r\n <button onclick=\"speakMessage('${item.text}')\" class=\"action-btn btn-play\">\u25b6\ufe0f<\/button>\r\n <button onclick=\"downloadMP3('${item.text}', ${index + 1})\" class=\"action-btn btn-download\">\u2b07\ufe0f<\/button>\r\n <button onclick=\"deleteHistoryItem(${item.id})\" class=\"action-btn btn-delete\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/td>\r\n <\/tr>\r\n `;\r\n });\r\n\r\n html += '<\/tbody><\/table>';\r\n table.innerHTML = history.length ? html : '<p>Belum ada riwayat<\/p>';\r\n }\r\n\r\n \/\/ Fungsi untuk mengucapkan teks dari input\r\n function speakText() {\r\n const text = document.getElementById('textInput').value;\r\n if (text) {\r\n speak(text);\r\n saveToHistory(text);\r\n document.getElementById('textInput').value = '';\r\n }\r\n }\r\n\r\n \/\/ Fungsi utama text-to-speech\r\n function speak(text) {\r\n window.speechSynthesis.cancel();\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n utterance.lang = 'id-ID';\r\n utterance.pitch = 1;\r\n utterance.rate = 1;\r\n utterance.volume = 1;\r\n window.speechSynthesis.speak(utterance);\r\n }\r\n\r\n \/\/ Fungsi untuk pesan siap pakai\r\n function speakMessage(message) {\r\n speak(message);\r\n saveToHistory(message);\r\n }\r\n\r\n \/\/ Fungsi untuk menghentikan suara\r\n function stopSpeak() {\r\n window.speechSynthesis.cancel();\r\n }\r\n\r\n \/\/ Fungsi untuk menghapus history\r\n function clearHistory() {\r\n if (confirm('Apakah Anda yakin ingin menghapus semua riwayat?')) {\r\n document.cookie = 'textHistory=[]; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=\/';\r\n updateHistoryTable();\r\n }\r\n }\r\n\r\n \/\/ Fungsi download MP3\r\n async function downloadMP3(text, index) {\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n utterance.lang = 'id-ID';\r\n \r\n const audioContext = new (window.AudioContext || window.webkitAudioContext)();\r\n const mediaStreamDestination = audioContext.createMediaStreamDestination();\r\n \r\n const mediaRecorder = new MediaRecorder(mediaStreamDestination.stream);\r\n const chunks = [];\r\n\r\n mediaRecorder.ondataavailable = (e) => chunks.push(e.data);\r\n mediaRecorder.onstop = () => {\r\n const blob = new Blob(chunks, { type: 'audio\/mp3' });\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `speech_${index}.mp3`;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n URL.revokeObjectURL(url);\r\n };\r\n\r\n mediaRecorder.start();\r\n window.speechSynthesis.speak(utterance);\r\n\r\n utterance.onend = () => {\r\n mediaRecorder.stop();\r\n audioContext.close();\r\n };\r\n }\r\n\r\n \/\/ Download semua MP3\r\n function downloadAllMP3() {\r\n const history = getCookieHistory();\r\n if (history.length === 0) {\r\n alert('Tidak ada riwayat untuk diunduh');\r\n return;\r\n }\r\n \r\n if (confirm(`Akan mengunduh ${history.length} file MP3. Lanjutkan?`)) {\r\n history.forEach((item, index) => {\r\n setTimeout(() => {\r\n downloadMP3(item.text, index + 1);\r\n }, index * 1000);\r\n });\r\n }\r\n }\r\n\r\n \/\/ Event listener untuk input\r\n document.getElementById('textInput').addEventListener('keypress', function(e) {\r\n if (e.key === 'Enter') {\r\n speakText();\r\n }\r\n });\r\n\r\n \/\/ Load history saat halaman dimuat\r\n window.onload = function() {\r\n updateHistoryTable();\r\n setTimeout(() => {\r\n speak(\"Selamat datang di website text to speech\");\r\n }, 1000);\r\n };\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \/\/ Fungsi untuk mengupdate tabel history\r\nfunction updateHistoryTable() {\r\n const history = getCookieHistory().reverse(); \/\/ Tambahkan reverse() untuk menampilkan data terbaru di atas\r\n const table = document.getElementById('historyTable');\r\n \r\n let html = `\r\n <table class=\"history-table\">\r\n <thead>\r\n <tr>\r\n <th>No<\/th>\r\n <th>Teks<\/th>\r\n <th>Waktu<\/th>\r\n <th>Aksi<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n `;\r\n\r\n history.forEach((item, index) => {\r\n html += `\r\n <tr>\r\n <td>${index + 1}<\/td>\r\n <td>${item.text}<\/td>\r\n <td>${item.timestamp}<\/td>\r\n <td>\r\n <button onclick=\"playHistory('${item.text}')\" class=\"action-btn btn-play\">\u25b6\ufe0f<\/button>\r\n <button onclick=\"downloadMP3('${item.text}', ${index + 1})\" class=\"action-btn btn-download\">\u2b07\ufe0f<\/button>\r\n <button onclick=\"deleteHistoryItem(${item.id})\" class=\"action-btn btn-delete\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/td>\r\n <\/tr>\r\n `;\r\n });\r\n\r\n html += '<\/tbody><\/table>';\r\n table.innerHTML = history.length ? html : '<p>Belum ada riwayat<\/p>';\r\n}\r\n\r\n\/\/ Fungsi baru untuk play history tanpa menyimpan ke history lagi\r\nfunction playHistory(text) {\r\n window.speechSynthesis.cancel();\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n utterance.lang = 'id-ID';\r\n utterance.pitch = 1;\r\n utterance.rate = 1;\r\n utterance.volume = 1;\r\n window.speechSynthesis.speak(utterance);\r\n}\r\n\r\n\/\/ Ganti onclick di table menjadi playHistory\r\n\/\/ Dari: onclick=\"speakMessage('${item.text}')\"\r\n\/\/ Menjadi: onclick=\"playHistory('${item.text}')\"\r\n \r\n \r\n \r\n \r\n \/\/ Fungsi untuk mengkonversi teks ke audio blob\r\nasync function textToAudioBlob(text) {\r\n return new Promise((resolve, reject) => {\r\n \/\/ Buat audio context\r\n const audioContext = new (window.AudioContext || window.webkitAudioContext)();\r\n const mediaStreamDestination = audioContext.createMediaStreamDestination();\r\n const mediaRecorder = new MediaRecorder(mediaStreamDestination.stream);\r\n const audioChunks = [];\r\n\r\n \/\/ Konfigurasi utterance\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n utterance.lang = 'id-ID';\r\n utterance.rate = 1.0;\r\n utterance.pitch = 1.0;\r\n utterance.volume = 1.0;\r\n\r\n \/\/ Setup audio processing\r\n const source = audioContext.createOscillator();\r\n const gainNode = audioContext.createGain();\r\n source.connect(gainNode);\r\n gainNode.connect(mediaStreamDestination);\r\n\r\n \/\/ Handle data recording\r\n mediaRecorder.ondataavailable = (event) => {\r\n if (event.data.size > 0) {\r\n audioChunks.push(event.data);\r\n }\r\n };\r\n\r\n mediaRecorder.onstop = () => {\r\n const audioBlob = new Blob(audioChunks, { \r\n type: 'audio\/mpeg' \r\n });\r\n resolve(audioBlob);\r\n };\r\n\r\n \/\/ Start recording\r\n mediaRecorder.start();\r\n\r\n \/\/ Handle speech synthesis\r\n window.speechSynthesis.speak(utterance);\r\n\r\n utterance.onend = () => {\r\n setTimeout(() => {\r\n mediaRecorder.stop();\r\n source.stop();\r\n audioContext.close();\r\n }, 100); \/\/ Tambah sedikit delay untuk memastikan semua audio terekam\r\n };\r\n\r\n source.start();\r\n });\r\n}\r\n\r\n\/\/ Fungsi untuk download MP3\r\nasync function downloadMP3(text, index) {\r\n try {\r\n \/\/ Create audio element untuk merekam suara\r\n const audio = new Audio();\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n utterance.lang = 'id-ID';\r\n\r\n \/\/ Buat MediaRecorder untuk merekam audio\r\n const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });\r\n const mediaRecorder = new MediaRecorder(audioStream);\r\n const audioChunks = [];\r\n\r\n mediaRecorder.ondataavailable = (event) => {\r\n audioChunks.push(event.data);\r\n };\r\n\r\n mediaRecorder.onstop = () => {\r\n const audioBlob = new Blob(audioChunks, { type: 'audio\/mpeg' });\r\n const audioUrl = URL.createObjectURL(audioBlob);\r\n \r\n \/\/ Download file\r\n const a = document.createElement('a');\r\n a.href = audioUrl;\r\n a.download = `speech_${index}.mp3`;\r\n document.body.appendChild(a);\r\n a.click();\r\n \r\n \/\/ Cleanup\r\n document.body.removeChild(a);\r\n URL.revokeObjectURL(audioUrl);\r\n audioStream.getTracks().forEach(track => track.stop());\r\n };\r\n\r\n \/\/ Mulai merekam\r\n mediaRecorder.start();\r\n\r\n \/\/ Mainkan text-to-speech\r\n window.speechSynthesis.speak(utterance);\r\n\r\n utterance.onend = () => {\r\n setTimeout(() => {\r\n mediaRecorder.stop();\r\n }, 500); \/\/ Tambah delay untuk memastikan seluruh audio terekam\r\n };\r\n\r\n } catch (error) {\r\n console.error('Error generating audio:', error);\r\n alert('Terjadi kesalahan saat menghasilkan file audio. Pastikan browser mengizinkan akses mikrofon.');\r\n }\r\n}\r\n\r\n\/\/ Fungsi untuk download semua MP3\r\nasync function downloadAllMP3() {\r\n const history = getCookieHistory();\r\n if (history.length === 0) {\r\n alert('Tidak ada riwayat untuk diunduh');\r\n return;\r\n }\r\n\r\n if (confirm(`Akan mengunduh ${history.length} file audio. Lanjutkan?`)) {\r\n for (let i = 0; i < history.length; i++) {\r\n try {\r\n await downloadMP3(history[i].text, i + 1);\r\n \/\/ Tunggu sebentar antara setiap download\r\n await new Promise(resolve => setTimeout(resolve, 2000));\r\n } catch (error) {\r\n console.error(`Error downloading audio ${i + 1}:`, error);\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n\/\/ Fungsi helper untuk menampilkan status\r\nfunction showStatus(message) {\r\n const statusElement = document.getElementById('status-recording');\r\n statusElement.textContent = message;\r\n statusElement.style.display = 'block';\r\n}\r\n\r\nfunction hideStatus() {\r\n const statusElement = document.getElementById('status-recording');\r\n statusElement.style.display = 'none';\r\n}\r\n\r\n \r\n \r\n \r\n <\/script> \r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Text to Speech Responsive Text to Speech Masukkan Teks \ud83d\udd0a Ucapkan \u23f9\ufe0f Stop \ud83d\uddd1\ufe0f Hapus Pesan Siap Pakai \ud83d\udc4b Selamat Datang \ud83d\udce8 Pesan Baru \ud83d\ude4f Terima Kasih Riwayat Teks \ud83d\uddd1\ufe0f Hapus Semua \u2b07\ufe0f Download Semua Sedang merekam audio… Mohon tunggu.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/82"}],"collection":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":25,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/82\/revisions"}],"predecessor-version":[{"id":533,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/82\/revisions\/533"}],"wp:attachment":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/media?parent=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}