由于职业的需要，我每次上课都要点名来确认班上的到课率，因为一边点一边看学生举手效率低下，就上网找了一篇用JavaScript文字转语音的博客，实现了一个在线点名的网页，下面是我的代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>林小宅的花名册</title> 6 7 <style type="text/css"> 8 #namename{ 9 line-height: 500px; 10 height: 500px; 11 text-align: center; 12 font-size: 100px; 13 } 14 .oo{ 15 width: 290px; 16 height: 20px; 17 margin: 0px auto; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="namename"> 23 准备好了吗？ 24 </div> 25 <div class="oo"> 26 <select name="" id="kj"> 27 <option value="1" >前端1班</option> 28 <option value="2">前端2班</option> 29 <option value="3">前端3班</option> 30 <option value="4">前端4班</option> 31 <option value="5">大数据</option> 32 <option value="6">C语言</option> 33 </select> 34 <button onclick="clickme()">开始点名</button> 35 <button onclick="patient()">观察人员</button> 36 </div> 37 <div id="bdtts_div_id"> 38 <audio id="tts_autio_id" autoplay="autoplay"> 39 <source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&text=开始点名啦" type="audio/mpeg"> 40 <embed id="tts_embed_id" height="0" width="0" src=""> 41 </audio> 42 </div> 43 44 <script type="text/javascript"> 45 46 //前段一班 47 var fontEnd_class1 = "前端1班_郑剀鸿_" 48 +"林彬_" 49 +"张伟彬_" 50 +"林庆祥_" 51 +"谭明智_" 52 +"罗旭强_" 53 +"蔡其成_" 54 +"李瑞林_" 55 +"潘粤湘_" 56 +"房霖_" 57 +"赖展凯_" 58 +"吴宗荣_" 59 +"杨丹娜_" 60 +"黄显权_" 61 +"邓富成_" 62 +"谢嘉炜_" 63 +"杨丹凤_" 64 +"黎炜松_" 65 +"谢金航_" 66 +"龙伟乐_" 67 +"陈浩贤_" 68 +"王雨婷_" 69 +"黄俊威_" 70 +"梁达斌_" 71 +"陈泽凯_" 72 +"邝梓豪_" 73 +"邱文威_" 74 +"陈熙才_" 75 +"梁关伟_" 76 +"陈家恒_" 77 +"黄超铧_" 78 +"赖桂玲_" 79 +"吴胜睿_" 80 +"李永成_" 81 +"刘耿涛_" 82 +"张家毓_" 83 +"蔡志豪_" 84 +"周浩东_" 85 +"吴军龙_" 86 +"鄞沛远_" 87 +"李上钦_" 88 +"邓锦鹏_" 89 +"陈俊安_" 90 +"陈治_" 91 +"梁玉婷_" 92 +"郭金川_" 93 +"陈健欣_" 94 +"李泽伟_" 95 +"林俊宇_" 96 +"陈剑锋_" 97 +"黄钢祥_" 98 +"廖家灼_" 99 +"何富铖_" 100 +"许俊伟_" 101 +"王子泓_" 102 +"吴泽峰_"; 103 //前端2班 104 var fontEnd_class2 ="前端2班_孙唯晟_" 105 +"文浩旭_" 106 +"庄昊庭_" 107 +"廖伟健_" 108 +"聂大森_" 109 +"罗家敬_" 110 +"陈晓生_" 111 +"李晔韬_" 112 +"卜文博_" 113 +"彭旭成_" 114 +"梁婉婷_" 115 +"辛梓瀚_" 116 +"李思_" 117 +"林乐祺_" 118 +"黄才略_" 119 +"关瑜沛_" 120 +"梁沛立_" 121 +"梁绍鹏_" 122 +"植湛深_" 123 +"高建塘_" 124 +"颜卓越_" 125 +"罗浩延_" 126 +"陈昱鸿_" 127 +"周宇杰_" 128 +"余钎华_" 129 +"谈钰锋_" 130 +"卢炯铭_" 131 +"吴键东_" 132 +"张琦_" 133 +"梁佰华_" 134 +"冼耀琪_" 135 +"苏世宇_" 136 +"刘家敏_" 137 +"范显超_" 138 +"严朝朗_" 139 +"林逸新_" 140 +"李文龙_" 141 +"蔡东威_" 142 +"谭源潮_" 143 +"杨嘉鑫_" 144 +"刘浩威_" 145 +"杨柏丽_" 146 +"冯卓鹏_" 147 +"伍桑_" 148 +"谭建岚_" 149 +"梁浩轩_" 150 +"钟所愿_" 151 +"蒋敏维_" 152 +"张海鹏_" 153 +"梁文杰_" 154 +"叶育丰_" 155 +"陈吉周_" 156 +"魏钦宏_" 157 +"韦雄哲_" 158 +"王远旭_" 159 +"庄晓鑫_点名结束"; 160 //前段3班 161 var fontEnd_class3 = "前端3班_郑浩佳_"+ 162 "汤岳文_"+ 163 "黄泽岚_"+ 164 "林泽儒_"+ 165 "李佳川_"+ 166 "郭宇亮_"+ 167 "陈婉丽_"+ 168 "林泽鑫_"+ 169 "董志胜_"+ 170 "刘冬冬_"+ 171 "卢欣苗_"+ 172 "谢根甫_"+ 173 "刘钧铿_"+ 174 "蔡烁_"+ 175 "张思敏_"+ 176 "边建_"+ 177 "林桂鑫_"+ 178 "林晓鹏_"+ 179 "欧楚瑜_"+ 180 "苏信泉_"+ 181 "张志创_"+ 182 "陈泽博_"+ 183 "黄仁海_"+ 184 "杨观霖_"+ 185 "林浩锋_"+ 186 "陈彦旭_"+ 187 "廖世跃_"+ 188 "洪晓东_"+ 189 "刘丽敏_"+ 190 "施木伟_"+ 191 "刘悦川_"+ 192 "李雄杰_"+ 193 "叶成浩_"+ 194 "杨泽轩_"+ 195 "吴伟阳_"+ 196 "崔嘉承_"+ 197 "陈振群_"+ 198 "周仕颖_"+ 199 "朱家浩_"+ 200 "周志源_"+ 201 "黄泽浩_"+ 202 "林于聪_"+ 203 "冯时帆_"+ 204 "文汉鹏_"+ 205 "江俊霖_"+ 206 "谢俊威_"+ 207 "杨建林_"+ 208 "胡洛彬_"+ 209 "陈恺_"+ 210 "谢晓漫_"+ 211 "林煜_"+ 212 "陈洁莹_"+ 213 "陈日冠_"+ 214 "邓锦华_"+ 215 "梁钊柯_"+ 216 "辛子慧_点名结束"; 217 //前端4班 218 var fontEnd_class4 ="前端4班_吴炳麟_"+ 219 "高伟崇_"+ 220 "蔡晋昇_"+ 221 "吴宇轩_"+ 222 "黄慧燕_"+ 223 "黄海琦_"+ 224 "张荣_"+ 225 "叶羽枫_"+ 226 "余秋材_"+ 227 "王伟杰_"+ 228 "黎航铭_"+ 229 "何伟业_"+ 230 "杨永裕_"+ 231 "黄钦豪_"+ 232 "张俊_"+ 233 "温伟韬_"+ 234 "刘凯钢_"+ 235 "郑峻珩_"+ 236 "陈小楠_"+ 237 "江卓峰_"+ 238 "洪浩彬_"+ 239 "陆科良_"+ 240 "刘作林_"+ 241 "黄开筑_"+ 242 "林祈宏_"+ 243 "柯铭_"+ 244 "陈华宏_"+ 245 "詹凡_"+ 246 "朱倍立_"+ 247 "钟东煜_"+ 248 "余华龙_"+ 249 "龙沛元_"+ 250 "许铭全_"+ 251 "翁聪颖_"+ 252 "肖东江_"+ 253 "辛怀睿_"+ 254 "吴勉锐_"+ 255 "林添信_"+ 256 "余志宪_"+ 257 "林洁淮_"+ 258 "郑家宝_"+ 259 "邓伟业_"+ 260 "何涛_"+ 261 "刘蔼瑞_"+ 262 "梁宇航_"+ 263 "范浩林_"+ 264 "陈俊源_点名结束"; 265 //C语言4班 266 var context1 = "C语言4班_冼明朗_刘宇鸿_"+ 267 "刘春雄_" 268 +"刘晓聪_" 269 +"刘粤豪_" 270 +"吴业朋_" 271 +"吴剑洋_" 272 +"吴德昊_" 273 +"吴桂洲_" 274 +"周泽锴_" 275 +"唐进义_" 276 +"庞洪滔_" 277 +"廖辉健_" 278 +"张兆山_" 279 +"徐海祥_" 280 +"朱勇腾_" 281 +"朱桂涛_" 282 +"朱毅龙_" 283 +"李喜廷_" 284 +"李堪立_" 285 +"李新茹_" 286 +"李永聪_" 287 +"杨超文_" 288 +"林宇轩_" 289 +"林志权_" 290 +"林泽航_" 291 +"林琳_" 292 +"柯雅量_" 293 +"温俊豪_" 294 +"潘华锋_" 295 +"潘家炬_" 296 +"王奕敏_" 297 +"白昌煜_" 298 +"练庆钦_" 299 +"罗思维_" 300 +"翁俊源_" 301 +"胡建斌_" 302 +"冼明朗_" 303 +"苏浩洋_" 304 +"范德浩_" 305 +"蓝文壕_" 306 +"蔡翠婷_" 307 +"谢银光_" 308 +"邱利_" 309 +"郭珊珊_" 310 +"陈冠宇_" 311 +"陈泳衔_" 312 +"马伟东_" 313 +"黄建成_" 314 +"黄文伟_" 315 +"黄膨钒_" 316 +"黄锐_" 317 +"黄梓丰_" 318 +"苏西波_" 319 +"任旺_" 320 +"孙润东_点名结束"; 321 //大数据班 322 var bigData_class = "大数据班_彭绪政_"+ 323 "廖炎彬_"+ 324 "冯嘉泳_"+ 325 "谢俊钦_"+ 326 "林泽彬_"+ 327 "陈森华_"+ 328 "雷涛_"+ 329 "宋子洋_"+ 330 "杜伟杰_"+ 331 "薛启炫_"+ 332 "吴希豚_"+ 333 "黄广准_"+ 334 "陈泓哲_"+ 335 "杨文豪_"+ 336 "韩俊铭_"+ 337 "方铭_"+ 338 "刘嘉楠_"+ 339 "陈泽锐_"+ 340 "张大桥_"+ 341 "黄志聪_"+ 342 "陈敏清_"+ 343 "蔡镓锷_"+ 344 "黄嘉泉_"+ 345 "蔡创洲_"+ 346 "谭俊杰_"+ 347 "陈广金_"+ 348 "许坤威_"+ 349 "梁朗明_"+ 350 "吴桂平_"+ 351 "丘文源_"+ 352 "徐鸿宇_"+ 353 "陈梓萼_"+ 354 "李伟元_"+ 355 "钟盟阳_"+ 356 "赵伯鋆_"+ 357 "陈嘉铭_"+ 358 "利锦成_"+ 359 "林楚炯_"+ 360 "叶伟杰_"+ 361 "欧阳一鸣_"+ 362 "肖哲华_"+ 363 "曾剑涛_"+ 364 "蔡铠文_"+ 365 "林宏伟_"+ 366 "苏乙航_"+ 367 "黄庆余_"+ 368 "肖俊杰_"+ 369 "黄峻权_点名结束"; 370 371 function doTTS(ttsText){ 372 var ttsDiv = document.getElementById('bdtts_div_id'); 373 var ttsAudio = document.getElementById('tts_autio_id'); 374 ttsDiv.removeChild(ttsAudio); 375 var au1 = '<audio id="tts_autio_id" autoplay="autoplay">'; 376 var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&text='+ttsText+'" type="audio/mpeg">'; 377 var eee = '<embed id="tts_embed_id" height="0" width="0" src="">'; 378 var au2 = '</audio>'; 379 ttsDiv.innerHTML += au1 + sss + eee + au2; 380 381 var media = document.getElementById("tts_autio_id"); 382 const playPromise = media.play(); 383 if (playPromise !== null){ 384 playPromise.catch(() => { media.play(); }) 385 } 386 document.getElementById("namename").innerHTML = ttsText; 387 } 388 389 var isKeepOn = true; 390 var whereStop = 0; 391 var nameList = [fontEnd_class1,fontEnd_class2,fontEnd_class3,fontEnd_class4,bigData_class,context1]; 392 var arr; 393 var blackName = ""; 394 function clickme(){ 395 arr = nameList[document.getElementById("kj").selectedIndex].split("_"); 396 for(var i = 0;i<arr.length;i++){ 397 //解决作用域的问题，以及setTimeout不能调用带参数的函数，只能在匿名函数中封装调用 398 (function(name,j){ 399 setTimeout(function(){doTTS(name)},j*2500); 400 })(arr[i],i); 401 } 402 } 403 404 function patient(){ 405 var name = document.getElementById("namename").innerHTML+" | "; 406 blackName +=name; 407 console.log(blackName); 408 } 409 410 411 412 413 </script> 414 </body> 415 </html>
这里比较遗憾的是，当看到有学生没有举手的时候，没有办法暂停下来，待后续的改进，因此我加了一个按钮，当发现学生没有举手的时候就点击“观察人员”，把该学生的名单打印到控制台，点完之后再问没来的具体情况。做这个程序也就花了半个小时，卡在setTimeout()这个函数上。因为我需要实现的效果是每隔2秒就点一个学生的名字，用到了for循环，但是每次for循环的时候并不会停下来去点名，而是一下子把for循环的语句执行完，把每个setTimeout加到待执行队列中，然后全部的setTimeout一下全部执行了，形成的效果就是一个班的54个人的名字同时点出来了。网上有人说可以用立即执行函数，用了之后还是没有达到效果，后来才知道原来是setTimeout不能执行带有参数的函数，必须得用一个匿名函数来封装调用，最后的效果是这样的 ：
1 for(var i = 0;i<arr.length;i++){ 2 //解决作用域的问题，以及setTimeout不能调用带参数的函数，只能在匿名函数中封装调用 3 (function(name,j){ 4 setTimeout(function(){doTTS(name)},j*2500); 5 })(arr[i],i); 6 }
另外就是音频播放的问题，media.play()和media.pause()的含义，意思大概明白了，但是很难言语，这里就不说了，只说解决的方法：
1 var media = document.getElementById("tts_autio_id"); 2 const playPromise = media.play(); 3 if (playPromise !== null){ 4 playPromise.catch(() => { media.play(); }) 5 } 6 document.getElementById("namename").innerHTML = ttsText;
这是国外大神提供的参考代码，使用了一下，发现很好用呢，就这样，睡觉！！！