几年前,看到一台湾人写的一段程序(好像是《日语基础》),在网页上实现音视频与文字的同步播放(就是音视频播到哪部分,相应的文字就亮显,点击某一句话,播放器将从这句话开始播放。)当时觉得这个很适合语言教学。于是就查看了代码,写了很多函数,有些代码还加了密。几百行代码看了人发晕。最近本人试着写了一段代码,实现同样的功能,代码很简洁,主要功能是实现在浏览器上实现复读机的功能(缺少录音功能)。 我采用网上的《英语900句》的语音和文字,共两个页面,一个页面实现传递脚本参数到第二个页面;第二个页面实现语音与文字同步。主要技术采用Dhtml。全部采用客户端脚本。 演示地址:http://www.whtvu.com.cn/english900 设计思路: (一) 动态加载文字和声音 将文字放在一个外部JS里。代码如下: var e_array = new Array("Hello! Hi!", "Good morning afternoon evening!", "I'm Kathy King. ", ………..); var h_array=new Array("你好!", "早晨(下午 晚上)好!", "我是凯西•金。", …..); var t_array = new Array(7,10,16,19…….); var l=e_array.length; var title="Greetings"; var h_title="问候语" ready = true; 分析:e_array为英语句子;h_array为中文意思;t_array为每句开头的时间;title为这段对话的标题(英文);h_title为为这段对话的标题(中文)。ready = true为每一个外部JS里都有的,主要是为了检测外部JS是否下载到客户端(后面有介绍)。 (二) 让播放器动态播放不同的声音(后有介绍) (三) 播放器播到不同的位置,相应的文字以某一颜色显示(要随时检测播放器的位置。后有介绍) (四) 改变播放器的播放速度(后有介绍) 制作步骤: 我们知道,要动态加载客户端脚本,必须保证该脚本下载到客户端,否则,无法运行。而且网页里的变量只在本页面有效,如何传递变量?请看如下代码: 一、Index.htm里的链接传递参数: NO2 分析: location.href是浏览器里的链接参数; main.htm是要链接的页面地址; id=WAV/1-2.wav&x=JS/1-2.js是要传递的参数。(2.wav是这个链接要播放的声音文件;1-2.js是要传递的外部动态脚本。) 二、main.htm页面分析 1.动态加载脚本代码: //这个你能看懂 2.将动态加载的脚本下载到客户机代码: 3.让播放器根据index.htm传递过来的不同的参数播放不同的声音: A.分离出声音参数代码:(MP为播放器的ID) B.实现变速播放代码: C.动态加载文字代码: e_array为第i句文字 函数sub_loop('+i+')如下: function sub_loop(m) { MP.CurrentPosition= t_array[m]; } // 将播放器的播放头移到相应的位置 函数toolTip(h_array['+i+']的功能是鼠标在某句上显示该句的中文意思。代码如下: 如上的代码在Dreamweaver的代码片断上能找到。 D.文字亮显代码: function check(){ C_T=MP.currentPosition; for(var n=0;n eval("h"+n).style.color="red";} else {eval("e_"+n).style.color="black" eval("h"+n).style.color="black"; }}} } setInterval("check()",500) 分析:随时检测播放器的当前位置(时间)。如果播放器的当前位置在某一时间内,就将相应的文字显示为红色,否则该文字为黑色。当然,还有其他的效果,你去思考吧。 |
|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )
GMT+8, 2024-9-30 13:26 , Processed in 0.210168 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.