几年前，看到一台湾人写的一段程序(好像是《日语基础》)，在网页上实现音视频与文字的同步播放(就是音视频播到哪部分，相应的文字就亮显，点击某一句话，播放器将从这句话开始播放。)当时觉得这个很适合语言教学。于是就查看了代码，写了很多函数，有些代码还加了密。几百行代码看了人发晕。最近本人试着写了一段代码，实现同样的功能，代码很简洁，主要功能是实现在浏览器上实现复读机的功能(缺少录音功能)。

我采用网上的《英语900句》的语音和文字，共两个页面，一个页面实现传递脚本参数到第二个页面；第二个页面实现语音与文字同步。主要技术采用Dhtml。全部采用客户端脚本。

演示地址：http://www.whtvu.com.cn/english900

设计思路：

(一) 动态加载文字和声音

将文字放在一个外部js里。代码如下:

http://www.gaodaima.com/?p=28180

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.将动态加载的脚本下载到客户机代码：

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);

}

}

3.让播放器根据index.htm传递过来的不同的参数播放不同的声音：

A.分离出声音参数代码：(MP为播放器的ID)

MP.Filename=location.href.split("=")[1]

MP.Filename=MP.Filename.split("&")[0]

if(MP.Filename=="")

alert("缺必要的参数/n或者媒体播放器应为9.0")

B.实现变速播放代码：

正常

慢速一

慢速二

快速一

快速二

C.动态加载文字代码：

for(i=0;i

{document.write('

'+(i+1)+'.'+e_array+'')}

e_array为第i句文字

函数sub_loop('+i+')如下：

function sub_loop(m)

{

MP.CurrentPosition= t_array[m];

} // 将播放器的播放头移到相应的位置

函数toolTip(h_array['+i+']的功能是鼠标在某句上显示该句的中文意思。代码如下：

//显示中文

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 =

'

'

&nbsp/;' + msg +

'&nbsp/;

';

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;

}

如上的代码在Dreamweaver的代码片断上能找到。

D.文字亮显代码：

function check(){

C_T=MP.currentPosition;

for(var n=0;n

{if((C_T>=t_array[n])&& (C_T

{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)

分析：随时检测播放器的当前位置(时间)。如果播放器的当前位置在某一时间内，就将相应的文字显示为红色，否则该文字为黑色。当然，还有其他的效果，你去思考吧。

欢迎大家阅读《JS让浏览器实现复读机的功能_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

原创文章，转载请注明： 转载自搞代码

微信 赏一包辣条吧~

支付宝 赏一听可乐吧~