style="clear: both; text-align: center;"
>
style="margin-left: 1em; margin-right: 1em;"
>
data-original-height="609"
data-original-width="1084"
height="360"
src="https://blogger.googleusercontent.com/img/a/AVvXsEjfdQyHDs1-spKZCtNmX6_dyxWgw01xOsTK7-mvKYHS8WveD30RKGIIf-f2aJ8biciBtllIEyXUVlLl04rwAypVzcPsVzNpgPOmTUiNURv_r7emwh6tLLUDcOZumR0U5CQ0S15IqhCHmYj16VsAJhGDuXNRP9lXyOii-XjqpI8Lb4TaUMuyOVGOhIvoHjQ=w640-h360"
title="Làm ứng dụng Text to Speech đơn giản bằng Javascript | Không dùng thư viện"
width="640"
/>
Chào bạn,
Hôm nay, chúng ta sẽ khám phá một hướng dẫn thú vị về lập trình, trong đó
chúng ta sẽ tạo ra một ứng dụng "Text to Speech" đơn giản bằng ngôn ngữ
lập trình JavaScript. Đây là một ví dụ cực kỳ hữu ích về cách bạn có thể
sử dụng công nghệ web để biến đoạn văn bản thành giọng nói, cho phép bạn
tạo ra các ứng dụng và dự án thú vị.
Ứng dụng "Text to Speech" sẽ cho phép người dùng nhập văn bản vào một hộp
văn bản, sau đó chuyển đổi nó thành giọng nói một cách tự động. Chúng ta
sẽ sử dụng JavaScript để tương tác với API "Text-to-Speech" của trình
duyệt và tạo ra trải nghiệm tuyệt vời cho người dùng.
Không cần kiến thức lập trình nâng cao, chúng ta sẽ đi từng bước một để
tạo ra ứng dụng này. Hãy sẵn sàng khám phá và học cách tạo ứng dụng "Text
to Speech" đơn giản và hữu ích bằng JavaScript cùng chúng tôi!
Các bài viết liên quan:
target="_blank"
>Password Strength Checker đơn giản bằng HTML, CSS và
Javascript >
target="_blank"
>Làm máy tính bỏ túi đơn giản bằng HTML, CSS và Javascript >
target="_blank"
>Làm đồng hồ treo tường đơn giản bằng HTML, CSS và
Javascript >
target="_blank"
>Cách làm hiệu ứng border đẹp mắt bằng HTML và CSS >
target="_blank"
>Làm ứng dụng tạo mã QR đơn giản bằng HTML, CSS và
Javascript >
target="_blank"
>Làm ứng dụng tính tuổi đơn giản bằng HTML, CSS và
Javascript >
Bước 1: Thêm HTML
>
><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text to Speech Converter</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Text to Speech <span>Converter</span></h1>
<textarea placeholder="Write anything here ... "></textarea>
<div class="actions">
<div class="select">
<select></select>
<span class="drop-down">∨</span>
</div>
<button>Speak</button>
</div>
</div>
</body>
<script src="main.js"></script>
</html>
Bước 2: Thêm CSS
>
>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container h1 {
font-size: 45px;
font-weight: 500;
margin-top: -50px;
margin-bottom: 50px;
}
.container h1 span {
color: #ff2963;
}
.container textarea {
width: 600px;
height: 250px;
background-color: #ddd;
color: #333;
font-size: 15px;
border: none;
outline: none;
padding: 20px;
border-radius: 10px;
resize: none;
margin-bottom: 30px;
}
.container textarea::placeholder {
font-size: 16px;
color: #666;
}
.actions {
width: 600px;
display: flex;
align-items: center;
gap: 20px;
cursor: pointer;
}
.actions button {
background-color: #ff2963;
color: #fff;
font-size: 16px;
padding: 10px 30px;
border-radius: 35px;
border: 0;
outline: 0;
cursor: pointer;
}
.actions .select {
position: relative;
flex: 1;
cursor: pointer;
}
.actions .select select {
width: 100%;
color: #fff;
background-color: #279EFF;
height: 50px;
padding: 0 20px;
outline: 0;
border: 0;
border-radius: 35px;
appearance: none;
cursor: pointer;
}
.actions .drop-down {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 20px;
font-weight: 700;
user-select: none;
color: #fff;
}