Bina Laman Web Teks ke Ucapan-tutorial css-php.cn

Bina Laman Web Teks ke Ucapan

WBOY

Lepaskan： 2024-08-22 06:33:33

asal

647 orang telah melayarinya

Build a Text to Speech Website

pengenalan

Helo, rakan pembangun! Saya teruja untuk memperkenalkan projek terbaharu saya: Penjana Teks ke Pertuturan yang ringkas tetapi berkuasa. Projek ini ialah cara yang hebat untuk menyelidiki keupayaan JavaScript, terutamanya dalam mengendalikan input pengguna, berinteraksi dengan API Pertuturan Web dan mengemas kini DOM secara dinamik. Sama ada anda seorang pemula atau ingin mengembangkan pengetahuan JavaScript anda, Text to Speech Generator ini merupakan projek yang bagus untuk diusahakan.

Gambaran Keseluruhan Projek

Text to Speech Generator ialah aplikasi berasaskan web yang membolehkan pengguna menukar teks kepada perkataan yang dituturkan menggunakan ciri sintesis pertuturan penyemak imbas. Projek ini mempamerkan cara untuk mencipta antara muka pengguna yang interaktif dan boleh diakses sambil memberikan maklum balas masa nyata dengan menukar input teks kepada pertuturan.

Ciri-ciri

Antara Muka Mesra Pengguna: Reka bentuk yang ringkas dan intuitif untuk interaksi pengguna yang lancar.
Ucapan Masa Nyata: Menukar teks input kepada pertuturan dengan serta-merta semasa anda menaip dan klik butang cakap.
Berhenti Fungsi: Membenarkan pengguna menghentikan pertuturan pada bila-bila masa semasa main balik.
Reka Bentuk Responsif: Memastikan pengalaman yang konsisten merentas pelbagai saiz skrin dan peranti.

Teknologi yang Digunakan

HTML: Menstruktur halaman web dan elemen input.
CSS: Menggayakan antara muka, memastikan reka bentuk yang bersih dan responsif.
JavaScript: Mengendalikan logik sintesis pertuturan dan interaksi pengguna.

Struktur Projek

Berikut ialah pandangan ringkas pada struktur projek:

Text-to-Speech-Generator/
├── index.html
├── styles.css
└── script.js

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk Penjana Teks ke Pertuturan.
styles.css: Termasuk gaya CSS untuk meningkatkan penampilan dan responsif aplikasi.
script.js: Mengurus logik sintesis pertuturan dan interaksi pengguna.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

git clone https://github.com/abhishekgurjar-in/Text-to-Speech-Generator.git

Salin selepas log masuk

Buka direktori projek:
```
cd Text-to-Speech-Generator
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam pelayar web untuk mula menggunakan Text to Speech Generator.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Taip teks anda dalam kawasan teks yang disediakan.
Klik butang "Sebut Teks" untuk mendengar teks yang dituturkan dengan kuat.
Klik butang "Berhenti" jika anda mahu menghentikan ucapan.

Penerangan Kod

HTML

Fail index.html menyediakan struktur asas Penjana Teks ke Pertuturan, termasuk kawasan teks untuk input pengguna dan butang untuk mencetuskan sintesis pertuturan. Berikut adalah coretan:

<!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 Generator</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1 class="title">Text to Speech</h1>
    <div class="container">
      <textarea
        name="text"
        class="text"
        placeholder="Type Text Here..."
      ></textarea>
      <div class="buttons">
        <button class="speak-btn">Speak Text</button>
        <button class="stop-btn">Stop</button>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

Salin selepas log masuk

CSS

Fail styles.css menggayakan Text to Speech Generator, menyediakan reka letak yang bersih dan mesra pengguna. Berikut ialah beberapa gaya utama:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: white;
}

.title {
  text-align: center;
  font-size: 40px;
  margin: 20px;
  padding: 10px;
}

.container {
  margin: 20px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.text {
  background-color: rgb(242, 241, 241);
  color: black;
  width: 600px;
  height: 400px;
  margin: 10px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.51);
  display: block;
  border-radius: 10px;
}

.buttons {
  display: flex;
}

.speak-btn, .stop-btn {
  width: 200px;
  height: 40px;
  margin: 10px;
  padding: 10px;
  border: none;
  color: white;
  background-color: rgb(63, 63, 255);
  border-radius: 5px;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
}

.stop-btn {
  background-color: rgb(255, 63, 63);
}

.footer {
  margin: 50px;
  text-align: center;
}

Salin selepas log masuk

JavaScript

Fail script.js mengendalikan logik sintesis pertuturan, menukar input teks kepada pertuturan dan mengurus fungsi berhenti. Berikut adalah coretan:

document.addEventListener('DOMContentLoaded', function() {
  const textEl = document.querySelector(".text");
  const speakEl = document.querySelector(".speak-btn");
  const stopEl = document.querySelector(".stop-btn");

  speakEl.addEventListener('click', function() {
    speakText(textEl.value);
  });

  stopEl.addEventListener('click', function() {
    stopSpeaking();
  });

  function speakText(text) {
    window.speechSynthesis.cancel();
    const utterance = new SpeechSynthesisUtterance(text);
    window.speechSynthesis.speak(utterance);
  }

  function stopSpeaking() {
    window.speechSynthesis.cancel();
  }
});

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung Penjana Teks ke Ucapan di sini.

Kesimpulan

Membina Text to Speech Generator ini merupakan pengalaman yang menyeronokkan dan mendidik yang memperdalam pemahaman saya tentang JavaScript, terutamanya dalam mencipta aplikasi web interaktif menggunakan API Web Speech. Saya harap projek ini memberi inspirasi kepada anda untuk meneroka kemungkinan pembangunan web. Selamat mengekod!

Kredit

Projek ini dibangunkan sebagai sebahagian daripada perjalanan saya untuk meningkatkan kemahiran pembangunan web saya, memfokuskan pada penyepaduan JavaScript dan API.

Pengarang

Abhishek Gurjar
- Profil GitHub

Atas ialah kandungan terperinci Bina Laman Web Teks ke Ucapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!