テキスト読み上げ Web サイトを構築する-CSSチュートリアル-php.cn

テキスト読み上げ Web サイトを構築する

WBOY

リリース： 2024-08-22 06:33:33

オリジナル

672 人が閲覧しました

Build a Text to Speech Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクト、シンプルかつ強力な 音声合成ジェネレーター をご紹介できることを嬉しく思います。このプロジェクトは、JavaScript の機能、特にユーザー入力の処理、Web Speech API との対話、DOM の動的更新を詳しく調べるための素晴らしい方法です。あなたが初心者であっても、JavaScript の知識を広げたいと考えている人であっても、この Text to Speech Generator は取り組むのに最適なプロジェクトです。

プロジェクト概要

Text to Speech Generator は、ユーザーがブラウザの音声合成機能を使用してテキストを音声に変換できる Web ベースのアプリケーションです。このプロジェクトでは、テキスト入力を音声に変換することでリアルタイムのフィードバックを提供しながら、インタラクティブでアクセスしやすいユーザーインターフェイスを作成する方法を紹介します。

特徴

ユーザーフレンドリーなインターフェイス: シームレスなユーザー操作のためのシンプルで直感的なデザイン。
リアルタイム音声: 入力して音声ボタンをクリックすると、入力テキストが即座に音声に変換されます。
停止機能: ユーザーは再生中の任意の時点で音声を停止できます。
レスポンシブデザイン: さまざまな画面サイズやデバイス間で一貫したエクスペリエンスを保証します。

使用されている技術

HTML: Web ページと入力要素を構造化します。
CSS: インターフェイスのスタイルを設定し、クリーンで応答性の高いデザインを保証します。
JavaScript: 音声合成ロジックとユーザーインタラクションを処理します。

プロジェクトの構造

プロジェクトの構造を簡単に見てみましょう:

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

ログイン後にコピー

index.html: Text to Speech Generator の HTML 構造が含まれています。
styles.css: アプリケーションの外観と応答性を向上させる CSS スタイルが含まれています。
script.js: 音声合成ロジックとユーザーインタラクションを管理します。

インストール

プロジェクトを開始するには、次の手順に従います:

リポジトリのクローンを作成します:

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

ログイン後にコピー

プロジェクトディレクトリを開きます:
```
cd Text-to-Speech-Generator
```
ログイン後にコピー
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、Text to Speech Generator の使用を開始します。

使用法

Web ブラウザで Web サイトを開きます。
表示されたテキスト領域にテキストを入力します。
「テキストを読み上げる」ボタンをクリックすると、テキストの読み上げが聞こえます。
スピーチを停止したい場合は、「停止」ボタンをクリックしてください。

コードの説明

HTML

index.html ファイルは、ユーザー入力用のテキストエリアや音声合成をトリガーするボタンなど、Text to Speech Generator の基本構造を提供します。スニペットは次のとおりです:

<!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>

ログイン後にコピー

CSS

styles.css ファイルは Text to Speech Generator のスタイルを設定し、クリーンで使いやすいレイアウトを提供します。以下にいくつかの主要なスタイルを示します:

* {
  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;
}

ログイン後にコピー

JavaScript

script.js ファイルは音声合成ロジックを処理し、テキスト入力を音声に変換し、停止機能を管理します。スニペットは次のとおりです:

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();
  }
});

ログイン後にコピー

ライブデモ

ここで Text to Speech Generator のライブデモをチェックできます。

結論

この Text to Speech Generator の構築は、特に Web Speech API を使用したインタラクティブな Web アプリケーションの作成において、JavaScript についての理解を深めた楽しくて勉強になる経験でした。このプロジェクトが、Web 開発の可能性を探求するきっかけとなることを願っています。コーディングを楽しんでください!