HTML5,CSS,JAVA SCRIPT,SPEECH API
게임 토이프로젝트는 한번 도전하면 시간도 굉장히 오래 걸리고 머리가 꽤나 아프기때문에
좀 더 재미있게 할 수 있는 프로젝트를 하고 싶어서 유튜브로 찾아봤다!
자바스크립트로 speech api를 이용하여 텍스트 입력했을 때 입력한 텍스트를 음성으로 변환 시키는 건데 간단하게 만들어보았다.
//index.html 파일
<!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 Converter </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<h1>Text to Speech <span>Converter</span></h1>
<textarea placeholder="Write anything here..."></textarea>
<div class="row">
<select></select>
<button><img src="images/play.png">Listen</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
화면단을 간단하게 만들어 주고 나서 css를 통해 꾸며줬다. 기존 강의와 똑같이 하되 색깔만 내가 원하는 색으로 바꿨다.
그리고 따로 추가하고 싶은 부분이 있었던 건 text to speech converter이라는 폰트의 테두리에 색을 넣고 싶어서 찾아보니
css text-shadow를 사용하면 된다고 해서 추가로 꾸며줬다.
백그라운드 색이 노랑색이 티가 안나는거 같긴 하지만 기존 밋밋한 느낌보다 이뻐서 노랑색으로 했다.
text-shadow: -1px 0px yellow, 0px 1px yellow, 1px 0px yellow, 0px -1px yellow;
다른 색상으로 바꿔봤는데 이게 더 이쁜거 같기도 하고....
text-shadow: -1px 0px goldenrod, 0px 1px goldenrod, 1px 0px goldenrod, 0px -1px goldenrod;
대망의 자바스크립트!
let speech = new SpeechSynthesisUtterance();
let voices = [];
let voiceSelect = document.querySelector("select");
window.speechSynthesis.onvoiceschanged = () => {
voices = window.speechSynthesis.getVoices();
speech.voice = voices[0];
voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
};
//default 보이스 지정하기
voiceSelect.addEventListener("change", () =>{
speech.voice = voices[voiceSelect.value];
});
document.querySelector("button").addEventListener("click", () =>{
speech.text = document.querySelector("textarea").value;
window.speechSynthesis.speak(speech)
});
코드를 잘 몰라서 하나씩 자세하게 봤다.
먼저 let speech = new SpeechSynthesisUtterance();
SpeechSynthesisUtterance 음성합성을 위한 API 중 하나이며, 음성 관련 설정과 텍스트 등을 담을 수 있게 객체로 생성했다.
let voices = [];
let voiceSelect = document.querySelector("select");voices 배열은 음성 목록을 저장하기 위한 빈 배열이고 voiceSelect은 HTML에서 <select> 요소를 찾아 변수에 할당한 것이다.
window.speechSynthesis.onvoiceschanged = () => {
voices = window.speechSynthesis.getVoices();
speech.voice = voices[0];
voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
};음성 목록 업데이트하는 건데 onvoiceschanged가 음성 목록이 변경될 때 발생하며, 여기서는 이벤트가 발생하면 사용가능한 음성목록을 가져와 'voices'배열에 저장한다. 그리고 forEach로 각 음성에 select요소 옵션을 추가한다 이때 옵션 값은 음성의 인덱스이고 표시되는 텍스트는 음성의 이름이다,
voiceSelect.addEventListener("change", () =>{
speech.voice = voices[voiceSelect.value];
});이 부분은 default 기본 음성을 설정하는 코드:
voiceSelect 셀렉트박스에서 음성을 선택했을 때 이벤트가 발생하면 해당 음성을 speech.voice에 설정한다.
document.querySelector("button").addEventListener("click", () =>{
speech.text = document.querySelector("textarea").value;
window.speechSynthesis.speak(speech)
});텍스트를 음성으로 변환하여 재생하는 코드:
Listen 버튼을 눌렀을 때 textarea에 입력된 텍스트가 speech.text에 설정되고 window.speechSynthesis.speak(speech)를 호출하여 해당 텍스트를 음성으로 변환하여 재생하는 것
참고한 유튜브
https://youtu.be/3oDNqHZ7UKY?si=4OthUdTxpRJvha6-
'프로젝트' 카테고리의 다른 글
| [toyproject] Audio API (0) | 2023.11.25 |
|---|