Skip to main content

Làm website đọc chữ phát ra loa với 10 dòng code (no lib, no install)

Sau khi có thể đọc text bằng 5 dòng code, làm luôn trang web.

Tạo site HTML

Tạo 1 ô nhập text (textarea) và 1 nút bấm (button)

<html>
  <body>
    <textarea id="text" rows="24" cols="100">
     In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.

    “Whenever you feel like criticizing anyone,” he told me, “just remember that all the people in this world haven’t had the advantages that you’ve
    </textarea>
    <br>
    <button id="speak">Speak</button>
  <body>
</html>

Đọc text khi click chuột

button = document.getElementById("speak");

function speak() {
  synth = window.speechSynthesis;
  text = document.getElementById("text").value;
  utter = new SpeechSynthesisUtterance(text);
  voices = synth.getVoices();
  utter.rate = 0.9; // speed - tốc độ
  synth.speak(utter);
}

button.addEventListener('click', speak);

Dòng text = document.getElementById("text").value lấy nội dung trong ô textarea để đọc.

Kết quả

Xem tại https://hvnsweeting.github.io/js-toys/tts.html

Kết luận

Giờ đã có thể dùng điện thoại để đọc text trên trang web dựa trên 5 dòng code ban đầu.

Hết.

HVN at http://pymi.vn and https://www.familug.org.

Ủng hộ tác giả 🍺

Comments

Popular posts from this blog

Tài liệu và hướng dẫn học Python

Để tiết kiệm thời gian, tốt nhất là đi học PyMI Updated: 130617 Sau đây là các tài liệu khuyên dùng: Vì nhiều lý do, nên học python2.7 tại thời điểm hiện tại (giờ là tháng 6/2013 - muốn biết tại sao thì tự tìm hiểu) python 3.5+ (giờ là tháng 2/2017) Chuẩn bị: 1. biết bật tắt máy 2. biết cài python 3. tập gõ 10 ngón - gõ 2 ngón hay 1 ngón cũng không sao, nhưng 10 ngón là cách dễ nhất để gõ nhanh nhất. Tài liệu - Nên dùng tài liệu tại trang chủ của Python làm chính, tham khảo thêm các tài liệu khác tại http://www.familug.org/2016/12/free-ebook.html Căn bản, mới học 1.1 Python PyMI.vn https://pymi.vn/tutorial/ 1.2. Python offical tutorial kết hợp làm bài tập trên HackerRank  (đề bài bằng tiếng Anh, nhưng Google translate 1 lúc cũng ra vì có nhiều ví dụ mẫu đi kèm). Học viên của Pymi.vn có rất nhiều học viên đã tự học với Learn Python the hard way nhưng chưa thấy ai thành công cả. Hai link dưới nên đọc sau khi đã nắm được những phần cơ bản của ngôn ngữ pytho...

The PyMiers

New FAMILUG