JS allows the browser to achieve the function of the repetition machine

js| Browser

A few years ago, I saw a program written by a Taiwanese person (like the basics of Japanese), on the Web page to achieve audio and video and text synchronization play (that is, the audio and video broadcast to which part, the corresponding text on the display, click a word, the player will start from this sentence to play. It was thought to be suitable for language teaching. So I looked at the code, wrote a lot of functions, and some of the code was added to the secret. Hundreds of lines of code see people Dizzy. Recently I tried to write a piece of code to achieve the same function, the code is very concise, the main function is to implement the browser on the function of repetition (lack of recording function).

I use the online "English 900 Sentences" voice and text, a total of two pages, a page implementation to pass the script parameters to the second page; the second page implements voice and text synchronization. The main technology uses DHTML. All use client script.

Demo Address:http://www.whtvu.com.cn/english900

Design ideas:

(i) Dynamically loading text and sounds
Put the text in an external JS. The code is as follows:

var e_array = new Array ("hello! Hi! "," Good Morning afternoon evening! "," I ' m Kathy King. ",
...........);

var h_array=new array ("Hello!") ",
"Good morning (afternoon evening)!" ",
"I am Kessi Kim." ",
.....);

var t_array = new Array (7,10,16,19 ...);
var l=e_array.length;

var title= "Greetings";
var h_title= "Greetings"
Ready = true;

Analysis:E_array is an English sentence; H_array is the Chinese meaning; T_array is the time at the beginning of each sentence; title for the topic of the Dialogue (English); H_title for the title of this Dialogue (Chinese). Ready = True for every external JS, mainly in order to detect external JS is downloaded to the client (described below).

(ii) Let the player play different sounds dynamically (after introduction)

(iii) The player is broadcast to a different location, the corresponding text is displayed in a color (to detect the position of the player at any time). After introduction)

(iv) Change the playback speed of the player (after introduction)

Production steps:

We know that to dynamically load client script, you must ensure that the script is downloaded to the client, otherwise it cannot be run. And the variables on the page are only valid on this page, how to pass variables? Please see the following code:

One, index.htm in the link passing parameters:

<a href= "#" >NO2</A>

Analysis:

Location.href is the link parameter in the browser;
Main.htm is the address of the page to be linked;
Id=wav/1-2.wav&x=js/1-2.js is the parameter to pass. (2.wav is the sound file that the link will play; 1-2.js is the external dynamic script to be passed.) ）

Second, main.htm page analysis

1. Dynamically Loading script code:

<script id= "JS" language= "JavaScript" src= "></script>//You can read this.

2. Download the dynamically loaded script to the client code:

<script language= "JavaScript" >

var timeid = null;
Ready = false;
JS.SRC = Location.href.split ("=") [2]; Use the Split function to separate the *.js from the parameters in the Index.htm page.
LOADSCR ();
function Loadscr () {//Timer functions, loading *.js. (Forgetting to introduce the last sentence in *.js is ready = true).
if (ready) {//If Ready = True is detected, the *.js is loaded and stops executing LOADSCR ()
Cleartimeout (Timeid);
Timeid = settimeout ("LOADSCR ();", 100);
}
}

</script>

3. Let the player play different sounds according to the different parameters passed by index.htm:

A. Separating the Sound parameter code: (MP is the player ID)

<script language= "JavaScript" >
Mp. Filename=location.href.split ("=") [1]
Mp. Filename=mp. Filename.split ("&") [0]
if (MP. filename== "")
Alert ("Missing necessary parameters \ nthe Media player should be 9.0")

</script>

B. Implementing variable speed playback code:

<select name= "Select" >
<option value= "1.0" > Normal </option>
<option value= "0.9" > Slow one </option>
<option value= "0.8" > Slow two </option>
<option value= "1.1" > Quick One </option>
<option value= "1.2" > Fast two </option>
</select>

C. Dynamically loading Text code:

<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_ ') =tooltip (h_array[' +i+ ']) onmouseout=tooltip () > ' + (i+1) + '. ' +e_array+ ' </td></tr> ')}
</script>

E_array is the first sentence I text
function Sub_loop (' +i+ ') is as follows:

function Sub_loop (m)

{
Mp. Currentposition= T_array[m];

///Move the player's playhead to the appropriate location

function tooltip (h_array[' +i+ ') is the function of the mouse on a sentence to display the Chinese meaning of the sentence. The code is as follows:

<script language= "JavaScript" >
Show Chinese
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>

The code above can be found on the Dreamweaver code fragment.

D. Text-Illuminated Code:

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)

Analysis: detects the current position (time) of the player at any time. If the player's current position is in a certain time, the corresponding text is displayed in red, otherwise the text is black. Of course, there are other effects, you have to think about it.