초보자를 위한 텍스트 음성 변환기 만들기!

9381 단어 tutorialjavascriptbeginnersopensource
안녕 모두들! 오늘 우리는 이 기사에서 너무 멋진 것을 만들 것입니다. HTML, CSS 및 JavaScript를 사용하여 텍스트 음성 변환 변환기를 만드는 방법을 배우게 됩니다.

나는 이 프로젝트를 실현하기 위해 매우 열심히 일했습니다. 단 한 푼도 😍. GitHub에 있는 이 프로젝트의 공식 저장소에서 이 프로젝트를 응시하고 지원하세요. 데모를 사용할 수 있습니다here ! Cloud Speech 작동 방식(출처: Google)

처음에 텍스트 음성 변환기 란 무엇입니까? (핵심 기초)



TTS(텍스트 음성 변환)는 텍스트를 말소리로 변환할 수 있는 기술입니다.

이 프로젝트(텍스트 음성 변환 변환기)에서는 텍스트를 모든 유형의 장치에 대한 기본 출력 방법으로 제공되는 다양한 음성 및 악센트가 있는 음성으로 변환할 수 있습니다.

텍스트의 핵심에 포함된 일시 중지 및 다시 시작 버튼은 ~125단어/문자의 최소 요구 사항을 초과합니다.

텍스트를 음성으로 변환하는 변환기 프로젝트 정보(기본 사항 이해)



원래 JavaScript 코드에서 사용자 텍스트를 가져와서 사용자 입력 텍스트를 인수로 구문 분석하여 함수textToSpeech()를 호출했습니다.

이 기능 내에서 윈도우 객체의 음성 합성 속성을 활용하여 사용자가 입력한 텍스트를 음성으로 변환했습니다.

음성 합성은 기본 장치에서 사용할 수 있는 원어민 음성 언어를 사용하여 음성 서비스를 조정하는 웹 음성 API로 정의됩니다.
그런 다음 음성 합성의 getVoices() 체계를 사용하여 사용자 장치에서 사용 가능한 모든 구두 음성을 가져와 속성 HTML 선택 태그에 삽입합니다.

이것이 전부이며 코드가 실제로 수행하는 작업에 대한 더 많은 지식을 얻으려면 계속 읽으십시오.

출처: 슈가민트

텍스트 음성 변환 프로젝트 구축(무료 소스 코드 🎉)



이 텍스트 음성 변환 프로젝트를 빌드하려면 .html , .css 및 .js 파일의 세 가지 핵심 파일을 만들어야 합니다. 이 파일들을 정리한 후 주어진 코드를 파일에 붙여넣기만 하면 됩니다.

이 문서의 끝에 있는 아래에 제공된 다운로드 버튼에서 이 텍스트 음성 변환 프로젝트의 소스 코드 파일을 추가로 다운로드할 수 있습니다.

먼저 파일 이름이 index.html인 HTML 파일을 만들고 다음 코드를 HTML 파일에 붙여넣습니다. 저장, 마지막에 .html 확장자를 가진 파일을 생성해야 합니다.

<!doctype html>
<html lang="en">
  <head>
<!-- Built By RoyalityFree's Blog-->
    <meta charset="utf-8">
    <title>Text To Speech | RoyalityFree Codes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/style.css">
  </head>
  <body>
    <div class="wrapper">
     <div class="container-fluid">
      <h2 class="h2 text-center">
          Text To Speech
      </h2>
      <form>
        <div class="form-group row">
          <label class="col-sm- col-form-label">Enter Text <span class="badge badge-success">Max 5000 Letters</span>
          </label>
          <div class="col-15">
              <textarea maxlength="5000"></textarea>
        </div>
        </div>
        <div class="form-group row">
            <label>Select Voice</label>
            <div class="outer">
              <select></select>
            </div>
        </div>
        <div class="form-group row">
          <div class="col-15">
            <button type="submit" class="btn btn-primary">Convert To Speech</button>
          </div>
        </div>
      </form>
     </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>


둘째, 파일 이름이 style.css인 CSS 파일을 만들고 파일에 다음 코드를 붙여넣습니다. 저장하려면 마지막에 .css 확장자를 가진 파일을 생성해야 합니다.

/* Built By RoyalityFree's Blog | Codes */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
} /*Applied Universally*/

body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-image: linear-gradient(90deg, #1d4aff, #829bff,#1d4aff);
}

