Voice api

Spiele etwas mit de Voice Api des Browsers rum

Der hier verwendete Code

<!DOCTYPE html> <html lang="en"> <head> <!--Design by codemediaweb.com --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style media="screen"> body { width: 100%; height: 100%; margin: 0; font-family: sans-serif; background: #188cfa; } #innerContainer h1{ text-align: center; margin-top: 10px; color: #0d64c8; } textarea{ min-height: 200px; box-shadow: 0 0 20px rgba(0,139,253,0.35); border: 5px solid rgba(77, 158, 220, 0.643); width: 125%; margin-left: -14%; font-size: 18px; font-family: sans-serif; margin-top: 15px; } #outerContainer { display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; background: white; margin: 100px auto; box-shadow: 0 20px 25px rgba(60,60,100,0.15); width: 400px; padding: 10px; border-radius: 3px; } select{ width: 70%; margin-left: 15%; margin-top: 30px; height: 50px; font-size: 18px; border: 3px solid #68a7eb; background: #deedf3; } #sayitBtn{ width: 150px; height: 50px; margin: 35px auto; margin-left: 30%; background: #087cca; border: none; color: white; font-size: 20px; } #innerContainer { } </style> </head> <body> <div id="outerContainer"> <div id="innerContainer"> <h1>Text-to-Speech</h1> <textarea id="txtInput" placeHolder="Enter text to be spoken" cols="40" rows="5" ></textarea> <br /> <select id="voice"> <option value="0">US English</option> <option value="1">UK English Male</option> <option value="2">UK English Female</option> <option value="3">Spanish</option> <option value="4">French</option> <option value="5">Italian</option> <option value="6">German</option> <option value="7">Japanese</option> <option value="8">Korean</option> <option value="9">Chinese</option> </select> <br> <input type="button" value="Say it" id="sayitBtn"></input> </div> </div> <script type="text/javascript"> var voice = document.getElementById("voice"); var txtInput = document.getElementById("txtInput"); var sayitBtn = document.getElementById("sayitBtn"); sayitBtn.onclick = function() { speech = new SpeechSynthesisUtterance(txtInput.value); console.log("Saying: " + txtInput.value); speech.voice = speechSynthesis.getVoices()[parseInt(voice.value)]; speechSynthesis.speak(speech); } </script> </body> </html>