텍스트 음성 변환 웹사이트 구축-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

텍스트 음성 변환 웹사이트 구축

Aug 22, 2024 am 06:33 AM

Build a Text to Speech Website

소개

안녕하세요, 개발자 여러분! 간단하면서도 강력한 텍스트 음성 변환 생성기라는 최신 프로젝트를 소개하게 되어 기쁩니다. 이 프로젝트는 특히 사용자 입력 처리, Web Speech API와의 상호 작용 및 DOM 동적으로 업데이트에서 JavaScript의 기능을 탐구할 수 있는 환상적인 방법입니다. 초보자이거나 JavaScript 지식을 확장하려는 경우 이 텍스트 음성 변환 생성기는 작업하기에 좋은 프로젝트입니다.

프로젝트 개요

텍스트 음성 변환 생성기는 사용자가 브라우저의 음성 합성 기능을 사용하여 텍스트를 음성 단어로 변환할 수 있는 웹 기반 애플리케이션입니다. 이 프로젝트는 텍스트 입력을 음성으로 변환하여 실시간 피드백을 제공하면서 대화형 및 액세스 가능한 사용자 인터페이스를 만드는 방법을 보여줍니다.

특징

사용자 친화적인 인터페이스: 원활한 사용자 상호 작용을 위한 단순하고 직관적인 디자인.
실시간 음성: 입력하고 말하기 버튼을 클릭하면 입력 텍스트를 즉시 음성으로 변환합니다.
중지 기능: 재생 중 언제든지 음성을 중지할 수 있습니다.
반응형 디자인: 다양한 화면 크기와 기기에서 일관된 경험을 보장합니다.

사용된 기술

HTML: 웹페이지와 입력 요소를 구성합니다.
CSS: 인터페이스 스타일을 지정하여 깔끔하고 반응성이 뛰어난 디자인을 보장합니다.
JavaScript: 음성 합성 논리와 사용자 상호 작용을 처리합니다.

프로젝트 구조

프로젝트 구조를 간단히 살펴보겠습니다.

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

로그인 후 복사

index.html: 텍스트 음성 변환 생성기의 HTML 구조를 포함합니다.
styles.css: CSS 스타일을 포함하여 애플리케이션의 모양과 반응성을 향상시킵니다.
script.js: 음성 합성 논리와 사용자 상호 작용을 관리합니다.

설치

프로젝트를 시작하려면 다음 단계를 따르세요.

저장소 복제:

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

로그인 후 복사

프로젝트 디렉토리 열기:
```
cd Text-to-Speech-Generator
```
로그인 후 복사
프로젝트 실행:
- 텍스트 음성 변환 생성기를 사용하려면 웹 브라우저에서 index.html 파일을 엽니다.

용법

웹사이트를 엽니다 웹 브라우저에서
제공된 텍스트 영역에 텍스트를 입력하세요.
'문자 말하기' 버튼을 클릭하면 텍스트를 소리내어 들을 수 있습니다.
연설을 중지하려면 "중지" 버튼을 클릭하세요.

코드 설명

HTML

index.html 파일은 사용자 입력을 위한 텍스트 영역과 음성 합성을 트리거하는 버튼을 포함하여 텍스트 음성 변환 생성기의 기본 구조를 제공합니다. 다음은 일부 내용입니다.

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Text to Speech Generator&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;script src="script.js" defer&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1 class="title"&gt;Text to Speech&lt;/h1&gt;
    &lt;div class="container"&gt;
      &lt;textarea
        name="text"
        class="text"
        placeholder="Type Text Here..."
      &gt;&lt;/textarea&gt;
      &lt;div class="buttons"&gt;
        &lt;button class="speak-btn"&gt;Speak Text&lt;/button&gt;
        &lt;button class="stop-btn"&gt;Stop&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;
      &lt;p&gt;Made with ❤️ by Abhishek Gurjar&lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

CSS

styles.css 파일은 텍스트 음성 변환 생성기의 스타일을 지정하여 깔끔하고 사용자 친화적인 레이아웃을 제공합니다. 주요 스타일은 다음과 같습니다.

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

로그인 후 복사

자바스크립트

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

로그인 후 복사

라이브 데모

여기에서 텍스트 음성 변환 생성기의 라이브 데모를 확인할 수 있습니다.

결론

이 텍스트 음성 변환 생성기를 구축하는 것은 특히 Web Speech API를 사용하여 대화형 웹 애플리케이션을 생성할 때 JavaScript에 대한 이해를 심화시키는 즐겁고 교육적인 경험이었습니다. 이 프로젝트가 여러분이 웹 개발의 가능성을 탐구하는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!