Làm ứng dụng Text to Speech đơn giản bằng Javascript | Không dùng thư viện

Làm ứng dụng Text to Speech đơn giản bằng Javascript | Không dùng thư viện

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!

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">&or;</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;
}

Bước 3: Thêm Javascript


const btn = document.querySelector('button');
const text = document.querySelector('textarea');

const speech = new SpeechSynthesisUtterance();

let voices = [];

let voiceSelect = document.querySelector('select');

window.speechSynthesis.onvoiceschanged = () => {
    voices = window.speechSynthesis.getVoices();
    speech.voice = voices[0];

    voices.forEach((voice, index) => {
        voiceSelect.options[index] = new Option(voice.name, index);
    })
}

voiceSelect.addEventListener('change', () => {
    speech.voice = voices[voiceSelect.value];
})


btn.addEventListener('click', () => {
    speech.text = text.value;
    window.speechSynthesis.speak(speech);
})

Full tutorial:


Hoàn thành

Cuối cùng, chúng ta đã hoàn thành hướng dẫn về cách tạo một ứng dụng "Text to Speech" đơn giản bằng JavaScript. Hy vọng rằng bạn đã tận hưởng quá trình học và đã có được kiến thức cơ bản về cách sử dụng công nghệ web để biến đổi văn bản thành giọng nói.

Ứng dụng "Text to Speech" là một trong những ví dụ tuyệt vời về sức mạnh của JavaScript và khả năng tùy chỉnh trong lập trình web. Bạn có thể tận dụng kiến thức này để phát triển các ứng dụng hoặc tích hợp tính năng "Text to Speech" vào dự án của mình.

Nếu bạn còn bất kỳ câu hỏi nào hoặc muốn chia sẻ kết quả của mình, đừng ngần ngại liên hệ hoặc để lại bình luận. Chúng tôi luôn sẵn sàng hỗ trợ và lắng nghe ý kiến của bạn.

Chúc mọi người thành công trong việc tiếp tục học tập và khám phá sáng tạo với JavaScript. Hẹn gặp lại trong những hướng dẫn và dự án tương lai!

No comments:

Powered by Blogger.