页面的基本结构和效果可以参考前面的,链接:http://1017401036.iteye.com/blog/2395817
基本业务:倒计时功能启动后,若剩下的时间小于或等于系统设定的提醒时长,系统会自动将该项倒计时时间加粗、标红显示,且往前排,同时进行语音提示。这里主要贴语音提示的功能。
参考链接:https://my.oschina.net/chwencong/blog/778483
代码如下:
//播报语音用的参数 var lan="zh";//lan=zh:语言是中文,如果改为lan=en,则语言是英文。 var ie = "UTF-8";//ie=UTF-8:文字格式。 var spd = 5;//spd=2:语速,可以是1-9的数字,数字越大,语速越快。 //text=**:这个就是你要转换的文字。 var url="http://tts.baidu.com/text2audio?lan="+lan+"&ie="+ie+"&spd="+spd+"&text="; /** * 该方法用来播放语音(因为source的src替换之后不生效,所以只能先删除再添加) * @param curID:当前调用哪个播放器播放,若是没有则生成一个 * @param text:播报内容 * **/ function playRemindInfo(curID,text){ //若是没有播报内容,那么不播报 if(text==null || text==undefined || text.toString().length<=0){return false;} //2、判断播放插件是否存在,若存在删除 var src = url+encodeURI(text); var autio = document.getElementById("autio_id_"+curID); if(autio){//说明存在,那么需要先删除 $("#autio_id_"+curID).remove(); } //3、添加新的播放器标签 var html = "<audio id=\"autio_id_"+curID+"\">" +"<source id=\"source_id_"+curID+"\" src=\""+src+"\" type=\"audio/mpeg\">" +"<embed id=\"embed_id_"+curID+"\" height=\"0\" width=\"0\" src=\"\">" +"</audio>"; $("#play_div").append(html); //4、进行播放 autio = document.getElementById("autio_id_"+curID); autio.play();//进行播放 }
说明:curID是每行的唯一ID,用来区分每行数据,也用来生成多个播放器,因为考虑到可能同时播放多个语音。
最后祝大家好运!