Size: 9.01 KB
<!-- ===== TEXT TO SPEECH TOOL START ===== -->
<div id="tts-app">
<style>
#tts-app * { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',Roboto,Arial,sans-serif; }
#tts-app {
max-width:820px; margin:20px auto; background:#ffffff;
border-radius:16px; overflow:hidden;
box-shadow:0 10px 40px rgba(0,0,0,0.12);
border:1px solid #e8ecf1;
}
/* HEADER */
#tts-app .tts-header {
background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);
padding:28px 24px; text-align:center; color:#fff;
}
#tts-app .tts-header h1 { font-size:24px; font-weight:700; margin-bottom:6px; }
#tts-app .tts-header p { font-size:14px; opacity:0.9; }
/* AD SLOT TOP */
#tts-app .tts-ad {
background:#f8fafc; border:1px dashed #cbd5e1;
margin:16px; padding:16px; text-align:center;
color:#94a3b8; font-size:12px; border-radius:8px;
min-height:90px; display:flex; align-items:center; justify-content:center;
}
/* BODY */
#tts-app .tts-body { padding:8px 24px 24px; }
#tts-app label {
display:block; font-size:13px; font-weight:600;
color:#334155; margin-bottom:8px;
}
#tts-app textarea {
width:100%; min-height:160px; padding:14px;
border:2px solid #e2e8f0; border-radius:10px;
font-size:15px; resize:vertical; outline:none;
transition:border 0.2s; color:#1e293b; background:#fff;
}
#tts-app textarea:focus { border-color:#7c3aed; }
/* CONTROLS ROW */
#tts-app .tts-controls {
display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px;
}
#tts-app .ctrl-group { display:flex; flex-direction:column; }
#tts-app select, #tts-app input[type="range"] {
width:100%; padding:10px; border:2px solid #e2e8f0;
border-radius:8px; font-size:14px; outline:none; color:#1e293b;
background:#fff;
}
#tts-app select:focus { border-color:#7c3aed; }
/* BUTTONS */
#tts-app .tts-btns {
display:flex; gap:12px; margin-top:20px; flex-wrap:wrap;
}
#tts-app button {
flex:1; min-width:120px; padding:13px 20px; border:none;
border-radius:10px; font-size:15px; font-weight:600;
cursor:pointer; transition:transform 0.15s, box-shadow 0.15s;
}
#tts-app button:active { transform:scale(0.97); }
#tts-app .btn-play {
background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff;
box-shadow:0 4px 14px rgba(124,58,237,0.35);
}
#tts-app .btn-play:hover { box-shadow:0 6px 20px rgba(124,58,237,0.5); }
#tts-app .btn-pause { background:#f59e0b; color:#fff; }
#tts-app .btn-stop { background:#ef4444; color:#fff; }
#tts-app .btn-clear { background:#e2e8f0; color:#475569; }
#tts-app button:disabled { opacity:0.5; cursor:not-allowed; }
/* FOOTER */
#tts-app .tts-footer {
background:#0f172a; color:#94a3b8;
padding:20px 24px; text-align:center; font-size:13px;
}
#tts-app .tts-footer a { color:#a78bfa; text-decoration:none; }
#tts-app .tts-footer a:hover { text-decoration:underline; }
#tts-app .tts-footer .footer-links {
margin-top:8px; display:flex; gap:16px;
justify-content:center; flex-wrap:wrap;
}
/* AD SLOT BOTTOM */
#tts-app .tts-ad-bottom {
background:#f8fafc; border:1px dashed #cbd5e1;
margin:0 24px 20px; padding:16px; text-align:center;
color:#94a3b8; font-size:12px; border-radius:8px;
min-height:90px; display:flex; align-items:center; justify-content:center;
}
@media(max-width:600px){
#tts-app .tts-controls { grid-template-columns:1fr; }
#tts-app .tts-header h1 { font-size:20px; }
#tts-app .tts-btns button { min-width:100%; }
}
</style>
<!-- HEADER -->
<div class="tts-header">
<h1>🔊 Text to Speech Converter</h1>
<p>Type your text and listen in your language — 100% free, browser-based</p>
</div>
<!-- AD SLOT (Top) -->
<div class="tts-ad">
<!-- Paste your AdSense code here -->
Ads Code Here
</div>
<!-- BODY -->
<div class="tts-body">
<label for="tts-text">Enter or Paste Your Text:</label>
<textarea id="tts-text" placeholder="Type your text here... (max 5000 characters)" maxlength="5000"></textarea>
<div class="tts-controls">
<div class="ctrl-group">
<label for="tts-voice">🗣️ Voice / Language</label>
<select id="tts-voice"></select>
</div>
<div class="ctrl-group">
<label>⚡ Speed: <span id="rate-label">1.0x</span></label>
<input type="range" id="tts-rate" min="0.5" max="2" step="0.1" value="1">
</div>
<div class="ctrl-group">
<label>🎚️ Pitch: <span id="pitch-label">1.0</span></label>
<input type="range" id="tts-pitch" min="0.5" max="2" step="0.1" value="1">
</div>
<div class="ctrl-group">
<label>🔉 Volume: <span id="vol-label">100%</span></label>
<input type="range" id="tts-volume" min="0" max="1" step="0.1" value="1">
</div>
</div>
<div class="tts-btns">
<button class="btn-play" id="btn-play">▶ Play</button>
<button class="btn-pause" id="btn-pause" disabled>⏸ Pause</button>
<button class="btn-stop" id="btn-stop" disabled>⏹ Stop</button>
<button class="btn-clear" id="btn-clear">🗑 Clear</button>
</div>
</div>
<!-- AD SLOT (Bottom) -->
<div class="tts-ad-bottom">
<!-- Paste your AdSense code here -->
Ads Code Here
</div>
<!-- FOOTER -->
<div class="tts-footer">
<p>© <span id="tts-year"></span> Text to Speech Tool — Powered by Browser Web Speech API</p>
<div class="footer-links">
<a href="/p/privacy.html">Privacy Policy</a>
<a href="/p/about.html">About Us</a>
<a href="/p/contact.html">Contact</a>
</div>
</div>
</div>
<script>
(function(){
var synth = window.speechSynthesis;
var textEl = document.getElementById('tts-text');
var voiceSel = document.getElementById('tts-voice');
var rateEl = document.getElementById('tts-rate');
var pitchEl = document.getElementById('tts-pitch');
var volEl = document.getElementById('tts-volume');
var rateLbl = document.getElementById('rate-label');
var pitchLbl = document.getElementById('pitch-label');
var volLbl = document.getElementById('vol-label');
var btnPlay = document.getElementById('btn-play');
var btnPause = document.getElementById('btn-pause');
var btnStop = document.getElementById('btn-stop');
var btnClear = document.getElementById('btn-clear');
var utter = null;
document.getElementById('tts-year').textContent = new Date().getFullYear();
// Load voices
function loadVoices(){
var voices = synth.getVoices();
voiceSel.innerHTML = '';
if(!voices.length){
voiceSel.innerHTML = '<option>No voice found</option>';
return;
}
voices.forEach(function(v, i){
var opt = document.createElement('option');
opt.value = i;
opt.textContent = v.name + ' (' + v.lang + ')';
voiceSel.appendChild(opt);
});
}
loadVoices();
if(synth.onvoiceschanged !== undefined) synth.onvoiceschanged = loadVoices;
// Slider labels
rateEl.oninput = function(){ rateLbl.textContent = parseFloat(this.value).toFixed(1) + 'x'; };
pitchEl.oninput = function(){ pitchLbl.textContent = parseFloat(this.value).toFixed(1); };
volEl.oninput = function(){ volLbl.textContent = Math.round(this.value * 100) + '%'; };
// Play
btnPlay.onclick = function(){
var txt = textEl.value.trim();
if(!txt){ alert('Please enter some text first!'); return; }
if(synth.speaking) synth.cancel();
utter = new SpeechSynthesisUtterance(txt);
var voices = synth.getVoices();
var selVoice = voices[parseInt(voiceSel.value, 10)];
if(selVoice) utter.voice = selVoice;
utter.rate = parseFloat(rateEl.value);
utter.pitch = parseFloat(pitchEl.value);
utter.volume = parseFloat(volEl.value);
utter.onstart = function(){ btnPlay.disabled = true; btnPause.disabled = false; btnStop.disabled = false; btnPause.textContent = '⏸ Pause'; };
utter.onend = function(){ resetBtns(); };
utter.onerror = function(){ resetBtns(); };
synth.speak(utter);
btnPlay.disabled = true; btnPause.disabled = false; btnStop.disabled = false;
};
// Pause / Resume
btnPause.onclick = function(){
if(synth.paused){
synth.resume();
btnPause.textContent = '⏸ Pause';
} else {
synth.pause();
btnPause.textContent = '▶ Resume';
}
};
// Stop
btnStop.onclick = function(){ synth.cancel(); resetBtns(); };
// Clear
btnClear.onclick = function(){ synth.cancel(); textEl.value=''; resetBtns(); textEl.focus(); };
function resetBtns(){
btnPlay.disabled = false;
btnPause.disabled = true;
btnStop.disabled = true;
btnPause.textContent = '⏸ Pause';
}
})();
</script>
<!-- ===== TEXT TO SPEECH TOOL END ===== -->
⬇️ Download Now