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

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

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

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

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

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

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

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

luojianjun2
Flying_with_you 回复CrazyPeople816: 这种一般用的语音识别技术,翻译的时候将对应关系也存储下来了。
3 个月之前 回复
u011954243
H7_N18 回复CrazyPeople816: 望采纳
3 个月之前 回复
u011954243
H7_N18 回复CrazyPeople816: 现成的工具是没有的。你看它返回的json就说明在这段录音里面其实后台已经把它分割成每次词语的每个音标对应的时间长度和每一个时长对应的起始点。换句话说后台是先把这段录音切割到每个字段后返回给前台去遍历,而不是实时监控。如果录音的语速什么突然变了 那肯定这个高亮的就对不牢了
3 个月之前 回复
CrazyPeople816
CrazyPeople816 谢谢!我能看到网页源代码。您的回答解决了一部分疑问,请问具体词对应的具体时间节点,最初大概是用什么手段批量识别出来的?有类似的现成工具吗?
3 个月之前 回复

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

CrazyPeople816
CrazyPeople816 非常感谢Flying兄仗义解答。您回复得也对,多谢,抱拳!
3 个月之前 回复
luojianjun2
Flying_with_you 回复H7_N18: 我说的进度条就是录音,录音播放到多少多少秒,通过获取秒数去找到对应的文字高亮。
3 个月之前 回复
u011954243
H7_N18 进度条程序里是不关心的,哪怕没有进度条也还是会亮。从程序一开始就自动去跑 去循环json里面的内容了
3 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
移动端语音播加语音条
移动端语音播放,包含了语音播放动态小喇叭,语音条,时间长度,支持移动端触动拖动,不支持PC拖动。
语音报播代码
使用vbs制作的语音报播,大部分电脑都可以正常运行,亲测有效
Unity动作表情工具(编辑器模式下一边播动作一边播表情)
一直忙于学习技术和工作好久没写博客 这次分享一下我写的一个动作表情工具 先说一下需求:美术把一帧帧表情图导出来,一张张排好序号,然后放到编辑器里面打开一个工具界面可以选动作,同时切换对应的表情,在编辑器模式下播放动作和表情,还可以调整一下表情,最后可以保存数据放到游戏项目里面用 其实我是不喜欢这种,因为不共用,我喜欢的是左眼右眼嘴巴分开mesh,这样子每个部分复用率高,可以避免内存问题。不过...
播放电脑中的微信语音
解压后,双击exe文件即可,找到windows系统中微信文件夹下面的语音文件,拖进去即可
实现一边打包一边删除文件
项目中遇到了一个棘手的问题,就是需要网络备份一个目录。该目录里有60万个文件,主机的存储的利用率达到了89%;需要将该目录中的文件传到远程windows主机上;如果使用ftp等方式传输文件,会遇到字符集乱码的问题。想到了一个方法,就是一边打包文件,一边将文件删除。利用了awk;这里记录下; 先看下目录结构 [root@bogon test]# ll total 4 -rw-r--r--.
关于HTML5 canvas 如何实现几何图形一边旋转一边移动
如题,我画出了一个矩形,然后让它每帧绕中心旋转一个角度,但是移动的话怎么办呢? rn如果我每帧改变context.translate()方法的x,y坐标参数,这样就会出现好奇怪的效果......请大家解答[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/onion/3.gif][/img][img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/onion/33.gif][/img]
一边打字,一边吐血.......
怎样实现如资源管理器类的导航菜单呢?要7个一级连接,每个一级连接下面有五个分连接?
文字 语音读取 功能的实现
想实现个功能--当鼠标放在网页某文本上时,能语音读取所指的文字,想问下大家这个东西怎么实现啊?谢谢了
phpExcel 如何实现 一边查询一边下载
如题
evc,wince放播语音文件
wince mp3 wav 播放,已经封装成类方式,方便调用
如何给页面上的文字做标记
各位,我想实现这样一个功能rn在页面上选定一段文字,可以让他显示 一个底色,区别于其他文字,或者是改变文字颜色rn当然,最好是能显示一个底色,就像WORD里的功能rnrn50分 求一段代码,在下不胜感激!
Android SearchView 实现一边输入一边搜索功能
Android 自动的组件SearchView 在实现自动搜索有很好的支持,这是前段时间做的一个项目里面需要实现的功能在此做一个简单的总结。
实现一边录音一边转化为文字的功能
实现一边录音一边转化为文字的功能我们知道,讯飞可以实现在线语音转化功能,可以将语音实时的进行翻译,同时录音,但是这个实时转为文字功能,不是长连接,是个短连接,导致没法长时间的实现一边录音一边转换功能,本文便是为此完成的一种思路设计。主要动作:本来实现的是一直去检测录音,当语音识别库停止录音后重启语音识别,让继续实现转换。这里因为出现一个问题,当再次重启时,之前的录音文件则会丢掉,这样使得我们本地的录
怎样用C#实现一边播放一边录制
我用AxWMPLib.AxWindowsMediaPlayer插件可以实现播放,但是我想在播放的同时录制正在播放的流媒体,请问要如何做呢?不用这个插件实现也可以的,请高手关照关照。
ASP如何实现一边执行一边输出?
如何实现一边执行一边把结果输出到客户端?rn有可能用到的是:rnresponse.bufferrnresponse.flushrn但是我不会啊,请各位大狭指教。rnrn[code=HTML]rn<%rnfor i=1 to 10000rn response.write i&" "rnnextrn%>rn[/code]rn
怎么实现Ajax 一边显示一边下载
因为读取的数据较大,内容较多。rn 所以我想从后台读取数据的时候 rn 内容 一边下载一边显示在页面上
一边画线,一边漫游,怎么办?
目的是要画出一个比屏幕还大的区域,使用的是多边形工具,rn也就是说工具到了屏幕边界,自动漫游(滚动),rn大家提个思路吧。rnBTW:效果就如同在MAPINFO PRO中画多边形,工具一到屏幕边界,图层就自动移动了。
wince 实现一边录音一边播放的程序
请问各位谁有wince6.0下实现一边录音一边播放的程序啊,或者提供思路,我的开发环境wince6.0+6410开发板,谢谢各位啊,我的邮箱wuzhu266@126.com!!!
一边泡茶一边搬砖
         有很多刚开始喝茶,还不太懂茶的茶友经常会有这样的疑惑:喝茶,到底哪一泡才是最好喝的呢?对于每泡茶的口感,一直流传着这么一段话:一道水,二道茶,三道四道是精华,五道六道也不差,七泡有余香,八道有余味,九道十道仍回味。 这么说来,第三、四道才是茶最精华的口感。事实上也确实是这样,茶叶刚泡的时候味道还没出来,泡到三、四泡时,茶叶已然舒展,茶味也已经出来,这是茶汤滋味最好的时候,泡到后...
