使用HTML5+JS實現文字轉語音

用HTML5+JS實現文字轉語音

現在越來越多的視頻采用了AI語音，下面給大家介紹幾種簡單的文字轉語音的辦法，完全免費的歐。

使用HTML5語音合成API-SpeechSynthesis實現的文字轉語音

因為SpeechSynthesis完全是由瀏覽器端實現的文字轉語音，大家可以用下面命令測試一下自己使用的瀏覽器支持哪些文字轉成語音，方法很簡單。

打開瀏覽器任意頁面，點擊F12打開瀏覽器調試控制臺，
點擊【控制臺】或者是【console】切換到控制臺頁面，在提示符>位置輸入speechSynthesis.getVoices()并回車。
有些瀏覽器控制臺默認是禁止復制粘貼的這調代碼有可能要手動輸入allow pasting來啟用復制粘貼。
不同瀏覽器支持的語音數量不同，edge支持最多有302種

Chrome支持也不少

而maxthon就支持一種

注意這個支持多寡和當前使用的操作系統版本，瀏覽器內核版本也有一定關系，各瀏覽器支持情況參考下表，數字代表開始支持的內核版本。

下面來看看用html5+js代碼怎樣實現一個簡單的頁面來實現文字轉語音

先用html語言寫一個簡單的頁面，代碼如下：

<!DOCTYPE html>
<html>

<head>
<title>HTML5+JS實現文字轉語音朗讀功能</title>
</head>

<body>
<article>
<h3 align="center">請在下面文本框中輸入要轉換的文字：</h3>
<p>
<textarea id="texts" rows="15" class="_play">使用瀏覽器實現文字轉語音，不需要網絡。</textarea>
</p>
<p>
<label>選擇轉換語音：</label>
<select id="voiceSelect" onchange="play()"></select>
</p>
<button class="_search" onclick="play()">開始</button>
<button onclick="resume()">繼續</button>
<button onclick="pause()">暫停</button>
<!-- <button onclick="cancel()">清除隊列</button> -->
<button onclick="cls()">清空文文字</button>
</article>
</body>
</html>

效果是這樣的：

看起來比較丑，可以在<head>標簽里面加上css代碼，使頁面看起來好看一點

