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

// 标签朗读文本 
var tagTextConfig = { 
    'a': '链接', 
    'input[text]': '文本输入框', 
    'input[password]': '密码输入框', 
    'button': '按钮', 
    'img': '图片' 
}; 
1.
2.
3.
4.
5.
6.
7.
8.

/** 
* 获取标签朗读文本 
* @param {HTMLElement} el 要处理的HTMLElement 
* @returns {String}   朗读文本 
*/ 
function getTagText(el) { 
    if (!el) return ''; 
 
    var tagName = el.tagName.toLowerCase(); 
 
    // 处理input等多属性元素 
    switch (tagName) { 
        case 'input': 
            tagName += '[' + el.type + ']'; 
            break; 
        default: 
            break; 
    } 
 
    // 标签的功能提醒和作用应该有间隔，因此在***加入一个空格 
    return (tagTextConfig[tagName] || '') + ' '; 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

/** 
* 获取完整朗读文本 
* @param {HTMLElement} el 要处理的HTMLElement 
* @returns {String}   朗读文本 
*/ 
function getText(el) { 
    if (!el) return ''; 
 
    return getTagText(el) + (el.title || el.alt || el.innerText || ''); 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

// 正文拆分配置 
var splitConfig = { 
    // 内容分段标签名称 
    unitTag: 'p', 
    // 正文中分隔正则表达式 
    splitReg: /[,;，；。]/g, 
    // 包裹标签名 
    wrapTag: 'label', 
    // 包裹标签类名 
    wrapCls: 'speak-lable', 
    // 高亮样式名和样式 
    hightlightCls: 'speak-help-hightlight', 
    hightStyle: 'background: #000!important; color: #fff!important' 
}; 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

/** 
* 正文内容分段处理 
* @param {jQueryObject/HTMLElement/String}  $content 要处理的正文jQ对象或HTMLElement或其对应选择器 
*/ 
function splitConent($content) { 
    $content = $($content); 
 
    $content.find(splitConfig.unitTag).each(function (index, item) { 
        var $item = $(item), 
            text = $.trim($item.text()); 
        if (!text) return; 
 
        var nodes = $item[0].childNodes; 
 
        $.each(nodes, function (i, node) { 
            switch (node.nodeType) { 
                case 3: 
                    // text 节点 
                    // 由于是文本节点，标签被转义了，后续再转回来 
                    node.data = '<' + splitConfig.wrapTag + '>' + 
                        node.data.replace(splitConfig.splitReg, '</' + splitConfig.wrapTag + '>$&<' + splitConfig.wrapTag + '>') + 
                        '</' + splitConfig.wrapTag + '>'; 
                    break; 
                case 1: 
                    // 元素节点 
                    var innerHtml = node.innerHTML, 
                        start = '', 
                        end = ''; 
                    // 如果内部还有直接标签，先去掉 
                    var startResult = /^<\w+?>/.exec(innerHtml); 
                    if (startResult) { 
                        start = startResult[0]; 
                        innerHtml = innerHtml.substr(start.length); 
                    } 
                    var endResult = /<\/\w+?>$/.exec(innerHtml); 
                    if (endResult) { 
                        end = endResult[0]; 
                        innerHtml = innerHtml.substring(0, endResult.index); 
                    } 
                    // 更新内部内容 
                    node.innerHTML = start + 
                        '<' + splitConfig.wrapTag + '>' + 
                        innerHtml.replace(splitConfig.splitReg, '</' + splitConfig.wrapTag + '>$&<' + splitConfig.wrapTag + '>') + 
                        '</' + splitConfig.wrapTag + '>' + 
                        end; 
                    break; 
                default: 
                    break; 
            } 
        }); 
 
        // 处理文本节点中被转义的html标签 
        $item[0].innerHTML = $item[0].innerHTML 
            .replace(new RegExp('&lt;' + splitConfig.wrapTag + '&gt;', 'g'), '<' + splitConfig.wrapTag + '>') 
            .replace(new RegExp('&lt;/' + splitConfig.wrapTag + '&gt;', 'g'), '</' + splitConfig.wrapTag + '>'); 
        $item.find(splitConfig.wrapTag).addClass(splitConfig.wrapCls); 
    }); 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.

/** 
* 在页面上写入高亮样式 
*/ 
function createStyle() { 
    if (document.getElementById('speak-light-style')) return; 
 
    var style = document.createElement('style'); 
    style.id = 'speak-light-style'; 
    style.innerText = '.' + splitConfig.hightlightCls + '{' + splitConfig.hightStyle + '}'; 
    document.getElementsByTagName('head')[0].appendChild(style); 
} 
// 非正文需要朗读的标签 逗号分隔 
var speakTags = 'a, p, span, h1, h2, h3, h4, h5, h6, img, input, button'; 
 
$(document).on('mouseenter.speak-help', speakTags, function (e) { 
    var $target = $(e.target); 
 
    // 排除段落内的 
    if ($target.parents('.' + splitConfig.wrapCls).length || $target.find('.' + splitConfig.wrapCls).length) { 
        return; 
    } 
 
    // 图片样式单独处理 其他样式统一处理 
    if (e.target.nodeName.toLowerCase() === 'img') { 
        $target.css({ 
            border: '2px solid #000' 
        }); 
    } else { 
        $target.addClass(splitConfig.hightlightCls); 
    } 
 
    // 开始朗读 
    speakText(getText(e.target)); 
 
}).on('mouseleave.speak-help', speakTags, function (e) { 
    var $target = $(e.target); 
    if ($target.find('.' + splitConfig.wrapCls).length) { 
        return; 
    } 
 
    // 图片样式 
    if (e.target.nodeName.toLowerCase() === 'img') { 
        $target.css({ 
            border: 'none' 
        }); 
    } else { 
        $target.removeClass(splitConfig.hightlightCls); 
    } 
 
    // 停止语音 
    stopSpeak(); 
}); 
 
// 段落内文本朗读 
$(document).on('mouseenter.speak-help', '.' + splitConfig.wrapCls, function (e) { 
    $(this).addClass(splitConfig.hightlightCls); 
 
    // 开始朗读 
    speakText(getText(this)); 
}).on('mouseleave.speak-help', '.' + splitConfig.wrapCls, function (e) { 
    $(this).removeClass(splitConfig.hightlightCls); 
 
    // 停止语音 
    stopSpeak(); 
}); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.

var speechSU = new window.SpeechSynthesisUtterance(); 
speechSU.text = '你好，世界！'; 
window.speechSynthesis.speak(speechSU); 
1.
2.
3.

var speaker = new window.SpeechSynthesisUtterance(); 
var speakTimer, 
    stopTimer; 
 
// 开始朗读 
function speakText(text) { 
    clearTimeout(speakTimer); 
    window.speechSynthesis.cancel(); 
    speakTimer = setTimeout(function () { 
        speaker.text = text; 
        window.speechSynthesis.speak(speaker); 
    }, 200); 
} 
 
// 停止朗读 
function stopSpeak() { 
    clearTimeout(stopTimer); 
    clearTimeout(speakTimer); 
    stopTimer = setTimeout(function () { 
        window.speechSynthesis.cancel(); 
    }, 20); 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.