<!-- FREE AI VOICE GENERATOR - NO API KEY -->
<style>
.voice-app {
max-width: 720px;
margin: 40px auto;
padding: 25px;
background: #0b0b0b;
border-radius: 18px;
font-family: Arial, sans-serif;
color: #fff;
}
.voice-app h2 {
text-align: center;
background: linear-gradient(90deg,#00f2ff,#ff00ff);
-webkit-background-clip: text;
color: transparent;
}
.voice-app textarea {
width: 100%;
height: 160px;
padding: 12px;
border-radius: 12px;
border: none;
resize: none;
}
.voice-app select,
.voice-app button {
width: 100%;
margin-top: 10px;
padding: 12px;
border-radius: 10px;
border: none;
font-size: 15px;
}
.voice-app button {
background: linear-gradient(90deg,#00f2ff,#ff00ff);
color: #000;
font-weight: bold;
cursor: pointer;
}
.download {
display: none;
margin-top: 10px;
color: #00ff99;
font-weight: bold;
}
</style>
<div class="voice-app">
<h2>Free AI Voice Generator</h2>
<textarea id="text"></textarea>
<select id="voice"></select>
<button onclick="generateVoice()">▶ Generate Voice</button>
<button onclick="stopVoice()">■ Stop</button>
<button onclick="downloadVoice()">⬇ Download Audio</button>
<a id="download" class="download" download="ai-voice.webm"></a>
</div>
<script>
let voices = [];
let recorder, chunks = [], blob;
function loadVoices() {
voices = speechSynthesis.getVoices();
const select = document.getElementById("voice");
select.innerHTML = "";
voices.forEach((v, i) => {
const o = document.createElement("option");
o.value = i;
o.textContent = v.name + " (" + v.lang + ")";
select.appendChild(o);
});
}
speechSynthesis.onvoiceschanged = loadVoices;
async function generateVoice() {
const text = document.getElementById("text").value;
if (!text) return alert("Enter text");
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
recorder = new MediaRecorder(stream);
chunks = [];
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => {
blob = new Blob(chunks, { type: "audio/webm" });
document.getElementById("download").href = URL.createObjectURL(blob);
document.getElementById("download").style.display = "block";
};
recorder.start();
const u = new SpeechSynthesisUtterance(text);
u.voice = voices[document.getElementById("voice").value];
u.onend = () => recorder.stop();
speechSynthesis.cancel();
speechSynthesis.speak(u);
}
function stopVoice() {
speechSynthesis.cancel();
if (recorder && recorder.state !== "inactive") recorder.stop();
}
function downloadVoice() {
if (!blob) alert("Generate voice first");
document.getElementById("download").click();
}
</script>
<!-- END -->
Blogger AI Video Lab
Click to Upload Images
Ready to create.
Comments