初来乍到,一边学习一边笔记
初来乍到,一边学习一边笔记 我是一名网络安全的初学者,后续会不定期上传我所学习的内容,并与大家分享。 初步来到这个领域,对网络安全等方面还有很对不够了解的地方,或许在学习过程中又将遇到困难与矛盾。笔记之中若是存在错误及不当之处,欢迎各位朋友批评指正,并且相互探讨。 我对网络安全的学习或许将分成如下四个阶段: - 网络安全 - 系统安全 - 代码安全 - Web渗透 网络安...
RichEdit一边输入一边修改
如题,想实现一边输入一边修改,输入由线程完成,总是追加在最后,尔后人工对当中的部分进行修改。rn想法是修改前记录显示的第一行行号,当前选择的开始和结束位置,然后将内容将光标移动到最后面,追加,再设置选择的内容和滚动的行,但效果不理想。出现1、选择文本的时候可能被中断了,即我想选择5-15直接的字符,但有可能我选择到10的时候,光标就被切走了,接着切回来,但选择的是10-15;2、但文本较大的时候,会出现闪烁,可以看到滑块移动到最底部后又移回来。3、切换到其他程序再切回来,会自动选择所有文本,应该是焦点问题,已经将RichEdit的“No Hide Selection”设置为TRUE了。rn在网上没有找到相关的资料,不知道怎么修改了,大家给点意见,或者提供个好的想法,谢谢。
一边移动一边旋转的动画
本例实现物品一边从上面掉下,一边旋转的效果,整体呈弧形旋转落下
一边遍历列表一边删除
错误的做法1: n = [1,2,3,4,5,6,7,8,9,10] for x in n: n.remove(x) print(n) 运行结果: [2, 4, 6, 8, 10] 原因很简单,for会去获取列表的迭代器,每次循环时按次序获取内容,这次取n下次循环就取n+1,但是循环体中对列表做remove操作,导致每次循环列表中的元素都会前移一位,也就是n+1变为了n,而n+...
html5 科大讯飞文字合成语音
因项目需求,这里需要播放语音,但是网站的数据都是一些文字性的内容,所以我找到了讯飞平台,利用里面提供的Html5语音合成,实现这一功能   //初始化Session对象 var session = new IFlyTtsSession({
SSIS一边抽取一边提交
在SSIS中,从SQL Server往Oracle中直接导数据。由于数据量比较大,怎么让SSIS每次从源表中抽10000数据就往目标表中写?(我发现,SSIS是先把所有数据都从源表中抽出来,然后再往目标表中写,这样很占内存)
请教:怎样编程实现播通电话并且播放语音
就是使计算机可以定时播打某个电话,并且在电话被接起后播放一段语音给接电话的人?rnrn求思路或解决方法
能不能把问题分分类,网络的一边,数据库的一边,界面的一边,酸法的一边,COM一边,API一边.....
看着这个累!!!!!!!!!!
多核 对于一边编译,一边看电影,一边玩游戏 有没有好处?
就是本来几个单线程的应用同时运行,多核是不是可以发挥rn多核的作用,让每个cpu 都来工作?
openLayer3图层加入数据,一边加一边更新。
这个需要考虑JS多线程的问题,需要用定时器创建新的线程去做,一个线程的话会出现需要所有数据加入后,地图上才出现点。<!DOCTYPE html> <html> <head> <title>Clustered Features</title> <link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.c
用JAVA实现语音交互的功能(即语音聊天室的功能)
1:这种语言交互的功能用JSDT2-0能实现吗?如果用JSDT来做的话。因为它有个PHONE的功能。不过效果不是蛮好,我测了一下。rn2:具体的声音采集,压缩,还要考虑到速度,怎么实现呢?rn3:谁做过的给我点思路好吗?如果不用JSDT开发的话。rn4:我也搜索了以前的贴子,还有我用GOOGLE个搜,没有什么讲这方面的rn很具体的 例子。rn哪位讨论一下好吗?分来了的都有的。
html5移动端调用语音功能
详细病情(支持语音输入识别) 's
播播电影网源码
电影源码好东西、大家一起分享、别的网站要钱才能下载的。我奉献大家了
使用Html5多媒体实现微信语音功能
随着微信等社交App的兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能的社交App,小到电商App的语音客服、店小二功能,语音聊天成为了必不可少的方式。 但是很多人感觉网页端语音离我们很遥远,这些更多是本地应用的工作,其实不然,随着Html5的发展,语音功能也渐渐成为前端必会的功能之一。 为什么要学会HTML5 的语音呢?...
播播影音 v1.01
软件介绍 播播影音是一款功能强大的在线点播软件,采用先进的P2P传输技术,缓冲速度快,无需漫长等待,一点即播! 播播影音具有一下特色: 1.最热最全,几万影视、动漫综艺,同步上映,每日更新 2.一点就播,只需数秒缓冲,观看边下载,不伤硬盘 3.高速流畅,采用多线程、P2P等多种加速技术,流畅播放! 4.HD,BD,DVD高清画质,环绕立体多声道,家庭HTV影院效果
vector对象一边遍历一边删除元素
今天做携程的笔试题,附加编程题是删除一行字符串里面的标点符号,关于一边遍历一边删除的问题,坑踩到好几次了,真是好气啊,明明很简单的问题,写下来防止自己忘了 自己忘了else的条件了,结果最后老不出结果,一调试发现死循环了,真的好气啊 bool f(vector &str) { int end = str.size(); bool state = false; auto it = str.
各位一边编程一边听音乐吗?
-
TC中一边背景音乐一边游戏
用TC编小游戏,本人一开始负责音乐部分,结果整合时发现无法一边播放背景音乐一边按键控制玩游戏,请问有什么解决方法!!! (音乐函数用的是sound())
安卓一边录音一边降噪,代码讲解
安卓语音通话,语音识别交互之单独移植webRTC回声消除AEC模块。课程内容包括Android移植webrtc回声消除模块后的效果展示、具体的代码详解、VAD模块移植讲解、代码详解、agc模块讲解等。
css两列布局 一边固定一边自适应
css两列布局一、优先渲染主要部分   当主要部分是自适应且需要优先渲染的时候,可采用以下三种方式:           &amp;lt;!-- html结构 --&amp;gt;                     &amp;lt;div class=&quot;main&quot;&amp;gt; &amp;lt;div class=&quot;main-content&quot;&amp;gt;main&amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt;
Android中Button一边圆角一边直角
可以实现Button按钮一边直角一边圆角
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法

相似问题

8
向大神请教:数据分析中如何选取变量?
10
需要c币的看这里,简单问题请教:html5种如何使用javascript实现省、市、县的下拉同步?
0
在mediawiki中如何通过引用分类,实现自动在页面上显示当前分类中最新几个页面的列表
2
请教:微信小程序(有随机数)页面不能重新加载(刷新)问题。
2
在不使用position 和float的情况下怎么实现?
1
面试请教:手机端web和公众号
0
请教:如何在iframe中打开一个target属性为_top 的 a 标签?? 有没有什么骚操作
1
请教:vscode汉字英文混排下等宽字体不能对齐如何解决
1
请教: thinkphp5 静态文件夹下的js文件 ,关于 背景图片地址 url 问题
3
求助:用HTML,js实现单选题,答案统计功能
1
有没有大神知道navigator.getDisplayMedia捕捉页面并且用blob处理后下载成mp4的视频是什么编码的。
1
在h5上实现播放UDP协议的视频流
1
请教:jenkins持续部署+docker+git部署的问题
1
video.js 播放rtmp直播流问题请教
0
请教下想在dos上面同时tracert共150个左右的IP地址,有什么好的办法实现?
0
题目问问最少可使卡上的余额为多少,请教如何利用C语言的程序编写代码实现的技术来求
1
请教:如何基于分笔数据利用matplotlib绘制时间-价格/成交量走势图?
3
请教大佬,为啥不能用margin:50% auto;
2
请教:给本页面的所有 A 标记增加target="_blank"
4
spring boot 访问HTML 总是有缓存,如何修改前端页面实时生效