几年前，看到一台湾人写的一段程序（好像是《日语基础》），在网页上实现音视频与文字的同步播放（就是音视频播到哪部分，相应的文字就亮显，点击某一句话，播放器将从这句话开始播放。）当时觉得这个很适合语言教学。于是就查看了代码，写了很多函数，有些代码还加了密。几百行代码看了人发晕。最近本人试着写了一段代码，实现同样的功能，代码很简洁，主要功能是实现在浏览器上实现复读机的功能（缺少录音功能）。
我采用网上的《英语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;
文章整理：西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
