JavaScript의 웹 음성 API를 사용하여 텍스트 음성 변환
39103 단어 texttospeechjavascript
선결 조건
이 강좌를 계속 공부하려면 다음과 같은 기능이 있어야 합니다.
프로젝트 디렉토리
프로젝트에 새 디렉터리를 만들고
index.html와 textToSpeech.js라는 두 개의 새 파일을 만듭니다.project-directory/
|-index.html
|-textToSpeech.js
HTML 페이지
HTML 파일에서 다음을 설정합니다.
textarea를 입력합니다.<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="index.css" />
<title>Text to Speech</title>
</head>
<body class="container mt-5 bg-dark">
<h1 class="text-light">Text to Speech</h1>
<p class="lead text-light mt-4">Select Voice</p>
<!-- Select Menu for Voice -->
<select id="voices" class="form-select bg-secondary text-light"></select>
<!-- Range Slliders for Volume, Rate & Pitch -->
<div class="d-flex mt-4 text-light">
<div>
<p class="lead">Volume</p>
<input type="range" min="0" max="1" value="1" step="0.1" id="volume" />
<span id="volume-label" class="ms-2">1</span>
</div>
<div class="mx-5">
<p class="lead">Rate</p>
<input type="range" min="0.1" max="10" value="1" id="rate" step="0.1" />
<span id="rate-label" class="ms-2">1</span>
</div>
<div>
<p class="lead">Pitch</p>
<input type="range" min="0" max="2" value="1" step="0.1" id="pitch" />
<span id="pitch-label" class="ms-2">1</span>
</div>
</div>
<!-- Text Area for the User to Type -->
<textarea class="form-control bg-dark text-light mt-5" cols="30" rows="10" placeholder="Type here..."></textarea>
<!-- Control Buttons -->
<div class="mb-5">
<button id="start" class="btn btn-success mt-5 me-3">Start</button>
<button id="pause" class="btn btn-warning mt-5 me-3">Pause</button>
<button id="resume" class="btn btn-info mt-5 me-3">Resume</button>
<button id="cancel" class="btn btn-danger mt-5 me-3">Cancel</button>
</div>
</body>
<script src="./textToSpeech.js"></script>
</html>
JavaScript 파일
SpeechSynthesisUtterance 클래스의 실례를 만듭니다.우리는 각종 속성을 사용하여 이 실례를 설정할 것이다.let speech = new SpeechSynthesisUtterance();
등록 정보
현재, 이
SpeechSynthesisUtterance 실례에 속성을 설정합니다.우리는
SpeechSynthesisUtterance 실례상의 여섯 가지 속성을 조정할 수 있다.그들은 다음과 같습니다.
언어:
language 속성은 언어의 언어를 가져오고 설정합니다.설정하지 않으면 <html lang="en">lang 값을 사용하고 <html lang="en">lang이 설정하지 않으면 사용자 에이전트 기본값을 사용합니다.DOMstringBCP 47 language tag을 나타냅니다.
speech.lang = "en";
text 속성은 말할 때 합성된 텍스트를 가져오고 설정합니다.텍스트는 일반 텍스트로 사용할 수 있습니다.우리의 예에서 텍스트 속성은 시작 단추를 눌렀을 때 설정해야 합니다.버튼에 클릭 리스트를 추가합니다.단추를 눌렀을 때
textarea 에서 텍스트 값을 가져와 이 속성으로 설정해야 합니다.사건 탐지기에 대한 더 많은 정보를 알 수 있습니다. here
document.querySelector("#talk").addEventListener("click", () => {
speech.text = document.querySelector("textarea").value;
});
volume 속성은 말의 음량을 가져오고 설정합니다.이것은 부피 값을 나타내는 부동점수로 0(최저)과 1(최고) 사이에 있다.이 속성이 설정되어 있지 않으면 기본값은 1입니다.onInput 범위 슬라이더에 volume 탐지기를 추가하고 슬라이더의 값이 변경될 때 volume 속성을 조정합니다.슬라이더의 최소값, 최대값 및 기본값은 HTML 태그에 설정되어 있습니다.웹 페이지의 범위 슬라이더 옆에 표시되는 값
<span>도 설정할 수 있습니다.document.querySelector("#rate").addEventListener("input", () => {
// Get rate Value from the input
const rate = document.querySelector("#rate").value;
// Set rate property of the SpeechSynthesisUtterance instance
speech.rate = rate;
// Update the rate label
document.querySelector("#rate-label").innerHTML = rate;
});
volume 속성은 말의 속도를 가져오고 설정합니다.이것은 0.1(최저)과 10(최고) 사이의 속도 값을 대표하는 부동점수이다.이 속성이 설정되어 있지 않으면 기본값은 1입니다.rate 범위 슬라이더에 onInput 탐지기를 추가하고 슬라이더의 값이 변경될 때 rate 속성을 조정합니다.슬라이더의 최소값, 최대값 및 기본값은 HTML 태그에 설정되어 있습니다.웹 페이지의 범위 슬라이더 옆에 표시되는 값
rate도 설정할 수 있습니다.document.querySelector("#volume").addEventListener("input", () => {
// Get volume Value from the input
const volume = document.querySelector("#volume").value;
// Set volume property of the SpeechSynthesisUtterance instance
speech.volume = volume;
// Update the volume label
document.querySelector("#volume-label").innerHTML = volume;
});
<span> 속성은 말의 음조를 가져오고 설정합니다.0(최소)과 2(최고) 사이의 피치 값을 나타내는 부동 소수점 수입니다.이 속성을 설정하지 않으면 기본 음고는 1입니다.rate 범위 슬라이더에 pitch 탐지기를 추가하고 슬라이더의 값이 바뀔 때 음조 속성을 조정합니다.슬라이더의 최소값, 최대값 및 기본값은 HTML 태그에 설정되어 있습니다.웹 페이지의 범위 슬라이더 옆에 표시되는 값
onInput도 설정할 수 있습니다.document.querySelector("#pitch").addEventListener("input", () => {
// Get pitch Value from the input
const pitch = document.querySelector("#pitch").value;
// Set pitch property of the SpeechSynthesisUtterance instance
speech.pitch = pitch;
// Update the pitch label
document.querySelector("#pitch-label").innerHTML = pitch;
});
pitch 속성을 획득하여 말소리에 사용할 소리를 설정합니다.이것은 <span> 대상 중의 하나로 설정해야 한다.설정하지 않으면 언어 언어 설정에 가장 적합한 기본 음성을 사용합니다.말의 소리를 설정하려면
pitch 대상에서 사용할 수 있는 소리의 목록을 얻어야 합니다.윈도우 객체가 로드되면 사운드를 즉시 사용할 수 없습니다.이것은 비동기적인 조작이다.음성을 불러올 때 이벤트를 터치합니다.우리는 음성을 불러올 때 실행해야 할 함수를 설정할 수 있다.window.speechSynthesis.onvoiceschanged = () => {
// On Voices Loaded
};
voice를 사용하여 음성 목록을 얻을 수 있다.그것은 사용 가능한 SpeechSynthesisVoice 대상 그룹을 되돌려줍니다.목록을 전역 그룹에 저장하고, 웹 페이지의 선택 메뉴를 음성 목록으로 업데이트합니다.let voices = []; // global array
window.speechSynthesis.onvoiceschanged = () => {
// Get List of Voices
voices = window.speechSynthesis.getVoices();
// Initially set the First Voice in the Array.
speech.voice = voices[0];
// Set the Voice Select List. (Set the Index as the value, which we'll use later when the user updates the Voice using the Select Menu.)
let voiceSelect = document.querySelector("#voices");
voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
};
window 이벤트 탐지기를 추가해서 window.speechSynthesis.getVoices() 실례적인 보이스를 업데이트합니다.사용자가 음성을 업데이트할 때, 우리는 색인 번호 (옵션마다 설정된 값) 와 전역 음성 그룹을 사용하여 음성을 업데이트할 것입니다.document.querySelector("#voices").addEventListener("change", () => {
speech.voice = voices[document.querySelector("#voices").value];
});
컨트롤
SpeechSynthesis 인스턴스에 컨트롤을 추가합니다.
시작:
start 단추를 눌렀을 때, 우리는
SpeechSynthesisVoice 실례를 onChange 방법에 전달해야 한다.텍스트를 음성으로 변환하기 시작합니다.이 방법을 사용하기 전에text 속성을 설정해야 합니다.NOTE: If you start another text to speech while an instance is already running, it'll get queued behind the one that is currently running.
document.querySelector("#talk").addEventListener("click", () => {
speech.text = document.querySelector("textarea").value;
window.speechSynthesis.speak(speech);
});
우리는
SpeechSynthesisUtterance 현재 실행 중인 SpeechSynthesisUtterance 실례를 정지할 수 있습니다.파우스 단추를 선택하여 window.speechSynthesis.speak() 이벤트 탐지기를 추가하고, 이 단추를 눌렀을 때 일시 정지 SpeechSynthesisUtterance 실례를 추가합니다.document.querySelector("#pause").addEventListener("click", () => {
window.speechSynthesis.pause();
});
우리는
window.speechSynthesis.pause() 현재 정지된 click 실례를 복구할 수 있다.리소스 단추를 선택하고 SpeechSynthesisUtterance 이벤트 탐지기를 추가한 다음, 이 단추를 눌렀을 때 SpeechSynthesisUtterance 실례를 복원합시다.document.querySelector("#resume").addEventListener("click", () => {
window.speechSynthesis.resume();
});
우리는
window.speechSynthesis.resume() 현재 실행 중인 click 실례를 취소할 수 있습니다.cancel 단추를 선택하여 SpeechSynthesisUtterance 이벤트 탐지기를 추가하고, 이 단추를 눌렀을 때 SpeechSynthesisUtterance 실례를 취소합니다.document.querySelector("#resume").addEventListener("click", () => {
window.speechSynthesis.resume();
});
window.speechSynthesis.cancel()의 최종 버전:// Initialize new SpeechSynthesisUtterance object
let speech = new SpeechSynthesisUtterance();
// Set Speech Language
speech.lang = "en";
let voices = []; // global array of available voices
window.speechSynthesis.onvoiceschanged = () => {
// Get List of Voices
voices = window.speechSynthesis.getVoices();
// Initially set the First Voice in the Array.
speech.voice = voices[0];
// Set the Voice Select List. (Set the Index as the value, which we'll use later when the user updates the Voice using the Select Menu.)
let voiceSelect = document.querySelector("#voices");
voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
};
document.querySelector("#rate").addEventListener("input", () => {
// Get rate Value from the input
const rate = document.querySelector("#rate").value;
// Set rate property of the SpeechSynthesisUtterance instance
speech.rate = rate;
// Update the rate label
document.querySelector("#rate-label").innerHTML = rate;
});
document.querySelector("#volume").addEventListener("input", () => {
// Get volume Value from the input
const volume = document.querySelector("#volume").value;
// Set volume property of the SpeechSynthesisUtterance instance
speech.volume = volume;
// Update the volume label
document.querySelector("#volume-label").innerHTML = volume;
});
document.querySelector("#pitch").addEventListener("input", () => {
// Get pitch Value from the input
const pitch = document.querySelector("#pitch").value;
// Set pitch property of the SpeechSynthesisUtterance instance
speech.pitch = pitch;
// Update the pitch label
document.querySelector("#pitch-label").innerHTML = pitch;
});
document.querySelector("#voices").addEventListener("change", () => {
// On Voice change, use the value of the select menu (which is the index of the voice in the global voice array)
speech.voice = voices[document.querySelector("#voices").value];
});
document.querySelector("#start").addEventListener("click", () => {
// Set the text property with the value of the textarea
speech.text = document.querySelector("textarea").value;
// Start Speaking
window.speechSynthesis.speak(speech);
});
document.querySelector("#pause").addEventListener("click", () => {
// Pause the speechSynthesis instance
window.speechSynthesis.pause();
});
document.querySelector("#resume").addEventListener("click", () => {
// Resume the paused speechSynthesis instance
window.speechSynthesis.resume();
});
document.querySelector("#cancel").addEventListener("click", () => {
// Cancel the speechSynthesis instance
window.speechSynthesis.cancel();
});
결실
GitHub 페이지here를 사용하여 배포된 프로젝트를 볼 수 있습니다.
너도 본문GitHub Repository에서 최종 코드를 볼 수 있다.
한번 되돌아보도록 하겠습니다.
click 대상을 만들었다.SpeechSynthesisUtterance 실례의 여섯 가지 속성을 조정했다.그것들은 음고, 음량, 문자, 소리, 속도와 언어이다.textToSpeech.js를 눌렀을 때 제어할 수 있습니다.시작, 일시정지, 계속, 취소입니다.읽어주셔서 감사합니다!
Reference
이 문제에 관하여(JavaScript의 웹 음성 API를 사용하여 텍스트 음성 변환), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/zolomohan/text-to-speech-using-the-web-speech-api-in-javascript-2gfo텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
