Spaces:
Running
Running
| <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> |