林小宅的点名册

由于职业的需要，我每次上课都要点名来确认班上的到课率，因为一边点一边看学生举手效率低下，就上网找了一篇用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>

View Code

这里比较遗憾的是，当看到有学生没有举手的时候，没有办法暂停下来，待后续的改进，因此我加了一个按钮，当发现学生没有举手的时候就点击“观察人员”，把该学生的名单打印到控制台，点完之后再问没来的具体情况。做这个程序也就花了半个小时，卡在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;

这是国外大神提供的参考代码，使用了一下，发现很好用呢，就这样，睡觉！！！