|
幾年前，看到一臺(tái)灣人寫的一段程序（好像是《日語(yǔ)基礎(chǔ)》），在網(wǎng)頁(yè)上實(shí)現(xiàn)音視頻與文字的同步播放（就是音視頻播到哪部分，相應(yīng)的文字就亮顯，點(diǎn)擊某一句話，播放器將從這句話開(kāi)始播放。）當(dāng)時(shí)覺(jué)得這個(gè)很適合語(yǔ)言教學(xué)。于是就查看了代碼，寫了很多函數(shù)，有些代碼還加了密。幾百行代碼看了人發(fā)暈。最近本人試著寫了一段代碼，實(shí)現(xiàn)同樣的功能，代碼很簡(jiǎn)潔，主要功能是實(shí)現(xiàn)在瀏覽器上實(shí)現(xiàn)復(fù)讀機(jī)的功能（缺少錄音功能）。
我采用網(wǎng)上的《英語(yǔ)900句》的語(yǔ)音和文字，共兩個(gè)頁(yè)面，一個(gè)頁(yè)面實(shí)現(xiàn)傳遞腳本參數(shù)到第二個(gè)頁(yè)面；第二個(gè)頁(yè)面實(shí)現(xiàn)語(yǔ)音與文字同步。主要技術(shù)采用Dhtml。全部采用客戶端腳本。
演示地址：http://www.whtvu.com.cn/english900
設(shè)計(jì)思路：
（一） 動(dòng)態(tài)加載文字和聲音
將文字放在一個(gè)外部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="問(wèn)候語(yǔ)"
ready = true;
分析：e_array為英語(yǔ)句子；h_array為中文意思；t_array為每句開(kāi)頭的時(shí)間；title為這段對(duì)話的標(biāo)題（英文）；h_title為為這段對(duì)話的標(biāo)題（中文）。ready = true為每一個(gè)外部JS里都有的，主要是為了檢測(cè)外部JS是否下載到客戶端（后面有介紹）。
（二） 讓播放器動(dòng)態(tài)播放不同的聲音（后有介紹）
（三） 播放器播到不同的位置，相應(yīng)的文字以某一顏色顯示（要隨時(shí)檢測(cè)播放器的位置。后有介紹）
（四） 改變播放器的播放速度（后有介紹）
制作步驟：
我們知道，要?jiǎng)討B(tài)加載客戶端腳本，必須保證該腳本下載到客戶端，否則，無(wú)法運(yùn)行。而且網(wǎng)頁(yè)里的變量只在本頁(yè)面有效，如何傳遞變量？請(qǐng)看如下代碼：
一、Index.htm里的鏈接傳遞參數(shù)：
<a href="#" onclick="location.href='main.htm?id=WAV/1-2.wav&x=JS/1-2.js'">NO2</A>
分析：
location.href是瀏覽器里的鏈接參數(shù)；
main.htm是要鏈接的頁(yè)面地址；
id=WAV/1-2.wav&x=JS/1-2.js是要傳遞的參數(shù)。（2.wav是這個(gè)鏈接要播放的聲音文件；1-2.js是要傳遞的外部動(dòng)態(tài)腳本。）
二、main.htm頁(yè)面分析
1.動(dòng)態(tài)加載腳本代碼：
<script id="js" language="javascript" src="" ></script> //這個(gè)你能看懂
2.將動(dòng)態(tài)加載的腳本下載到客戶機(jī)代碼：
<script language="javascript">
var timeid = null;
ready = false;
js.src = location.href.split("=")[2]; //用 split函數(shù)將Index.htm頁(yè)面?zhèn)鬟f過(guò)來(lái)的參數(shù)里的*.js分離出來(lái)
loadscr();
function loadscr() { //定時(shí)器函數(shù)，裝載 *.js。（忘記介紹*.js里最后一句是ready = true）。
if (ready) { //如果檢測(cè)到ready = true，則表明*.js裝載完畢，停止執(zhí)行l(wèi)oadscr()
clearTimeout(timeid);
timeid = setTimeout("loadscr();", 100);
}
}
</script>
3.讓播放器根據(jù)index.htm傳遞過(guò)來(lái)的不同的參數(shù)播放不同的聲音：
A.分離出聲音參數(shù)代碼：（MP為播放器的ID）
<script language="JavaScript">
MP.Filename=location.href.split("=")[1]
MP.Filename=MP.Filename.split("&")[0]
if(MP.Filename=="")
alert("缺必要的參數(shù)\n或者媒體播放器應(yīng)為9.0")
</script>
B.實(shí)現(xiàn)變速播放代碼：
<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.動(dòng)態(tài)加載文字代碼：
<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句文字
函數(shù)sub_loop('+i+')如下：
function sub_loop(m)
{
MP.CurrentPosition= t_array[m];
} // 將播放器的播放頭移到相應(yīng)的位置
函數(shù)toolTip(h_array['+i+']的功能是鼠標(biāo)在某句上顯示該句的中文意思。代碼如下：
<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)
分析：隨時(shí)檢測(cè)播放器的當(dāng)前位置（時(shí)間）。如果播放器的當(dāng)前位置在某一時(shí)間內(nèi)，就將相應(yīng)的文字顯示為紅色，否則該文字為黑色。當(dāng)然，還有其他的效果，你去思考吧。
經(jīng)典論壇討論帖：
http://www.95time.cn/bbs/newsdetail.asp?id=2462389
本文鏈接：http://www.95time.cn/tech/web/2006/3328.asp 
出處：藍(lán)色理想
責(zé)任編輯：moby
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
