Speech Text Reader in JavaScript with Source Code
The Speech Text Reader in JavaScript is a simple project designed in JavaScript language using HTML and CSS platform. It’s a simple mini-project. This project allows you to transform your text to speech form automatically. You can only click on the words in the picture to get their speech form or simply type any word you want to hear.
This JavaScript Speech Text Reader is a desktop web application. Basically, tutorials and guides for creating code are included in the project. Also, the project provides code creation tutorials and guides. The project is also open source, where users can download and edit zips as required.
I have here a suggested list of Best JavaScript Projects with Source Code Free to download and I’m sure this can help you to improve your skills in JavaScript programming and web development as a whole.
Anyway if you want level up your knowledge in programming especially JavaScript Programming, try this new article I’ve made for you Best JavaScript Projects With Source Code For Beginners 2021.
Watch the video here to see the full running Speech Text Reader In JavaScript With Source Code
To start creating a Speech Text Reader in JavaScript with Source Code, make sure that you have any platform in creating a JavaScript, bootstrap, and HTML installed in your computer, in my case I will use Sublime Text.
Steps on how to create a Speech Text Reader in JavaScript with Source Code
Speech Text Reader in JavaScript with Source Code
- Step 1: Open Sublime Text.
First after installing sublime text IDE, click “open” to start.
- Step 2: Create a HTML file.
Second click “file” and select “save as” and named it “index.html“.
- Step 3: Create a JavaScript file.
Third click “file” and select “save as” and named it “script.js“.
- Step 4: Create a CSS file.
Fourth click “file” and select “save as” and named it “style.css“.
- Step 5: The actual code.
You are free to copy the code given below and paste to your different file created.
This code is for the index.html
In the code given below, which is the code contains the interface of the application. This code will show the form that will be use in html.(Speech Text Reader in JavaScript)
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Itsourcecode Speech Text Reader</title> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <h1>Itsourcecode Speech Text Reader</h1> <button id="toggle" class="btn btn-toggle">Toggle text box</button> <div id="text-box" class="text-box"> <div id="close" class="close">X</div> <h3>Choose Choice</h3> <select name="" id="voice"></select> <textarea id="text" placeholder="Enter text to read..."></textarea> <button id="read" class="btn">Read text</button> </div> <main></main> </div> <script src="script.js" async defer></script> </body> </html> |
This code is for the style.css
In the code given below, which is the code contains the interface design of the application. This code will show the form that will be use for designing.(Speech Text Reader in JavaScript)
|
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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap"); * { box-sizing: border-box; } body { font-family: "Righteous", cursive; background-color: #e8e8e8; color: #222831; min-height: 100vh; margin: 0; } h1 { text-align: center; color: white; } .container { margin: auto; padding: 20px; background-color: black; } .btn { cursor: pointer; background-color: blue; color: white; border: 0; border-radius: 5px; padding: 10px 15px; } .btn:active { transform: scale(0.9); } .btn:focus, select:focus { outline: 0; } .btn-toggle { display: block; margin: auto; margin-bottom: 20px; } .text-box { width: 70%; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -800px); background-color: #00cc00; color: #e8e8e8; padding: 20px; border-radius: 5px; transition: all 1s ease-in-out; } .text-box.show { transform: translate(-50%, 0); } .text-box select { background-color: #0033cc; border: 0; color: #e8e8e8; font-size: 12px; height: 30px; width: 100%; } .text-box textarea { border: 1px solid #30475e; border-radius: 5px; font-size: 16px; padding: 8px; margin: 15px 0; width: 100%; height: 150px; } .text-box .btn { position: absolute; right: 30px; bottom: 50px; } .text-box .close { float: right; text-align: right; cursor: pointer; } main { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .box { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); border-radius: 5px; cursor: pointer; display: flex; flex-direction: column; overflow: hidden; transition: box-shadow 0.2s ease-out; } .box.active { box-shadow: 0 0 10px 5px #f05454; } .box img { width: 100%; object-fit: cover; height: 200px; } .box .info { background-color: blue; color: white; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; margin: 0; padding: 10px; text-align: center; height: 100%; } @media (max-width: 1100px) { main { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { main { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { main { grid-template-columns: 1fr; } } |
This code is for the script.js
In the code given below, which is the code contains the interface function of the application. This code will show the function of the form that will be use in html.(Speech Text Reader in JavaScript)
|
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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
const main = document.querySelector("main"); const voiceSelect = document.getElementById("voice"); const textarea = document.getElementById("text"); const readBtn = document.getElementById("read"); const toggleBtn = document.getElementById("toggle"); const closeBtn = document.getElementById("close"); const data = [ { image: "./images/australia.png", text: "Australia", }, { image: "./images/china.jpg", text: "China", }, { image: "./images/india.jpg", text: "india", }, { image: "./images/japan.png", text: "Japan", }, { image: "./images/philippines.png", text: "philippines", }, { image: "./images/russia.jpg", text: "Russia", }, { image: "./images/southkorea.png", text: "South Korea", }, { image: "./images/usa.png", text: "United States of America", }, ]; data.forEach(createBox); //create box function createBox(item) { const box = document.createElement("div"); const { image, text } = item; box.classList.add("box"); box.innerHTML = ` <img src="${image}" alt="${text}" /> <p class="info">${text}</p> `; box.addEventListener("click", () => { setTextMessage(text); speakText(); box.classList.add("active"); setTimeout(() => box.classList.remove("active"), 800); }); main.appendChild(box); } const message = new SpeechSynthesisUtterance(); function setTextMessage(text) { message.text = text; } function speakText() { speechSynthesis.speak(message); } let voices = []; function getVoice() { voices = speechSynthesis.getVoices(); voices.forEach((voice) => { const option = document.createElement("option"); option.value = voice.name; option.innerText = `${voice.name} ${voice.lang}`; voiceSelect.appendChild(option); }); } speechSynthesis.addEventListener("voiceschanged", getVoice); getVoice(); toggleBtn.addEventListener("click", () => document.getElementById("text-box").classList.toggle("show") ); closeBtn.addEventListener("click", () => document.getElementById("text-box").classList.remove("show") ); function setVoice(e) { message.voice = voices.find((voice) => voice.name === e.target.value); } voiceSelect.addEventListener("change", setVoice); readBtn.addEventListener("click", () => { setTextMessage(textarea.value); speakText(); }); |
Run Quick Virus Scan for secure Download
Run Quick Scan for safe DownloadDownloadable Source Code
Summary
In summary, this 2021 Speech Text Reader in JavaScript with Source Code can be useful to students or professional who wants to learn web development using technologies like HTML, CSS and JavaScript. This project can also be modified to fit your personal requirements. Hope this project will help you to improve your skills. Happy coding!
Related Articles
- To Do List Project in Python with Source Code | Video | 2020
- Currency Converter In Python With Source Code
- Music Player In JavaScript With Source Code
- CRUD Operation In JavaScript With Source Code
- Fibonacci Series In JavaScript With Source Code
- Calculator In JavaScript Source Code
- Library System in JavaScript with Source Code
- Random Password Generator in JavaScript with Source Code
- Ecommerce in JavaScript Framework with Source Code
- JavaScript Snake Game with Source Code
Inquiries
If you have any questions or suggestions about Speech Text Reader in JavaScript with Source Code, please feel free to leave a comment below.