::selection{
  color: #fff;
  background: #5256AD; /* Change Selection Colour*/
}

.wrapper{
  width: 370px;
  padding: 25px 30px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 7px 7px 20px rgba(0,0,0,0.05);
} /*Box Behind*/

.wrapper header{
  font-size: 28px;
  font-weight: 500;
  text-align: center;
}

.wrapper form{
  margin: 35px 0 20px;
}

form .row{
  display: flex;
  margin-bottom: 20px;
  flex-direction: column;
}

form .row label{
  font-size: 18px;
  margin-bottom: 5px;
}

form .row:nth-child(2) label{
  font-size: 17px;
}

form :where(textarea, select, button){
  outline: none;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 5px;
}

form .row textarea{
  resize: none;
  height: 110px;
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid #999;
}

form .row textarea::-webkit-scrollbar{
  width: 0px;
}

form .row .outer{
  height: 47px;
  display: flex;
  padding: 0 10px;
  align-items: center;
  border-radius: 5px;
  justify-content: center;
  border: 1px solid #999;
}

form .row select{
  font-size: 14px;
  background: none;
}

form .row select::-webkit-scrollbar{
  width: 8px;
}

form .row select::-webkit-scrollbar-track{
  background: #fff;
}

form .row select::-webkit-scrollbar-thumb{
  background: #888;
  border-radius: 8px;
  border-right: 2px solid #ffffff;
}

form button{
  height: 52px;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  background: #675AFE;
  transition: 0.3s ease;
}

form button:hover{
  background: #4534fe;
}

@media(max-width: 728px){
  .wrapper{
    max-width: 345px;
    width: 100%;
    margin-left: 7px;
    margin-right: 7px;
  }
} /*For Mobile View*/


마지막으로 파일 이름이 script.js인 JavaScript 파일을 만들고 JavaScript 파일에 다음 코드를 붙여넣습니다. 저장하고 마지막으로 .js 확장자를 가진 파일을 생성해야 합니다.

const textarea = document.querySelector("textarea"),
voiceList = document.querySelector("select"), // Selection
speechBtn = document.querySelector("button");

let synth = speechSynthesis,
isSpeaking = true;

voices();

function voices(){
    for(let voice of synth.getVoices()){
        let selected = voice.name === "Google US English" ? "selected" : "";
        let option = `<option value="${voice.name}" ${selected}>${voice.name} (${voice.lang})</option>`;
        voiceList.insertAdjacentHTML("beforeend", option); // Getting Verbal's 
    }
}

synth.addEventListener("voiceschanged", voices);

function textToSpeech(text){
    let utterance = new SpeechSynthesisUtterance(text);
    for(let voice of synth.getVoices()){
        if(voice.name === voiceList.value){
            utterance.voice = voice;
        }
    }
    synth.speak(utterance);
}

speechBtn.addEventListener("click", e =>{
    e.preventDefault();
    if(textarea.value !== ""){
        if(!synth.speaking){
            textToSpeech(textarea.value);
        }
        if(textarea.value.length > 80){
            setInterval(()=>{
                if(!synth.speaking && !isSpeaking){
                    isSpeaking = true;
                    speechBtn.innerText = "Convert To Speech"; //Execute
                }else{
                }
            }, 500);
            if(isSpeaking){
                synth.resume();
                isSpeaking = false;
                speechBtn.innerText = "Pause Speech"; //Pause
            }else{
                synth.pause();
                isSpeaking = true;
                speechBtn.innerText = "Resume Speech"; //Resume
            }
        }else{
            speechBtn.innerText = "Convert To Speech"; //Execute
        }
    }
});


출처: VoximPlant

텍스트 음성 변환 변환기(마지막 단어)



이제 네이티브 HTML, CSS 및 JavaScript로 텍스트 음성 변환 프로젝트를 성공적으로 구축했습니다.

코드가 작동하지 않거나 문제/문제에 직면한 경우 아래 제공된 다운로드 버튼에서 소스 파일을 다운로드해 보십시오.

매우 귀중하며 .zip 파일이 다운로드된 다음 파일 관리자, 서버 등에 압축을 풀면 됩니다.

elasticsearch 처리 맵 요청 코드(조합 조건 조회 적용)
Mac에서 Wacom CintiqPro를 사용하는 경우 펜촉 위치 조정이 표시되지 않습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage