如何用 HTML+CSS+JavaScript 實現(xiàn)文本轉(zhuǎn)語音功能
在今天這篇教程中，我們將學(xué)習(xí)如何使用 HTML、CSS 和 JavaScript 實現(xiàn)一個文本轉(zhuǎn)語音功能。您只需輸入文本，選擇一種聲音，然后單擊“說話”即可?，F(xiàn)在是創(chuàng)建文本到語音轉(zhuǎn)換器 Web 應(yīng)用程序的時候了。
什么是文本到語音轉(zhuǎn)換器？
文字轉(zhuǎn)語音 (TTS) 技術(shù)，將您的書面文字呈現(xiàn)為口頭文字。有了這個工具，你可以把你的文字變成各種聲音的語音。（文本到語音轉(zhuǎn)換器應(yīng)用程序）。如果您的文本超過 80 個字符，您還可以通過按停止和通話按鈕暫停和恢復(fù)通話。
TTS 的目的是什么？
TTS 可以將來自計算機或其他數(shù)字設(shè)備的文本轉(zhuǎn)換為語音。TTS 除了對閱讀有困難的孩子非常有益外，還可以幫助孩子寫作、編輯，甚至集中注意力。
項目預(yù)覽截圖：
使用 HTML 和 JavaScript 的文本轉(zhuǎn)語音
文本轉(zhuǎn)語音 (TTS) 技術(shù)將您的文本轉(zhuǎn)換為語音。您可以使用此項目（文本到語音轉(zhuǎn)換器應(yīng)用程序）將文本轉(zhuǎn)換為不同聲音的語音。如果您的文本字符長度超過 80，您還可以使用停止和說話按鈕暫停和繼續(xù)。
它是用 HTML、CSS 和純 JavaScript 創(chuàng)建的。此 TTS 程序不使用外部 JavaScript 庫或 API，希望您會喜歡我們的文章。
現(xiàn)在，我們就開始吧。
第 1 步：文本轉(zhuǎn)語音添加HTML代碼
創(chuàng)建一個名為 index.html 的 HTML 文件并將以下代碼粘貼到其中。請記住使用 .html 擴展名保存文件。
<html lang="en"><head>
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<!-- Works best in Chrome! -->
<div class="voiceinator">
<h1>Text-To-Speech Converter</h1>
<select name="voice" id="voices">
<option value="">Select A Voice</option>
</select>
<label for="rate">Rate:</label>
<input name="rate" type="range" min="0" max="3" value="1" step="0.1">
<label for="pitch">Pitch:</label>
<input name="pitch" type="range" min="0" max="2" step="0.1">
<textarea name="text" placeholder="Start typing...">Follow CodewithRandom ????</textarea>
<button id="stop">Stop</button>
<button id="speak">Speak</button>
</div>
<script src="script.js"></script>
</body>
</html>我們將從添加項目的結(jié)構(gòu)開始，但首先我們需要在鏈接中包含某些項目，例如我們使用了多個 CSS 和 javascript 文件，我們需要將它們鏈接到我們的 HTML 中 文件。
//Head Section
<link rel="stylesheet" href="style.css">
//Body Section
<script src="script.js"></script>現(xiàn)在我們將文本到語音轉(zhuǎn)換器的結(jié)構(gòu)放在 body 標簽中。<div> 標簽將用于為我們的文本到語音轉(zhuǎn)換器構(gòu)建一個容器。
使用 <h1> 標簽，我們將在我們的 div 中為我們的文本到語音轉(zhuǎn)換器添加一個標題。
我們將向我們的文本到語音轉(zhuǎn)換器添加大量語音，并使用 <select> 元素為不同的語音生成備選列表。
現(xiàn)在我們將使用類型設(shè)置為范圍的 <input> 標簽添加兩個滑塊。第一個滑塊將用于更改語速。我們可以通過拖動滑塊來改變聲音的速度。第二個滑塊將用于在高音和低音之間調(diào)整聲音的音調(diào)。
現(xiàn)在，我們將利用 <textarea> 元素構(gòu)建一個文本區(qū)域，用戶可以在其中編寫文本，畫外音藝術(shù)家將閱讀它?，F(xiàn)在，我們將使用按鈕標簽制作兩個按鈕：停止和開始說話。
我們不需要任何其他東西來開發(fā)文本到語音轉(zhuǎn)換器的結(jié)構(gòu)。既然我們已經(jīng)學(xué)會了如何使用 CSS，我們就可以為 TTS 設(shè)置樣式了。但首先，讓我們看一下我們的框架。
第 2 步：添加 CSS 代碼
層疊樣式表 (CSS) 是一種標記語言，用于描述以 HTML 或 XML 編寫的文檔的呈現(xiàn)方式。CSS 與 HTML 和 JavaScript 一樣，是WEB開發(fā)的重要組成部分。創(chuàng)建一個名為 style.css 的 CSS 文件，并將以下代碼粘貼到其中。始終使用 .css 擴展名保存文件。
@import url("https://fonts.googleapis.com/css?family=PT+Sans");html {
font-size: 10px;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: "PT Sans", sans-serif;
background-color: #d5d9e5;
color: #292b2c;
display: flex;
min-height: 100vh;
align-items: center;
}
.voiceinator {
padding: 2rem;
width: 50rem;
margin: 0 auto;
border-radius: 1rem;
position: relative;
background: #fff;
overflow: hidden;
z-index: 1;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
}
h1 {
width: calc(100% + 4rem);
margin: 0 0 2rem -2rem;
padding: 0.5rem;
text-align: center;
font-size: 4rem;
font-weight: 100;
font-family: "PT Sans", sans-serif;
}
.voiceinator input,
.voiceinator button,
.voiceinator select,
.voiceinator textarea {
width: 100%;
display: block;
margin: 10px 0;
padding: 10px;
font-size: 2rem;
background: #fbfbfc;
outline: 0;
font-family: "PT Sans", sans-serif;
border: 1px solid #c8c7cb;
border-radius: 2px;
}
label {
font-size: 2rem;
}
textarea {
height: 20rem;
}
.voiceinator button {
background: #72a3da;
color: #fff;
border: 0;
width: 49%;
float: left;
font-family: "PT Sans", sans-serif;
margin-bottom: 0;
font-size: 2rem;
cursor: pointer;
position: relative;
}
.voiceinator button:active {
top: 2px;
}
.voiceinator button:nth-of-type(1) {
margin-right: 2%;
}
input[type="range"] {
-webkit-appearance: none;
border: 1px solid transparent;
padding-top: 8px;
background: #fff;
}
input[type="range"]::-webkit-slider-runnable-track {
height: 5px;
background: #e1e1e3;
border: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 14px;
width: 14px;
border-radius: 50%;
background: #72a3da;
margin-top: -4px;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
input[type="range"]::-moz-range-track {
height: 5px;
background: #e1e1e3;
border: none;
}
input[type="range"]::-moz-range-thumb {
border: none;
height: 14px;
width: 14px;
border-radius: 50%;
background: #72a3da;
}
input[type="range"]:-moz-focusring {
outline: 1px solid #dcdde2;
outline-offset: -1px;
}
.voiceinator select {
display: inline-block;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
outline: none;
background: #fbfbfc
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23c8c7cb" viewBox="0 0 20 20"><path d="M5 8l6 6 6-6z"/></svg>')
right 5px center no-repeat;
padding: 10px 40px 10px 10px;
}
select::-ms-expand {
display: none;
}第一步：首先使用谷歌導(dǎo)入鏈接導(dǎo)入谷歌字體的鏈接。我們現(xiàn)在將使用 HTML 標簽選擇器向我們的主體添加樣式。我們將使用 font-size 屬性調(diào)整 body 的字體大小，并使用 box-sizing 屬性將 box-sizing 設(shè)置為“border-box”。我們還將 margin 和 padding 設(shè)為“0”。
使用 background 屬性，我們將背景更改為淺藍色，并將顯示設(shè)置為 flex 。使用 align-item 屬性，我們會將項目對齊到“center”。
@import url("https://fonts.googleapis.com/css?family=PT+Sans");html {
font-size: 10px;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: "PT Sans", sans-serif;
background-color: #d5d9e5;
color: #292b2c;
display: flex;
min-height: 100vh;
align-items: center;
}第 2 步：我們現(xiàn)在將使用類選擇器 (.voicenator) 向我們的容器添加樣式。為了提供一些平滑的邊緣，我們將添加 20px 的填充，將寬度設(shè)置為 50rem，并使用 border radius 屬性添加 1rem 的邊框半徑。我們將使用 box-shadow 屬性向我們的 TTS 轉(zhuǎn)換器添加一個框陰影。
.voiceinator {
padding: 2rem;
width: 50rem;
margin: 0 auto;
border-radius: 1rem;
position: relative;
background: #fff;
overflow: hidden;
z-index: 1;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
}第 3 步：現(xiàn)在我們將使用標簽選擇器 (h1) 為我們的 HTML 元素添加樣式，計算寬度，并為我們的標題添加額外的 4 rem 和 100% 寬度。我們還將使用 text-align 屬性使文本居中，并使用 font-family 屬性將字體系列設(shè)置為“PT-Sans”。
使用多類選擇器，我們將向輸入、按鈕、選擇和文本區(qū)域添加通用樣式。我們將它們的寬度設(shè)置為 100%，并將顯示屬性設(shè)置為“block”。
我們還將插入一些填充和邊距。我們將背景設(shè)為白色，邊框為 2 像素純灰色。
h1 {
width: calc(100% + 4rem);
margin: 0 0 2rem -2rem;
padding: 0.5rem;
text-align: center;
font-size: 4rem;
font-weight: 100;
font-family: "PT Sans", sans-serif;
}.voiceinator input,
.voiceinator button,
.voiceinator select,
.voiceinator textarea {
width: 100%;
display: block;
margin: 10px 0;
padding: 10px;
font-size: 2rem;
background: #fbfbfc;
outline: 0;
font-family: "PT Sans", sans-serif;
border: 1px solid #c8c7cb;
border-radius: 2px;
}第4步：現(xiàn)在我們需要做的就是設(shè)置標簽和按鈕的樣式。我們的標簽將具有 2 rem 的字體大小和 20 px 的文本區(qū)域高度。
我們現(xiàn)在將使用輸入類型選擇器“范圍”為我們的輸入類型添加一些高度和背景顏色使用類選擇器將使我們的選項顯示為“內(nèi)聯(lián)塊”和背景的 SVG。
label {
font-size: 2rem;
}textarea {
height: 20rem;
}
.voiceinator button {
background: #72a3da;
color: #fff;
border: 0;
width: 49%;
float: left;
font-family: "PT Sans", sans-serif;
margin-bottom: 0;
font-size: 2rem;
cursor: pointer;
position: relative;
}
.voiceinator button:active {
top: 2px;
}
.voiceinator button:nth-of-type(1) {
margin-right: 2%;
}
input[type="range"] {
-webkit-appearance: none;
border: 1px solid transparent;
padding-top: 8px;
background: #fff;
}
input[type="range"]::-webkit-slider-runnable-track {
height: 5px;
background: #e1e1e3;
border: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 14px;
width: 14px;
border-radius: 50%;
background: #72a3da;
margin-top: -4px;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
input[type="range"]::-moz-range-track {
height: 5px;
background: #e1e1e3;
border: none;
}
input[type="range"]::-moz-range-thumb {
border: none;
height: 14px;
width: 14px;
border-radius: 50%;
background: #72a3da;
}
input[type="range"]:-moz-focusring {
outline: 1px solid #dcdde2;
outline-offset: -1px;
}
.voiceinator select {
display: inline-block;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
outline: none;
background: #fbfbfc
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23c8c7cb" viewBox="0 0 20 20"><path d="M5 8l6 6 6-6z"/></svg>')
right 5px center no-repeat;
padding: 10px 40px 10px 10px;
}
select::-ms-expand {
display: none;
}使用 HTML、CSS 和 Javascript 的文本到語音轉(zhuǎn)換器。
第 3 步：文本轉(zhuǎn)語音 Html 代碼：
最后，創(chuàng)建一個名為 script.js 的 JavaScript 文件并將以下代碼粘貼到其中。請記住以 .js 擴展名保存文件。
const msg = new SpeechSynthesisUtterance();
let voices = [];
const voicesDropdown = document.querySelector('[name="voice"]');
const options = document.querySelectorAll('[type="range"], [name="text"]');
const speakButton = document.querySelector("#speak");
const stopButton = document.querySelector("#stop");
msg.text = document.querySelector('[name="text"]').value;function populateVoices() {
voices = this.getVoices();
voicesDropdown.innerHTML = voices
.filter((voice) => voice.lang.includes("en"))
.map(
(voice) =>
`<option value="${voice.name}">${voice.name} (${voice.lang})</option>`
)
.join("");
}
function setVoice() {
msg.voice = voices.find((voice) => voice.name === this.value);
toggle();
}
function toggle(startOver = true) {
speechSynthesis.cancel();
if (startOver) {
speechSynthesis.speak(msg);
}
}
function setOption() {
console.log(this.name, this.value);
msg[this.name] = this.value;
toggle();
}
speechSynthesis.addEventListener("voiceschanged", populateVoices);
voicesDropdown.addEventListener("change", setVoice);
options.forEach((option) => option.addEventListener("change", setOption));
speakButton.addEventListener("click", toggle);
stopButton.addEventListener("click", () => toggle(false));首先，我們將使用 new 關(guān)鍵字創(chuàng)建變量 message 的實例，并使用 let 關(guān)鍵字建立一個空的語音數(shù)組。
我們將選擇所有 HTML 元素并使用 document.queryselector() 方法將它們的值存儲在常量變量中。
現(xiàn)在我們將保存消息變量的值并使用文檔來選擇文本區(qū)域的內(nèi)容。具有 HTML 名稱的查詢選擇器。
現(xiàn)在我們將在函數(shù)內(nèi)部創(chuàng)建一個函數(shù) populatevoices()，使用 this.getVoices() 方法返回一個 SpeechSynthesisVoice 對象列表，表示當前設(shè)備上所有可用的語音。
現(xiàn)在我們將為它設(shè)置聲音，我們將創(chuàng)建一個設(shè)置聲音的 setvoice() 函數(shù)。
我們將創(chuàng)建一個帶有參數(shù) startover = true 的切換函數(shù)，如果 speech.synthesis 那么語音將在文本區(qū)域中說出消息。
現(xiàn)在我們將事件監(jiān)聽器添加到語音更改、停止和說話按鈕。
現(xiàn)在我們已經(jīng)使用 HTML、CSS 和 javascript 完成了文本轉(zhuǎn)語音。我希望你理解整個項目。
現(xiàn)在，我們已經(jīng)使用 HTML、CSS 和 javascript 成功地創(chuàng)建了文本轉(zhuǎn)語音。您可以通過將此項目復(fù)制到您的 IDE 中來直接使用它。
