JS讓瀏覽器實現複讀機的功能

來源:互聯網
上載者:User
js|瀏覽器

幾年前,看到一台灣人寫的一段程式(好像是《日語基礎》),在網頁上實現音視頻與文字的同步播放(就是音視頻播到哪部分,相應的文字就亮顯,點擊某一句話,播放器將從這句話開始播放。)當時覺得這個很適合語言教學。於是就查看了代碼,寫了很多函數,有些代碼還加了密。幾百行代碼看了人發暈。最近本人試著寫了一段代碼,實現同樣的功能,代碼很簡潔,主要功能是實現在瀏覽器上實現複讀機的功能(缺少錄音功能)。

我採用網上的《英語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="#" >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 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+' 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)

分析:隨時檢測播放器的當前位置(時間)。如果播放器的當前位置在某一時間內,就將相應的文字顯示為紅色,否則該文字為黑色。當然,還有其他的效果,你去思考吧。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。