<head>
<title>HTML5+JS實現文字轉語音朗讀功能</title>
<style>
article {margin: 0 auto;max-width: 800px;text-align: center;}
textarea {max-width: 600px;width:100%;text-align: left;}
button{border-radius: 3px;border: 1px solid #dddddd;height: 30px;width: 80px;cursor: pointer;}
</style>
</head>

效果如下：

為選擇轉換語音的選擇框添加js代碼

<script>
var to_speak = window.speechSynthesis;
var voiceSelect = document.querySelector("#voiceSelect");
var voices = [];
//創建選擇語言的select標簽
function populateVoiceList() {
voices = speechSynthesis.getVoices();
for(i = 0; i < voices.length; i++) {
var option = document.createElement('option');
option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
if(voices[i].default) {
option.textContent += ' -- DEFAULT';
}
option.setAttribute('data-lang', voices[i].lang);
option.setAttribute('data-name', voices[i].name);
voiceSelect.appendChild(option);
}
}

setTimeout(function() {
populateVoiceList();
}, 500) //
</script>

這樣刷新頁面后選擇轉換語音的選擇框后面就出現一個下拉列表，里面列出了瀏覽器支持的語音。

后面為各按鈕添加js代碼：

開始：

var _play = document.querySelector("._play");
var dataName;
//清除所有語音播報創建的隊列
function cancel() {
window.speechSynthesis.cancel();
}
function play() {
cancel(); //一定要加這個，不加的話瀏覽器會不發聲。
to_speak = new SpeechSynthesisUtterance(_play.value);

//to_speak.rate = 1.4;// 設置播放語速，范圍：0.1 - 10之間

var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
for(i = 0; i < voices.length; i++) {
if(voices[i].name === selectedOption) {
to_speak.voice = voices[i];
}
}

window.speechSynthesis.speak(to_speak);

}

繼續，暫停，清空文字：

//暫停
function pause() {
window.speechSynthesis.pause();
}
//繼續播放
function resume() {
window.speechSynthesis.resume(); //繼續
}
//清除所有語音播報創建的隊列
function cancel() {
window.speechSynthesis.cancel();
}
//清空文本框
function cls() {
document.getElementById("texts").value=""; 清空文本框
}

可以在播放、暫停和繼續播放里面加上檢測文本框內是否有文字的函數，有文字才播放。

//檢查文本框是否為空

function myCheckFunc() {

let x;

x = document.getElementById("texts").value;

try {

if (x === "")

throw "文本框為空";

} catch (error) {

alert( "提示" + error);

}

完整js代碼如下：

<script>
if(!('speechSynthesis' in window)) {
throw alert("對不起，您的瀏覽器不支持")
}

var _play = document.querySelector("._play"),
to_speak = window.speechSynthesis,
dataName, voiceSelect = document.querySelector("#voiceSelect"),
voices = [];

function play() {
myCheckFunc();//檢查文本框是否為空
cancel(); //
to_speak = new SpeechSynthesisUtterance(_play.value);

//to_speak.rate = 1.4;// 設置播放語速，范圍：0.1 - 10之間

var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
for(i = 0; i < voices.length; i++) {
if(voices[i].name === selectedOption) {
to_speak.voice = voices[i];
}
}

window.speechSynthesis.speak(to_speak);

}

//暫停
function pause() {
myCheckFunc();//檢查文本框是否為空
window.speechSynthesis.pause();
}
//繼續播放
function resume() {
myCheckFunc();//檢查文本框是否為空
window.speechSynthesis.resume(); //繼續
}
//清除所有語音播報創建的隊列
function cancel() {
window.speechSynthesis.cancel();
}
//清空文本框
function cls() {
document.getElementById("texts").value=""; 清空文本框
}
//檢查文本框是否為空
function myCheckFunc() {
let x;
x = document.getElementById("texts").value;
try {
if (x === "")
throw "文本框為空";

} catch (error) {
alert( "提示" + error);
}
}

//創建選擇語言的select標簽
function populateVoiceList() {
voices = speechSynthesis.getVoices();
for(i = 0; i < voices.length; i++) {
var option = document.createElement('option');
option.textContent = voices[i].name + ' (' + voices[i].lang + ')';

if(voices[i].default) {
option.textContent += ' -- DEFAULT';
}
option.setAttribute('data-lang', voices[i].lang);
option.setAttribute('data-name', voices[i].name);
voiceSelect.appendChild(option);
}
}

setTimeout(function() {
populateVoiceList();
}, 500) //
</script>

這樣一個簡單的文字轉語音的網頁就做好了，而且不依賴網絡，沒網的時候也可轉換，而且使用win10系統，EDGE瀏覽器支持100多種文字。

有個小問題就是，這樣轉換瀏覽器會直接發聲，而不是輸出為文件，這個問題可以用錄屏軟件或者錄音軟件例如Adobe Audition，Cool Edit Pro等解決。

用edge播放文本內容

這種方式更簡單一點，步驟如下：

新建一個txt文件里面輸入要轉的內容，然后用EDGE瀏覽器打開這個問題文件.
點擊地址欄右側大聲朗讀按鈕

在彈出的朗讀此頁內容工具條上點擊【語音選項】，在彈出的對話框上可以設置語音的速度和語音的類型。選好之后點工具條上播放按鈕就可以播放了。

使用EDGE插件實現轉換

(1)在EDGE瀏覽器點擊右上角三個點，打開edge瀏覽器選項菜單，點擊【擴展】，打開擴展對話框，選擇打開Microsoft edge加載項

在搜索框輸入voice remaker，添加這個擴展

添加成功后，點擊瀏覽器地址欄后面的擴展圖標打開這個擴展，在彈出的對話框的文本框里面輸入要轉的文字，在voice下拉列表選擇要轉的語音點擊【convert to speech】,等待片刻就可以在下面看到轉好的語音文件，可以點擊下載來下載這個文件。

用PC端工具調用edge瀏覽器語音轉換功能實現轉換

推薦大家用edge-TTS-record這個工具版本V0.1.1,這個工具既不要錢也不需要登陸。

在文本框里輸入文字，【朗讀者】選擇語音，可以點【試聽】按鈕試聽一下，點【錄制】即可保存為wav文件。

以上這幾種方式所使用的語音轉換引擎是一樣的都是調用edge瀏覽器的SpeechSynthesis功能，所以它們里面可選擇的語音是一樣的，一般都是有幾百種，這種方式轉換出來的語音，雖然聽起來有點機械，但是對應普通的視頻配音來說完全足夠了。

通訊應用和聊天界面中，當你正在與對方交談時對方正在輸入一條信息，會有一個小的氣泡動畫或者文案提示。本文將探討使用現代 CSS 來實現這一動畫效果，首先會實現一個 Blink 效果的動畫，然后實現一個波浪效果動畫，最后實現一個語音氣泡效果。

1.效果預覽

1）Blink 效果：

2）Wave 效果：

3）語音氣泡效果：

2.實現方案

2.1.快速創建頁面和容器

通過 html:5 和 div.container>(div.dot)*3 快速創建頁面及容器。

<div class="container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

2.2.增加基礎樣式

1）容器居中：

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  margin: 0;
}

2）容器樣式：

注意：此處使用了現代CSS 原生嵌套（參考鏈接：）

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;

  background: #e2e8f0;
  border-radius: 9999px;
  padding: 1rem;
  .dot {
    border-radius: 9999px;
    height: 0.5rem;
    width: 0.5rem;
    background: #93a2b7;
  }
}

