前言
在现代化社会中，随着人口老龄化等社会问题不断加剧，关注无障碍服务已成为必然。无障碍服务涉及的领域之一便是语音服务，为有视觉障碍或身体残疾等行动不便的用户提供使用web的便利。本文将介绍无障碍语音服务的实现思路，并提供技巧性的代码示例。
实现思路
1. 文字转语音技术
实现无障碍语音服务需要先将页面内容转换为语音信息。现在主流的文本转语音技术是基于云端人工智能的，例如Google Cloud Text-to-Speech API、Microsoft Azure Speech Services等。
以 Google Cloud 为例，其使用如下：
-- -------------------- ---- -------
----- - ------------------ - - ----------------------------------------
----- -- - --------------
----- ------------------ - --- ---------------------
----- ------- - -
------ -
----- ----------------- -- -------
--
------ -
------------- --------
----------- ----------
--
------------ -
-------------- -----
--
--
-------------------------------------------- ----- --------- -- -
-- ------ -
----------------------------- ---------------------- --------- --- -- -
----------------- ----------
---
-
---在引用Google Cloud的 Text-to-Speech API前，我们需要先安装相关插件。执行以下指令进行安装：
npm i --save @google-cloud/text-to-speech
2. 语音播报技术
需要将文本转化为语音后，我们可以使用webkitSpeechRecognition API从客户端获取音频，并播放它。
-- -------------------- ---- -------
----- ------------------- - --- --------------------------
------------------------ - --------
---------------------------------- - -----
---------------------------------------------- ----- -- -
----- ---- - -------------------- - --
----- ---------- - ----------------------------------
-- ----------------------------- -
-- ----
-
---
----------------------------与文本转换服务一样，在启用时之前，我们需要确保webkitSpeechRecognition API得到了支持。你可以使用以下代码进行检查：
if ('webkitSpeechRecognition' in window) {
// If supported
} else {
// If not supported
}如果检查到浏览器不支持这个API，可以考虑在网页中提供文本复制和使用第三方语音播放器。
3. 隐含语义标记语言技术
为了进一步提高客户端感受，我们建议使用隐含语义标记语言（SSML）技术，该技术可以使语音更加自然。例如，使用音调、音量、停顿等控制文本转语音输出的细节。
<speak>
<voice name="en-GB-Standard-A">
<prosody rate="85%">Amazon Polly is a tool that turns text into lifelike speech.</prosody>
</voice>
<voice name="en-GB-Standard-B">
<prosody volume="-3dB" rate="x-slow">Amazon Polly is a tool that turns text into lifelike speech.</prosody>
</voice>
</speak>实际应用
实现无障碍语音服务的第一步是在网站的 UI 中添加一个 “听取页面”按键。点击此按钮后，开始使用文本转语音API将网站的内容转变成音频并在客户端播放25秒钟。
<button id="listenButton">听取页面</button>
-- -------------------- ---- -------
----------------------------------------------------------------- -- -- -
----- ------ - -------------------------------
----- ------ - - ----------- ------ ---------- ----- -------- ---- --
----- -------- - --------------- --------- -- -
--- ------ -------- -- -------------- -
-- -------------- --- ------------ -
---------------
-
-
--
----- -------- - --- ---------------------------
------------------------ --------
---------------
---
-------- -------------- -
----- ------ - --- ---------------------
----- ---- - -------------------------------------------------
----- ------- - -
------ -
----- ----------
--
------ -
------------- --------
--
------------ -
-------------- ------
--
--
-------------------------------- ----- --------- -- -
-- ----- -
-------------------- -------- ------ ---- -- ------ ------------ -- -----
-------
-
----- ----- - --- --------
-------------- - -----
--------- - ------------------------ - ----------------------
----------------------- -- -
-------------- - ------
---------------
---
---
-我们还可以加入隐含语义标记语言，使语音更加自然：
-- -------------------- ---- -------
---- -----------------
-------------------------------------------------------------------------------
----
--------------------------------------------
----------------------------------------
-------------------------
------------------ --- - - ----------
-----
-------- -------------------- ---- -------
----- ------ - --- ---------------------
-------- -------------- -
----- ---- - -
-------
------ -----------------------
-------- ----------- -----------
---------------------------------------------------
----------
--------
--------
--
----- ------- - -
------ - ----- ---- --
------ - ------------- -------- ----- ----------------- --
------------ - -------------- ----- --
--
-------------------------------- ----- --------- -- -
-- ----- -
-------------------- -------- ------ ---- -- ------ ------------ -- -----
-------
-
----- ----- - --- --------
--------- - ------------------------ - ----------------------
----------------------- -- -
---------------
---
---
-结论
以上就是实现无障碍语音服务的技术与思路的介绍。通过使用这些技巧，您可以在现有UI中为您的无障碍用户提供更大的可访问性。
希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672207772e7021665e09fff0