zoukankan      html  css  js  c++  java

  • 网页中文本朗读功能开发实现

     

    前几天完成了一个需求，在网页中完成鼠标指向哪里，就用语音读出所指的文本。如果是按钮、链接、文本输入框，则还还要给出是什么的提醒。同时针对大段的文本，不能整段的去读，要按照标点符号进行断句处理。

    重点当然就是先获取到当前标签上的文本，再把文本转化成语音即可。

    标签朗读

    这个很简单了，只用根据当前是什么标签，给出提示即可。

    1. // 标签朗读文本

    2. var tagTextConfig = {

    3.    'a': '链接',

    4.    'input[text]': '文本输入框',

    5.    'input[password]': '密码输入框',

    6.    'button': '按钮',

    7.    'img': '图片'

    8. };

    还有需要朗读的标签，继续再添加即可。

    然后根据标签，返回前缀文本即可。

    1. /**

    2. * 获取标签朗读文本

    3. * @param {HTMLElement} el 要处理的HTMLElement

    4. * @returns {String}   朗读文本

    5. */

    6. function getTagText(el) {

    7.    if (!el) return '';

    9.    var tagName = el.tagName.toLowerCase();

    11.    // 处理input等多属性元素

    12.    switch (tagName) {

    13.        case 'input':

    14.            tagName += '[' + el.type + ']';

    15.            break;

    16.        default:

    17.            break;

    18.    }

    20.    // 标签的功能提醒和作用应该有间隔，因此在最后加入一个空格

    21.    return (tagTextConfig[tagName] || '') + ' ';

    22. }

    获取完整的朗读文本就更简单了，先取标签的功能提醒，再取标签的文本即可。

    文本内容优先取 title 其次 alt 最后 innerText。

    1. /**

    2. * 获取完整朗读文本

    3. * @param {HTMLElement} el 要处理的HTMLElement

    4. * @returns {String}   朗读文本

    5. */

    6. function getText(el) {

    7.    if (!el) return '';

    9.    return getTagText(el) + (el.title || el.alt || el.innerText || '');

    10. }

    这样就可以获取到一个标签的功能提醒和内容的全部带朗读文本了。

    正文分隔

    接下来要处理的就是正文分隔了，在这个过程中，踩了不少坑，走了不少弯路，好好记录一下。

    首先准备了正文分隔的配置：

    1. // 正文拆分配置

    2. var splitConfig = {

    3.    // 内容分段标签名称

    4.    unitTag: 'p',

    5.    // 正文中分隔正则表达式

    6.    splitReg: /[,;，；。]/g,

    7.    // 包裹标签名

    8.    wrapTag: 'label',

    9.    // 包裹标签类名

    10.    wrapCls: 'speak-lable',

    11.    // 高亮样式名和样式

    12.    hightlightCls: 'speak-help-hightlight',

    13.    hightStyle: 'background: #000!important; color: #fff!important'

    14. };

    最开始想的就是直接按照正文中的分隔标点符号进行分隔就好了呀。

    想法如下：

    1. 获取段落全部文本

    2. 使用 split(分隔正则表达式) 方法将正文按照标点符号分隔成小段

    3. 每个小段用标签包裹放回去即可

    然而理想很丰满，现实很骨感。

    两个大坑如下：

    1. split 方法进行分隔，分隔后分隔字符就丢了，也就是说把原文的一些标点符号给弄丢了。

    2. 如果段落内还存在其他标签，而这个标签内部也正好存在待分隔的标点符号，那包裹分段标签时直接破换了原标签的完整性。

    关于第一个问题，丢失标点的符号，考虑过逐个标点来进行和替换 split 分隔方法为逐个字符循环来做。

    前者问题是原本一次完成的工作分成了多次，效率太低。第二种感觉效率更低了，分隔本来是很稀疏的，但是却要变成逐个字符出判断处理，更关键的是，分隔标点的位置要插入包裹标签，会导致字符串长度变化，还要处理下标索引。代码是机器跑的，或许不会觉得烦，但是我真的觉得好烦。如果这么干，或许以后哪个AI或者同事看到这样的代码，说不定会说“这真是个傻xxxx”。

    第二个问题想过很多办法来补救，如先使用正则匹配捕获内容中成对的标签，对标签内部的分隔先处理一遍，然后再处理整个的。

    想不明白问题二的，可参考一下待分隔的段落:

    1. <p>这是一段测试文本，这里有个链接。<a>您好，可以点击此处进行跳转</a>还有其他内容其他内容容其他内容容其他内容，容其他内容。</p>

    如先使用 /<((w+?)>)(.+?)</2(?=>)/g 正则，依次捕获段落内被标签包裹的内容，对标签内部的内容先处理。

    但是问题又来了，这么处理的都是字符串，在js中都是基本类型，这些操作进行的时候都是在复制的基础上进行的，要修改到原字符串里去，还得记录下原本的开始结束位置，再将新的插进去。繁，还是繁，但是已经比之前逐个字符去遍历的好，正则捕获中本来就有了匹配的索引，直接用即可，还能接受。

    但是这只是处理了段落内部标签的问题，段落内肯定还有很多文本是没有处理呢，怎么办？

    正则匹配到了只是段落内标签的结果啊，外面的没有啊。哦，对，有匹配到的索引，上次匹配到的位置加上上次处理的长度，就是一段直接文本的开始。下一次匹配到的索引-1就是这段直接文本的结束。这只是匹配过程中的，还有首尾要单独处理。又回到烦的老路上去了。。。

    这么烦，一个段落分隔能这么繁琐，我不信！

    突然想到了，有文本节点这么个东西，删繁就简嘛，正则先到边上去，直接处理段落的所有节点不就行了。

    文本节点则分隔直接包裹，标签节点则对内容进行包裹，这种情况下处理的直接是dom，更省事。

    文本节点里放标签？这是在开玩笑么，是也不是。文本节点里确实只能放文本，但是我把标签直接放进去，它会自动转义，那最后再替换出来不就行了。

    好了，方案终于有了，而且这个方案逻辑多简单，代码逻辑自然也不会烦。

    1. /**

    2. * 正文内容分段处理

    3. * @param {jQueryObject/HTMLElement/String}  $content 要处理的正文jQ对象或HTMLElement或其对应选择器

    4. */

    5. function splitConent($content) {

    6.    $content = $($content);

    8.    $content.find(splitConfig.unitTag).each(function (index, item) {

    9.        var $item = $(item),

    10.            text = $.trim($item.text());

    11.        if (!text) return;

    13.        var nodes = $item[0].childNodes;

    15.        $.each(nodes, function (i, node) {

    16.            switch (node.nodeType) {

    17.                case 3:

    18.                    // text 节点

    19.                    // 由于是文本节点，标签被转义了，后续再转回来

    20.                    node.data = '<' + splitConfig.wrapTag + '>' +

    21.                        node.data.replace(splitConfig.splitReg, '</' + splitConfig.wrapTag + '>$&<' + splitConfig.wrapTag + '>') +

    22.                        '</' + splitConfig.wrapTag + '>';

    23.                    break;

    24.                case 1:

    25.                    // 元素节点

    26.                    var innerHtml = node.innerHTML,

    27.                        start = '',

    28.                        end = '';

    29.                    // 如果内部还有直接标签，先去掉

    30.                    var startResult = /^<w+?>/.exec(innerHtml);

    31.                    if (startResult) {

    32.                        start = startResult[0];

    33.                        innerHtml = innerHtml.substr(start.length);

    34.                    }

    35.                    var endResult = /</w+?>$/.exec(innerHtml);

    36.                    if (endResult) {

    37.                        end = endResult[0];

    38.                        innerHtml = innerHtml.substring(0, endResult.index);

    39.                    }

    40.                    // 更新内部内容

    41.                    node.innerHTML = start +

    42.                        '<' + splitConfig.wrapTag + '>' +

    43.                        innerHtml.replace(splitConfig.splitReg, '</' + splitConfig.wrapTag + '>$&<' + splitConfig.wrapTag + '>') +

    44.                        '</' + splitConfig.wrapTag + '>' +

    45.                        end;

    46.                    break;

    47.                default:

    48.                    break;

    49.            }

    50.        });

    52.        // 处理文本节点中被转义的html标签

    53.        $item[0].innerHTML = $item[0].innerHTML

    54.            .replace(new RegExp('&lt;' + splitConfig.wrapTag + '&gt;', 'g'), '<' + splitConfig.wrapTag + '>')

    55.            .replace(new RegExp('&lt;/' + splitConfig.wrapTag + '&gt;', 'g'), '</' + splitConfig.wrapTag + '>');

    56.        $item.find(splitConfig.wrapTag).addClass(splitConfig.wrapCls);

    57.    });

    58. }

    上面代码中最后对文本节点中被转义的包裹标签替换似乎有点麻烦，但是没办法，ES5之前JavaScript并不支持正则的后行断言（也就是正则表达式中“后顾”）。所以没办法对包裹标签前后的 &lt; 和 &gt; 进行精准替换，只能连同标签名一起替换。

    事件处理

    在上面完成了文本获取和段落分隔，下面要做的就是鼠标移动上去时获取文本触发朗读即可，移开时停止朗读即可。

    鼠标移动，只读一次，基于这两点原因，使用 mouseenter 和 mouseleave 事件来完成。

    原因：

    1. 不冒泡，不会触发父元素的再次朗读

    2. 不重复触发，一个元素内移动时不会重复触发。

    1. /**

    2. * 在页面上写入高亮样式

    3. */

    4. function createStyle() {

    5.    if (document.getElementById('speak-light-style')) return;

    7.    var style = document.createElement('style');

    8.    style.id = 'speak-light-style';

    9.    style.innerText = '.' + splitConfig.hightlightCls + '{' + splitConfig.hightStyle + '}';

    10.    document.getElementsByTagName('head')[0].appendChild(style);

    11. }

    12. // 非正文需要朗读的标签 逗号分隔

    13. var speakTags = 'a, p, span, h1, h2, h3, h4, h5, h6, img, input, button';

    15. $(document).on('mouseenter.speak-help', speakTags, function (e) {

    16.    var $target = $(e.target);

    18.    // 排除段落内的

    19.    if ($target.parents('.' + splitConfig.wrapCls).length || $target.find('.' + splitConfig.wrapCls).length) {

    20.        return;

    21.    }

    23.    // 图片样式单独处理 其他样式统一处理

    24.    if (e.target.nodeName.toLowerCase() === 'img') {

    25.        $target.css({

    26.            border: '2px solid #000'

    27.        });

    28.    } else {

    29.        $target.addClass(splitConfig.hightlightCls);

    30.    }

    32.    // 开始朗读

    33.    speakText(getText(e.target));

    35. }).on('mouseleave.speak-help', speakTags, function (e) {

    36.    var $target = $(e.target);

    37.    if ($target.find('.' + splitConfig.wrapCls).length) {

    38.        return;

    39.    }

    41.    // 图片样式

    42.    if (e.target.nodeName.toLowerCase() === 'img') {

    43.        $target.css({

    44.            border: 'none'

    45.        });

    46.    } else {

    47.        $target.removeClass(splitConfig.hightlightCls);

    48.    }

    50.    // 停止语音

    51.    stopSpeak();

    52. });

    54. // 段落内文本朗读

    55. $(document).on('mouseenter.speak-help', '.' + splitConfig.wrapCls, function (e) {

    56.    $(this).addClass(splitConfig.hightlightCls);

    58.    // 开始朗读

    59.    speakText(getText(this));

    60. }).on('mouseleave.speak-help', '.' + splitConfig.wrapCls, function (e) {

    61.    $(this).removeClass(splitConfig.hightlightCls);

    63.    // 停止语音

    64.    stopSpeak();

    65. });

    注意要把针对段落的语音处理和其他地方的分开。为什么？ 因为段落是个块级元素，鼠标移入段落中的空白时，如：段落前后空白、首行缩进、末行剩余空白等，是不应该触发朗读的，如果不阻止掉，进行这些区域将直接触发整段文字的朗读，失去了我们对段落文本内分隔的意义，而且，无论什么方式转化语音都是要时间的，大段内容可能需要较长时间，影响语音输出的体验。

    文本合成语音

    上面我们是直接使用了 speakText(text) 和 stopSpeak() 两个方法来触发语音的朗读和停止。

    我们来看下如何实现这个两个功能。

    其实现代浏览器默认已经提供了上面功能：

    1. var speechSU = new window.SpeechSynthesisUtterance();

    2. speechSU.text = '你好，世界！';

    3. window.speechSynthesis.speak(speechSU);

    复制到浏览器控制台看看能不能听到声音呢？(需要Chrome 33+、Firefox 49+ 或 IE-Edge)

    利用一下两个API即可：

    SpeechSynthesisUtterance 用于语音合成

    • lang : 语言 Gets and sets the language of the utterance.

    • pitch : 音高 Gets and sets the pitch at which the utterance will be spoken at.

    • rate : 语速 Gets and sets the speed at which the utterance will be spoken at.

    • text : 文本 Gets and sets the text that will be synthesised when the utterance is spoken.

    • voice : 声音 Gets and sets the voice that will be used to speak the utterance.

    • volume : 音量 Gets and sets the volume that the utterance will be spoken at.

    • onboundary : 单词或句子边界触发，即分隔处触发 Fired when the spoken utterance reaches a word or sentence boundary.

    • onend : 结束时触发 Fired when the utterance has finished being spoken.

    • onerror : 错误时触发 Fired when an error occurs that prevents the utterance from being succesfully spoken.

    • onmark : Fired when the spoken utterance reaches a named SSML "mark" tag.

    • onpause : 暂停时触发 Fired when the utterance is paused part way through.

    • onresume : 重新播放时触发 Fired when a paused utterance is resumed.

    • onstart : 开始时触发 Fired when the utterance has begun to be spoken.

    SpeechSynthesis 用于朗读

    • paused : Read only 是否暂停 A Boolean that returns true if the SpeechSynthesis object is in a paused state.

    • pending : Read only 是否处理中 A Boolean that returns true if the utterance queue contains as-yet-unspoken utterances.

    • speaking : Read only 是否朗读中 A Boolean that returns true if an utterance is currently in the process of being spoken — even if SpeechSynthesis is in a paused state.

    • onvoiceschanged : 声音变化时触发

    • cancel() : 情况待朗读队列 Removes all utterances from the utterance queue.

    • getVoices() : 获取浏览器支持的语音包列表 Returns a list of SpeechSynthesisVoice objects representing all the available voices on the current device.

    • pause() : 暂停 Puts the SpeechSynthesis object into a paused state.

    • resume() : 重新开始 Puts the SpeechSynthesis object into a non-paused state: resumes it if it was already paused.

    • speak() : 读合成的语音，参数必须为 SpeechSynthesisUtterance的实例 Adds an utterance to the utterance queue; it will be spoken when any other utterances queued before it have been spoken.

    详细api和说明可参考:

    • MDN - SpeechSynthesisUtterance

    • MDN - SpeechSynthesis

    那么上面的两个方法可以写为：

    1. var speaker = new window.SpeechSynthesisUtterance();

    2. var speakTimer,

    3.    stopTimer;

    5. // 开始朗读

    6. function speakText(text) {

    7.    clearTimeout(speakTimer);

    8.    window.speechSynthesis.cancel();

    9.    speakTimer = setTimeout(function () {

    10.        speaker.text = text;

    11.        window.speechSynthesis.speak(speaker);

    12.    }, 200);

    13. }

    15. // 停止朗读

    16. function stopSpeak() {

    17.    clearTimeout(stopTimer);

    18.    clearTimeout(speakTimer);

    19.    stopTimer = setTimeout(function () {

    20.        window.speechSynthesis.cancel();

    21.    }, 20);

    22. }

    因为语音合成本来是个异步的操作，因此在过程中进行以上处理。

    现代浏览器已经内置了这个功能，两个API接口兼容性如下：

    cdswyda - 网页文本朗读实现 - github如果要兼容其他浏览器或者需要一种完美兼容的解决方案，可能就需要服务端完成了，根据给定文本，返回相应语音即可，百度语音 http://yuyin.baidu.com/docs就提供这样的服务。

    • cdswyda - 网页文本朗读实现 - github（https://github.com/cdswyda/show/tree/master/demo/speaker）

    • cdswyda - 网页文本朗读实现 - demo（https://cdswyda.github.io/show/demo/speaker/）
  • 相关阅读:
    Java实现 LeetCode 148 排序链表
    Java实现 LeetCode 148 排序链表
    Java实现 LeetCode 148 排序链表
    Java实现 LeetCode 147 对链表进行插入排序
    Java实现 LeetCode 147 对链表进行插入排序
    VC++的菜单控制和自绘菜单
    仅通过崩溃地址找出源代码的出错行
    积累的VC编程小技巧之框架窗口及其他
    积累的VC编程小技巧之图标、光标及位图
    积累的VC编程小技巧之视图
  • 原文地址：https://www.cnblogs.com/liuhao-web/p/8706618.html
Copyright © 2011-2022 走看看