Spaces:
Running
Running
File size: 2,873 Bytes
c42c510 cdecc9d c42c510 cdecc9d e3c5f70 cdecc9d c42c510 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<!DOCTYPE html>
<html>
<head>
<title>Text to Speech</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #333;
}
textarea {
width: 300px;
height: 100px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
margin-top: 10px;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007BFF;
color: white;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div>
<h1>Text to Speech Converter</h1>
<textarea id="text" placeholder="Enter text here"></textarea> <br>
<select id="voice">
<option value="de-DE-SeraphinaMultilingualNeural">de-DE-SeraphinaMultilingualNeural</option>
<option value="fr-FR-RemyMultilingualNeural">fr-FR-RemyMultilingualNeural</option>
<option value="zh-CN-XiaochenMultilingualNeural">zh-CN-XiaochenMultilingualNeural</option>
</select> <br>
<input id="customVoice" type="text" placeholder="Or type a voice name here"> <br>
<button id="convert">Convert to Speech</button> <br>
<audio id="audio" controls autoplay></audio>
</div>
<script>
document.body.innerHTML += `<div>
for azure tts api: <a href="${window.location.origin}/atts/${encodeURIComponent('replace you text in url')}">${window.location.origin}/atts/your_text</a>
</div>`
document.body.innerHTML += `<div>
api for short text less than 200 charaters : <a href="${window.location.origin}/tts/${encodeURIComponent('replace you text in url')}">${window.location.origin}/tts/your_text</a>
</div>`
function synthesizeSpeech(text, voice) {
if (true) {
fetch('/tts/' + encodeURIComponent(text) + '?voicename=' + encodeURIComponent(voice))
.then(response => response.blob())
.then(blob => {
var url = URL.createObjectURL(blob);
var audio = document.getElementById('audio');
audio.src = url;
audio.play();
})
.catch(console.error);
}
}
document.getElementById('convert').addEventListener('click', function (e) {
console.log('start tts');
var text = document.getElementById('text').value || 'test';
var voice = document.getElementById('customVoice').value || document.getElementById('voice').value;
synthesizeSpeech(text, voice);
});
</script>
</body>
</html> |