征集网锐志网络淘途找素材上91
创意在线首页
平面设计交互设计CG动漫工业设计建筑环境数码影像创意搜
 首页大赛征集资讯教程画廊访谈作品集创企同盟设计招聘人才专区竞赛台专题论吧 找素材看酷站设计网址库
教程网 Illustrator、Photoshop、CoreaDreaw、AI教程、PS教程
当前位置:首页 > 教程 > 脚本特效 > 正文
JS让浏览器实现复读机的功能
作者: 来源: 发表时间:2007-8-17 17:22:40 浏览:

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

·设计师个人作品集火热申请中!
·查询网站排名推荐您用Chianz排名查询
·“论吧”正式上线 欢迎参与主题讨论
·全球经典酷站推荐欣赏
·矢量素材 给设计师提供强大后盾
·加入设计师论坛,精彩无限
·设计网址大全,免费收录所有设计站点

我采用网上的《英语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;
}
}
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">&nbsp\;’ + msg +
’&nbsp\;</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)

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


在线编辑:morion
本文链接:


推荐阅读:
·2021第十五届“创意中国”设计大奖 征稿章程
·2021第七届“学院派奖”全国艺术与设计大赛征集公告
·青春唯美插画培训网络远程班正在招生
·第八届中国高等院校设计作品大赛启动
·第十二届中国高校美术作品学年展获奖名单公布
·2021第七届“学院派奖”全国艺术与设计大赛征集公告
·第六届“包豪斯奖”国际设计大赛获奖名单揭晓
免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息。对本文有异议,请联络本站!
转载要求:文章作者及来源信息必需保留。转载之图片、文件请不要盗链本站地址,且不准打上各自站点的水印!

近期推荐报道 返回首页更多精彩等着你!

Photoshop| Photoshop快速调出情侣图片柔美的插画艺术| 绝望的小熊—美国插画师Luke
网页设计| 波兰Tiquet网站设计作品欣赏插画艺术| Nanami Cowdroy灵动黑白插画
Photoshop| Photoshop调出美女图片绚丽的橙红HTML/CSS| 实现DIV透明而里面的文字不透明
平面设计| 世界杯之平面广告欣赏插画艺术| Alberto Cerrite&ntil
平面设计| Havaianas人字拖最新平面广告系列网页设计| 英国madefavourite简洁细腻型
关于本站 | 联系方式 | 商业服务 | 合作伙伴 | 站点地图 | 免责声明 | 版权声明 | 在线投稿