CrazyPeople816
CrazyPeople816
采纳率100%
2019-06-27 17:26

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

40
已采纳

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

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

随着语音的播送,对应的文字(或句子、段落)会凸显。

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

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • u011954243 H7_N18 2年前

    你去扒它的源码可以知道,它的入口是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的加入 导致它量。如果需要这个网页的源码,可以联系我 我私发你

    点赞 1 评论 复制链接分享
  • luojianjun2 Flying_with_you 2年前

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

    点赞 1 评论 复制链接分享

相关推荐