网页前端设计

http://www.86y.org

搜索文章

js截取文章内容(字符)并转换成数组

用声音读出全文关注我吧
 2012/9/5 14:28:02 阅读次数:9230

把内容用声音读出来(二)把文章内容转换成数组

前几天写了一篇把文章用声音读出来(研究中)这几天一直在研究把内容分段,因为毕竟微软的声音API接口只支持2000个汉字,据估计如果字节过多会导致播放声音会比较慢,才想到了把文章分成多个部分传送数据。

今天的研究结果是解决了“文章如果内容太多会加载声音比较长”把文章分成了N个部分,并转换成数组格式!读出数组的第一个值。其中用到了js截取字符串的方法,做了比较久的测试。因为没有分隔符,全部是用一个一个计算并包含英文的判断!大家可以查看我写的方法(应该还可以简单点。)当然你可以运行一下看看效果,中英文混合都可以!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>把内容用声音读出来(二)把文章分成N个部分分别读</title>
<script>
function getID(id){return document.getElementById(id);}
function checkLong(str)
{
	var cutStr= str.replace(/^\s+|\s+$/g,"");
	cutStr=replaces(cutStr," ","");
	cutStr=replaces(cutStr,",",",");
	var cdt=""
	var showstr="";
	var t=0;
	var h=0;
	if (cutStr=="")cutStr = "cutStr函数异常:字符串为空"; //------------来源长度检查	 
	for(i=0;i<cutStr.length;i++ )
	{
		if(cutStr.substr(i,1).match("[\u4e00-\u9fa5]"))
			t=t+2;//alert("汉字");
		else
			t=t+1;//alert("英文");
	 }
	 return t;
}
function checkWidth(str,lengths)//获取str字节为lengths长度的位置
{
	var count=0,ch=0,ce=0;
	var ct=0;
	for(var i=0;;i++)
    {
		if(str.substr(i,1).match("[\u4e00-\u9fa5]"))
		{  
			ch+=1;//alert("汉字");
			ct+=2;
		}
		else
		{
			ct+=1;
			ce+=1;//alert("英文");
		}
		if(ct>lengths-1 || str.substr(i,1)=="")break;
    }
	if(ch==5)
		count=5;
	else if(str.length<lengths/2)
		count=str.length;
	else
		count=ch+ce;
    return count;
}
function replaces(cont,bec,be){   //要替换的内容,替换字符串,替换成字符串
	cont=cont.replace(bec,be);
	return cont;
}
function cutstr(id,lengths)
{	
	var news = getID(id).value;	
	var alllength=checkLong(news);//计算文章总字数
	var whpage=(alllength/lengths);  //计算一共有几段
	if(parseInt(whpage)<whpage) //判断几段如果有小数点+1
		whpage=parseInt(whpage)+1;
	var alls="";	
	var wpage;
	var overle=0;
	var strdel="";
	strdel=news.substring(0,alllength);	
	for(var i=0;i<whpage;i++)
	{
		var t=0;
		var subs="";
		var tlse=0;			
		for(var j=0;;j++)
		{				
			if(strdel.substr(j,1).match("[\u4e00-\u9fa5]"))
			 	t=t+2;//alert("汉字");	
			 else
				t=t+1;//alert("英文");
			if(t>lengths)
				break;
			subs+=strdel.substr(j,1);			
			if(strdel.substr(j,1)=="")break;		
		}
		var ss=strdel.substring(0,lengths);
		tlse=checkWidth(ss,lengths);
		strdel=strdel.substring(tlse,checkLong(strdel));//获取最当前段的位移宽度
		if(i<whpage-1)
			alls+=subs+"__";
		else
			alls+=subs;
	}
	var allarray=alls.split("__");//转换成数组
	getID("show_list").innerHTML=alls;
}
</script>
</head>
<body>
<textarea name="dd1" cols="60" rows="6" id="dd1">前几天看到有个网站可以阅读所选文字并读出来,感觉一篇小说如果全部让声音读出来那会不会更好呢!其实这只是我的想法</textarea><br />
<div id="show_list"></div>
<a href="javascript:cutstr('dd1',10)" >截取字符串长度为10字节(即5个汉字/10个英文)分断显示并读出来</a>
<div id="dd3"></div>
</body>
</html>

还需要有一个flash播放声音与JS互动功能就完美了.


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