请教：用何种技术手段，才能在HTML5页面上实现一边播语音，一边给所播语音对应的文字加标记的功能？

问题描述：

实现后类似于授渔英语这一页面这样的效果

http://shouyuyingyu.com/shouyuyingyu/zero2one/Zero_Chapter_0/

随着语音的播送，对应的文字（或句子、段落）会凸显。

问题：
1、这是通过哪些技术手段实现的？页面是怎么检测到语音播到了哪个词的？
2、这种检测是在服务器端还是在浏览器端实现的？

在下是技术小白，请高手们不吝赐教。

感谢楼下的FLY初步解答，请问这些具体词对应的具体时间节点，最初是用什么手段识别出来的？因为词有长有短，朗读也肯定不会很匀速。
有什么现成工具手段吗？还是需要自编一个程序出来，让程序对录音里的每个词，监听，分辨遍？

答

你去扒它的源码可以知道，它的入口是update()方法；其中INLINE_JSON里面包含 answer threatens 和 words。
answer threatens 是整篇文章；words 是每次词的属性，包括start：开始的时间;word 词语。其中这个词语会拆分，举个例子： ZERO 拆成了 z_B，iy_I，r_I，ow_E 四个，分别是0.09,0.01,0.11,0.13秒这样一个个词的读音就很清楚了

再说它的高亮的方法是：highlight_word 这个方法

if(cur_wd != next_wd) {
        var active = document.querySelectorAll('.active');
        for(var i = 0; i < active.length; i++) {
            active[i].classList.remove('active');
        }
        if(next_wd && next_wd.$div) {
            next_wd.$div.classList.add('active');


            console.log(next_wd.$div);
            var element = next_wd.$div;
    elementRect = element.getBoundingClientRect();
    absoluteElementTop = elementRect.top + window.pageYOffset;
    middle = absoluteElementTop - (window.innerHeight / 2);
        window.scrollTo(0, middle);


            render_phones(next_wd);
        }
    }

active class的加入导致它量。如果需要这个网页的源码，可以联系我我私发你

答

进度条上每一秒对应一个文字，
数据库存储了每个文字以及它在文章的位置。通过实时获取进度条的时间点来给对应的文字变色。

请教：用何种技术手段，才能在HTML5页面上实现一边播语音，一边给所播语音对应的文字加标记的功能？

相关推荐