不用AI也能實(shí)現(xiàn)的文字自動(dòng)播報(bào)(SpeechSynthesis文本實(shí)例合成)
背景
如果注意觀察的話，在現(xiàn)實(shí)生活中，你一定會(huì)遇到下列幾個(gè)場(chǎng)景，一起來看看有沒有熟悉的感覺。
場(chǎng)景一、某周某，小明和朋友一起去某美食街進(jìn)行聚餐，到了美食街找到一家推薦度非常高的美食店。由于推薦度非常高，需要等座，經(jīng)過簡(jiǎn)單的掃碼預(yù)約，小明拿到一個(gè)號(hào)（大桌xx號(hào)，還會(huì)顯示前面有多少桌），同時(shí)在等待窗口會(huì)有一個(gè)大屏展示，當(dāng)輪到小明可以去吃飯的吃飯，一定會(huì)有廣播，“請(qǐng)XX號(hào)到XX桌就餐”，而且會(huì)廣播好幾遍，以提醒小明前往就餐。
場(chǎng)景二、某日，小張身體不舒服，前往市里某三甲醫(yī)院就診，醫(yī)院也是人滿為患。與場(chǎng)景一相同的是，小張?jiān)趻焯?hào)后，在診室門口也會(huì)同樣的進(jìn)行排隊(duì)。不同的場(chǎng)景，相同的配方，都是會(huì)語(yǔ)音播報(bào)，“請(qǐng)XXX到506室就診”。
場(chǎng)景三、某日，視障人士趙大爺（聽力正常）要在某網(wǎng)站上瀏覽旅游網(wǎng)站，想去某地旅游。在老伴的幫助下，打開了網(wǎng)站，在進(jìn)入到景點(diǎn)頁(yè)面后，選擇景點(diǎn)播報(bào)按鈕，趙大爺可以聽到關(guān)于景點(diǎn)的詳細(xì)介紹，可以聽到網(wǎng)友的旅游攻略。
如上等等，都有一個(gè)共同的特點(diǎn)，在現(xiàn)實(shí)場(chǎng)景中，需要能動(dòng)態(tài)讀取一段文字，然后進(jìn)行相應(yīng)的播放，以起到通知和廣告的作用。本文將重點(diǎn)闡述基于Html5的speechSynthesis技術(shù)，實(shí)現(xiàn)文字自動(dòng)播放功能，最后通過對(duì)靜夜詩(shī)的賞析自動(dòng)播報(bào)來展示具體API的實(shí)際開發(fā)調(diào)用。
一、關(guān)于SpeechSynthesis
1、SpeechSynthesis簡(jiǎn)介
SpeechSynthesis是HTML5的一個(gè)新特性，基于SpeechSynthesis可以實(shí)現(xiàn)在客戶瀏覽器端進(jìn)行動(dòng)態(tài)文本的語(yǔ)音合成播放。在HTML5中和Web Speech相關(guān)的API實(shí)際上有兩類，一類是“語(yǔ)音識(shí)別(Speech Recognition)”，另外一個(gè)就是“語(yǔ)音合成(Speech Synthesis)”，這兩個(gè)名詞聽上去很高大上，實(shí)際上指的分別是“語(yǔ)音轉(zhuǎn)文字”，和“文字變語(yǔ)音”。而本文要介紹的就是這里的“語(yǔ)音合成-文字變語(yǔ)音”。為什么稱為“合成”呢？比方說你Siri發(fā)音“你好，世界！” 實(shí)際上是把“你”、“好”、“世”、“界”這4個(gè)字的讀音給合并在一起，因此，稱為“語(yǔ)音合成”。
2、SpeechSynthesis的核心類
SpeechSyntehesisUtteranc這個(gè)類主要用于控制合成聲音的屬性配置，比如主要內(nèi)容，語(yǔ)音模板，語(yǔ)速等等，通過這個(gè)核心類控制。它的屬性信息如下：
序號(hào) | 參數(shù) | 解釋 |
1 | text | 要合成的文字內(nèi)容，字符串 |
2 | lang | 使用的語(yǔ)言，字符串， 例如："zh-cn" |
3 | voiceURI | 指定希望使用的聲音和服務(wù)，字符串。 |
4 | volume | 聲音的音量，區(qū)間范圍是0到1，默認(rèn)是1 |
5 | rate | 語(yǔ)速，數(shù)值，默認(rèn)值是1，范圍是0.1到10，表示語(yǔ)速的倍數(shù)，例如2表示正常語(yǔ)速的兩倍。 |
6 | pitch | 表示說話的音高，數(shù)值，范圍從0（最?。┑?span style="font-size:9pt">2（最大）。默認(rèn)值為1 |
核心方法如下表所示：
序號(hào) | 方法名 | 說明 |
1 | onstart | 語(yǔ)音合成開始時(shí)候的回調(diào)。 |
2 | onpause | 語(yǔ)音合成暫停時(shí)候的回調(diào) |
3 | onresume | 語(yǔ)音合成重新開始時(shí)候的回調(diào) |
4 | onend | 語(yǔ)音合成結(jié)束時(shí)候的回調(diào) |
5 | onmark | Fired when the spoken utterance reaches a named SSML "mark" tag. |
其它更詳細(xì)的介紹可以參考以下地址Html Web API 接口。這里有更詳細(xì)的描述，還有詳細(xì)的示例。
var synth = window.speechSynthesis;
var voices = synth.getVoices();
var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('input');
var voiceSelect = document.querySelector('select');
for(var i = 0; i < voices.length; i++) {
var option = document.createElement('option');
option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
option.value = i;
voiceSelect.appendChild(option);
}
inputForm.onsubmit = function(event) {
event.preventDefault();
var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
utterThis.voice = voices[voiceSelect.value];
synth.speak(utterThis);
inputTxt.blur();
}
3、speechSynthesis對(duì)象
speechSynthesis是實(shí)際調(diào)用SpeechSynthesisUtterance對(duì)象進(jìn)行合成播報(bào)的。他的屬性和方法如下兩個(gè)表格描述。
序號(hào) | 名稱 | 描述 |
1 | paused | 當(dāng)SpeechSynthesis 處于暫停狀態(tài)時(shí)， Boolean (en-US) 值返回 true |
2 | pending | 當(dāng)語(yǔ)音播放隊(duì)列到目前為止保持沒有說完的語(yǔ)音時(shí)， Boolean (en-US) 值返回 true 。 |
3 | speaking | 當(dāng)語(yǔ)音談話正在進(jìn)行的時(shí)候，即使SpeechSynthesis處于暫停狀態(tài)， Boolean (en-US) 返回 true 。 |
var synth = window.speechSynthesis;
var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('.txt');
var voiceSelect = document.querySelector('select');
var pitch = document.querySelector('#pitch');
var pitchValue = document.querySelector('.pitch-value');
var rate = document.querySelector('#rate');
var rateValue = document.querySelector('.rate-value');
var voices = [];
function populateVoiceList() {
voices = synth.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);
}
}
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
inputForm.onsubmit = function(event) {
event.preventDefault();
var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
for(i = 0; i < voices.length ; i++) {
if(voices[i].name === selectedOption) {
utterThis.voice = voices[i];
}
}
utterThis.pitch = pitch.value;
utterThis.rate = rate.value;
synth.speak(utterThis);
inputTxt.blur();
}
在了解了SpeechSynthesis的相關(guān)對(duì)象的屬性和方法之后，就可以用來實(shí)現(xiàn)自己的語(yǔ)音播報(bào)功能。下一節(jié)中重點(diǎn)描述。
二、SpeechSynthesi文本實(shí)例合成
1、新建test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>網(wǎng)頁(yè)版文字轉(zhuǎn)語(yǔ)音朗讀功能</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>
<body>
<article>
<h3 align="center">請(qǐng)?jiān)谙旅嫖谋究蛑休斎胍首x的文本：</h3>
<p>
<textarea id="texts" rows="15" class="_play">本網(wǎng)頁(yè)版本語(yǔ)音合成播報(bào)支持Microsoft Edge等瀏覽器，不必連接網(wǎng)絡(luò)。</textarea>
</p>
<p>
<label>選擇播報(bào)語(yǔ)音：</label>
<select id="voiceSelect" onchange="play()"></select>
</p>
<button class="_search" onclick="play()">開始</button>
<button onclick="resume()">繼續(xù)</button>
<button onclick="pause()">暫停</button>
<!-- <button onclick="cancel()">清除隊(duì)列</button> -->
<button onclick="cls()">清空文本</button>
</article>
</body>
</html>
生成本地支持的語(yǔ)音模板，不同的瀏覽器獲取到的支持信息可能不一樣，大家可以根據(jù)實(shí)際情況添加，而且有的添加了也不一定支持播放。
//創(chuàng)建選擇語(yǔ)言的select標(biāo)簽
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) //2、定義相關(guān)播放方法
if(!('speechSynthesis' in window)) {
throw alert("對(duì)不起，您的瀏覽器不支持")
}
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;// 設(shè)置播放語(yǔ)速，范圍：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();
}
//繼續(xù)播放
function resume() {
myCheckFunc();//檢查文本框是否為空
window.speechSynthesis.resume(); //繼續(xù)
}
//清除所有語(yǔ)音播報(bào)創(chuàng)建的隊(duì)列
function cancel() {
window.speechSynthesis.cancel();
}
//清空文本框
function cls() {
document.getElementById("texts").value=""; 清空文本框
}
//檢查文本框是否為空
function myCheckFunc() {
let x;
x = document.getElementById("texts").value;
try {
if (x === "")
throw "文本框?yàn)榭?;
} catch (error) {
alert( "提示" + error);
}
}
3、本地語(yǔ)言支持
//創(chuàng)建選擇語(yǔ)言的select標(biāo)簽
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);
}
}
瀏覽器支持
以下是瀏覽器的支持情況，從圖中可以看到它的瀏覽器支持是不太全的，但基本覆蓋了主流瀏覽器，從使用場(chǎng)景上來說基本可以完成覆蓋。
三、總結(jié)
以上就是本文的主要內(nèi)容，本章重點(diǎn)介紹了Html5中SpeechSynthesis這個(gè)類，通過這個(gè)類完成了一個(gè)詩(shī)詞類賞析文本的播報(bào)功能，原始文件可以從基于HTML的文本語(yǔ)音自動(dòng)播報(bào)下載。帶上耳機(jī)，您可以聽到真實(shí)的語(yǔ)音播報(bào)。再回到本文最開始，如果要你實(shí)現(xiàn)一個(gè)排隊(duì)播報(bào)的功能，是否可以自行設(shè)計(jì)并達(dá)到要求呢？可以請(qǐng)大家自行嘗試。還有許多有意思的場(chǎng)景可以去探討，做成有意義的實(shí)際項(xiàng)目，行文倉(cāng)促，權(quán)當(dāng)拋磚引玉，如有不當(dāng)，敬請(qǐng)諒解。
到此這篇關(guān)于不用AI也能實(shí)現(xiàn)的文字自動(dòng)播報(bào)(SpeechSynthesis文本實(shí)例合成)的文章就介紹到這了,更多相關(guān)SpeechSynthesis語(yǔ)音合成內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Firefox 包含了一個(gè)非標(biāo)準(zhǔn)的 JavaScript 擴(kuò)展，使正則像函數(shù)一樣可調(diào)用。2008-04-04
這篇文章主要介紹了webpack獨(dú)立打包和緩存處理的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)webpack具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04
使用javascript實(shí)現(xiàn)頁(yè)面定時(shí)跳轉(zhuǎn)總結(jié)篇
下面對(duì)使用JavaScript實(shí)現(xiàn)頁(yè)面定時(shí)跳轉(zhuǎn)做一下總結(jié)，各種定時(shí)跳轉(zhuǎn)代碼記錄如下，希望對(duì)大家有所幫助2013-09-09
用JS將搜索的關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼
這篇文章介紹了JS將搜索的關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼，有需要的朋友可以參考一下2013-11-11
Js setInterval與setTimeout(定時(shí)執(zhí)行與循環(huán)執(zhí)行)的代碼(可以傳入?yún)?shù))
最近在做項(xiàng)目時(shí)用到了定時(shí)執(zhí)行的js方法，setInterval與setTimeout時(shí)間長(zhǎng)了不用有些生疏了，所以自己總結(jié)了一下，記下來，以便以后使用。2010-06-06
TypeScript環(huán)境搭建并且部署到VSCode的詳細(xì)步驟
本文給大家介紹TypeScript環(huán)境搭建并且部署到VSCode的詳細(xì)步驟，本文分步驟給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-11-11
JS數(shù)組方法reverse()用法實(shí)例分析
這篇文章主要介紹了JS數(shù)組方法reverse()用法,結(jié)合實(shí)例形式分析了JS數(shù)組reverse()方法基本功能、用法與操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
js仿百度登錄頁(yè)實(shí)現(xiàn)拖動(dòng)窗口效果
這篇文章主要為大家詳細(xì)介紹了js仿百度登錄頁(yè)實(shí)現(xiàn)拖動(dòng)窗口效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
Javascript動(dòng)態(tài)創(chuàng)建表格及刪除行列的方法
這篇文章主要介紹了Javascript動(dòng)態(tài)創(chuàng)建表格及刪除行列的方法,涉及javascript動(dòng)態(tài)操作表格的相關(guān)技巧,需要的朋友可以參考下2015-05-05
利用JQuery和JS實(shí)現(xiàn)奇偶行背景顏色自定義效果
本文將詳細(xì)介紹利用JQuery和JS實(shí)現(xiàn)奇偶行背景顏色自定義效果,需要的朋友可以參考下2012-11-11