2.3.實現動畫

1）Blink 效果：

核心思想是通過給dot 元素設置 opacity 設置屬性來改變其透明度，同時對 3 個 dot 的透明度變化設置不同的動畫延遲 animation-delay 屬性來實現閃爍的效果。

.container {
  .dot {
    opacity: 0;
    animation: blink 1s infinite;
    &:nth-child(1) {
      animation-delay: 0.3333s;
    }
    &:nth-child(2) {
      animation-delay: 0.6666s;
    }
    &:nth-child(3) {
      animation-delay: 0.9999s;
    }
  }
}
@keyframes blink {
  50% {
    opacity: 1;
  }
}

2）Wave 效果：

核心思想：給 dot 元素增加 transform 屬性，設置 translateY 的值將目標元素從下至上垂直重新定位，同時在動畫關鍵幀 keyframes 中對顏色進行調整。

  .container {
    .dot {
      animation: wave 1s infinite;
    }
  }
  @keyframes wave {
    0% {
      transform: translateY(0px);
      background: rgba(148 163 184 / 0);
    }
    25% {
      transform: translateY(-0.25rem);
      background: rgba(148 163 184 / 0.8);
    }
    50% {
      transform: translateY(0px);
      background: rgba(148 163 184 / 0);
    }
    75% {
      transform: translateY(0.25rem);
      background: rgba(148 163 184 / 0.8);
    }
    100% {
      transform: translateY(0);
      background: rgba(148 163 184 / 0);
    }
  }

2）語音氣泡效果：

語音氣泡是以可視化方式顯示對話或思想的一種流行而有效的方法。你可能在漫畫、卡通、廣告和社交媒體文章中見過它們。它們為設計增添了幽默、情感和個性，同時也為觀眾提供了語境。此外，語音氣泡布局還可以將文字較多的設計分割開來，使其更加吸引人。

