Create a Text to Speech App with JavaScript | JS In this video, you will learn how to convert text to speech using JavaScript.
Source code to create a Text to Speech App with JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js Web Speech API</title>
<style>
body {
width: 100%;
height: 100vh;
}
form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
form * {
width: 50%;
}
textarea {
height: 250px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<form>
<h1>Text To Speech App</h1>
<select></select>
<textarea></textarea>
<input type="submit" value="Speak!">
<button type="button">Pause</button>
<button type="button">Resume</button>
<button type="button">Stop</button>
</form>
<script>
let voices;
let form = document.forms[0];
if ("speechSynthesis" in window) {
speechSynthesis.onvoiceschanged = () => {
voices = speechSynthesis.getVoices();
voices.map(voice => {
form[0].innerHTML += `
<option>${voice.name}</option>
`;
})
console.log(voices);
}
form.addEventListener("submit", e => {
e.preventDefault()
let selected = form[0].querySelector("option:checked").value;
let t2s = new SpeechSynthesisUtterance();
t2s.text = form[1].value;
let voice = voices.filter(v => {
return v.name == selected;
})
t2s.voice = voice[0];
speechSynthesis.cancel();
speechSynthesis.speak(t2s)
})
} else {
alert("unsupported")
}
form[3].addEventListener("click", e => {
speechSynthesis.pause()
})
form[4].addEventListener("click", e => {
speechSynthesis.resume()
})
form[5].addEventListener("click", e => {
speechSynthesis.cancel();
})
</script>
</body>
</html>
- Convert HTML CSS to PDF with JavaScript | HTML to PDF
- Create a Working Contact Form Using HTML - CSS - JavaScript And AppScript | HTML Form to Email
- CRUD App Using HTML - CSS - JavaScript and IndexedDB API
- Reading Data From Google Sheet | Google Sheet to JSON and JSON to HTML | JavaScript and Apps Script
- How to Submit HTML Form Data to Google Sheets | Save Using doPost Method | AppScript | JavaScript
- Fetch and Read Excel Sheets Data in HTML Table with JavaScript
- JavaScript Todo List App with Local Storage | Todo App | Javascript Project
- Fetch and Display Multiple CSV Files in HTML Table with JavaScript | CSV to HTML | Read CSV
- Create a Math Quiz App using HTML CSS and JavaScript | JS Quiz App | JavaScript Project
- Speech to Text with JavaScript | Speech to Text App | JS
- Create a Text to Speech App with JavaScript | JS
- Export HTML Table to CSV with JavaScript | HTML 2 CSV | convert html table to csv | JS
- Validate and show Preview of Single or Multiple Image before upload in server with Javascript | Js
- Convert HTML to Canvas and Canvas to downloadable png / jpeg image | html2canvas | javascript | js
- Match Media Queries With JavaScript matchMedia Method
- Read CSV Files Data in HTML Table using JavaScript Fetch Method | CSV to HTML | JS | CSV File Reader
- How to read csv data in html table using Javascript ( JS )
No comments:
Post a Comment