几年前,看到一台湾人写的一段程序(好像是《日语基础》),在网页上实现音视频与文字的同步播放(就是音视频播到哪部分,相应的文字就亮显,点击某一句话,播放器将从这句话开始播放。)当时觉得这个很适合语言教学。于是就查看了代码,写了很多函数,有些代码还加了密。几百行代码看了人发晕。最近本人试着写了一段代码,实现同样的功能,代码很简洁,主要功能是实现在浏览器上实现复读机的功能(缺少录音功能)。
我采用网上的《英语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里的链接传递参数:
<a href="#" onclick="location.href='main.htm?id=WAV/1-2.wav&x=JS/1-2.js'">NO2</A>
分析:
location.href是浏览器里的链接参数; main.htm是要链接的页面地址; id=WAV/1-2.wav&x=JS/1-2.js是要传递的参数。(2.wav是这个链接要播放的声音文件;1-2.js是要传递的外部动态脚本。)
二、main.htm页面分析
1.动态加载脚本代码:
<script id="js" language="javascript" src="" ></script> //这个你能看懂
2.将动态加载的脚本下载到客户机代码:
<script language="javascript">
var timeid = null; ready = false; js.src = location.href.split("=")[2]; //用 split函数将Index.htm页面传递过来的参数里的*.js分离出来 loadscr(); function loadscr() { //定时器函数,装载 *.js。(忘记介绍*.js里最后一句是ready = true)。 if (ready) { //如果检测到ready = true,则表明*.js装载完毕,停止执行loadscr() clearTimeout(timeid); timeid = setTimeout("loadscr();", 100); } }
</script>
3.让播放器根据index.htm传递过来的不同的参数播放不同的声音:
A.分离出声音参数代码:(MP为播放器的ID)
<script language="JavaScript"> MP.Filename=location.href.split("=")[1] MP.Filename=MP.Filename.split("&")[0] if(MP.Filename=="") alert("缺必要的参数\n或者媒体播放器应为9.0")
</script>
B.实现变速播放代码:
<select onchange="MP.rate=this.value" name="select"> <option value="1.0">正常</option> <option value="0.9">慢速一</option> <option value="0.8">慢速二</option> <option value="1.1">快速一</option> <option value="1.2">快速二</option> </select>
C.动态加载文字代码:
<script language="JavaScript">
for(i=0;i<l;i++) {document.write(' <tr ><td style=" border:1px dotted blue;cursor: hand;font-size: 16px;" id=e_'+i+' onclick="sub_loop('+i+')" onMouseOver=toolTip(h_array['+i+']) onMouseOut=toolTip()>'+(i+1)+'.'+e_array+'</td></tr>')} </script>
e_array为第i句文字 函数sub_loop('+i+')如下:
function sub_loop(m)
{ MP.CurrentPosition= t_array[m];
} // 将播放器的播放头移到相应的位置
函数toolTip(h_array['+i+']的功能是鼠标在某句上显示该句的中文意思。代码如下:
<script language="javascript"> //显示中文 var ns4 = document.layers; var ns6 = document.getElementById && !document.all; var ie4 = document.all; offsetX = 0; offsetY = 20; var toolTipSTYLE=""; function initToolTips() { if(ns4||ns6||ie4) { if(ns4) toolTipSTYLE = document.toolTipLayer; else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style; else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style; if(ns4) document.captureEvents(Event.MOUSEMOVE); else { toolTipSTYLE.visibility = "visible"; toolTipSTYLE.display = "none"; } document.onmousemove = moveToMouseLoc; } } function toolTip(msg, fg, bg) { if(toolTip.arguments.length < 1) // hide { if(ns4) toolTipSTYLE.visibility = "hidden"; else toolTipSTYLE.display = "none"; } else // show { if(!fg) fg = "#0000ff"; if(!bg) bg = "#FFFFFF"; var content = '<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '"><td>' + '<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + bg + '"><td align="center"><font face="sans-serif" color="' + fg + '" size="-1"> \;' + msg + ' \;</font></td></table></td></table>'; if(ns4) { toolTipSTYLE.document.write(content); toolTipSTYLE.document.close(); toolTipSTYLE.visibility = "visible"; } if(ns6) { document.getElementById("toolTipLayer").innerHTML = content; toolTipSTYLE.display='block' } if(ie4) { document.all("toolTipLayer").innerHTML=content; toolTipSTYLE.display='block' } } } function moveToMouseLoc(e) { if(ns4||ns6) { x = e.pageX; y = e.pageY; } else { x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; } toolTipSTYLE.left = x + offsetX; toolTipSTYLE.top = y + offsetY; return true; }
</script>
如上的代码在Dreamweaver的代码片断上能找到。
D.文字亮显代码:
function check(){ C_T=MP.currentPosition; for(var n=0;n<l;n++){ {if((C_T>=t_array[n])&& (C_T<t_array[n+1])) {eval("e_"+n).style.color="red"; eval("h"+n).style.color="red";}
else {eval("e_"+n).style.color="black" eval("h"+n).style.color="black"; }}} } setInterval("check()",500)
分析:随时检测播放器的当前位置(时间)。如果播放器的当前位置在某一时间内,就将相应的文字显示为红色,否则该文字为黑色。当然,还有其他的效果,你去思考吧。
没有相关教程
|