核心思想：在 wave 效果的基礎上，對 .contianer 容器增加 ::before 和 ::after 兩個偽元素來實現左下角的圓圈，同時動畫中增加對整個容器的放大和縮小 scale 動畫，并采用 ease-out 函數。

.container {
  animation: 2s zoom infinite ease-out;
  position: relative;

  &::before,
  &::after {
    content: '';
    position: absolute;
    border-radius: 9999px;
    background: rgb(226 232 240);
    bottom: 0;
    left: 0;
  }
  &::before {
    height: 1rem;
    width: 1rem;
    transform: translate(-0.125rem, 0.125rem);
  }
  &::after {
    height: 0.5rem;
    width: 0.5rem;
    transform: translate(-0.5rem, 0.5rem);
  }
  .dot {
    border-radius: 9999px;
    height: 0.5rem;
    width: 0.5rem;
    background: rgba(148 163 184 / 1);
    animation: wave 1.2s infinite;
    &:nth-child(1) {
      animation-delay: 0.4s;
    }
    &:nth-child(2) {
      animation-delay: 0.8s;
    }
    &:nth-child(3) {
      animation-delay: 1.2s;
    }
  }
}
@keyframes zoom {
  50% {
    transform: scale(1.1);
  }
}

如果本文對您有幫助，歡迎關注、點贊和轉發，感謝您的支持！

覺樣式表使用了語音合成和聲音效果的結合，讓用戶收聽信息，而不是讀取信息。

有聲顯示可用于：

失明人士
幫助用戶學習閱讀
幫助具有閱讀問題的用戶
家庭娛樂
在車上

聽覺呈現通常會把文檔轉化為純文本，然后傳給屏幕閱讀器（可讀出屏幕上所有字符的一種程序）。

聽覺樣式表的一個例子：

h1,h2,h3,h4

{

voice-family:male;

richness:80;

cue-before:url("beep.au")

}

上面的例子用語音合成器播放聲音，開頭有一個男性的聲音說話。

CSS 語音參考手冊

CSS"列表示在CSS版本的屬性定義（CSS1或CSS2）。

Property	Description	Values	CSS
azimuth	設置聲音應該來自哪里	angleleft-sidefar-leftleftcenter-leftcentercenter-rightrightfar-rightright-sidebehindleftwardsrightwards	2
cue	在一個聲明中設置cue屬性	cue-beforecue-after	2
cue-after	指定要播放的聲音在一個元素的內容后面	noneurl	2
cue-before	指定要播放的聲音在一個元素的內容前面	noneurl	2
elevation	設置聲音應該來自哪里	anglebelowlevelabovehigherlower	2
pause	在一個聲明中設置pause屬性	pause-beforepause-after	2
pause-after	在一個元素的內容之后，指定暫停	time%	2
pause-before	在一個元素的內容之前，指定暫停	time%	2
pitch	指定講話聲音	frequencyx-lowlowmediumhighx-high	2
pitch-range	指定講話聲音的變化。（單調的聲音或動態的聲音？）	number	2
play-during	指定在讀一個元素的內容時要播放的聲音	autononeurlmixrepeat	2
richness	指定豐富的講話聲音。（渾厚的聲音或細的聲音？）	number	2
speak	指定內容是否會提供聽覺方式	normalnonespell-out	2
speak-header	此屬性設置或檢索表格標題是在所有的單元格之前發聲，還是到一個不與之關聯的單元格就結束發聲。	alwaysonce	2
speak-numeral	設置或檢索數字如何發音。	digitscontinuous	2
speak-punctuation	設置或檢索標點字符如何發音	nonecode	2
speech-rate	指定發言速度	numberx-slowslowmediumfastx-fastfasterslower	2
stress	講話聲音在指定的地方"重音"	number	2
voice-family	設置或檢索當前聲音類型	specific-voicegeneric-voice	2
volume	指定發言的音量	number%silentx-softsoftmediumloudx-loud	2

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：玩轉前端 Video 播放器
下一篇：HTML基礎的 <link> 標簽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。