继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JS控制音频顺序播放

niunan
关注TA
已关注
手记 63
粉丝 20
获赞 97

做一项目,用到“叫号功能”,网页上有一“叫号”按钮,点击后就读数据库中存的号码,如123号, 然后就发声音出来,

思路是网上下载0123456789的叫号声音,然后按钮点击事件里就在JS里写用那个HTML5的video来播放声音就行了,顺序播放声音的话就得用到Setinterval隔一段时间来播放声音的,

网上搜索了一下,终于做出个简单的示例了:

https://img1.mukewang.com/5b90c4d200012a8e08600184.jpg

上面的四个按钮分别播放4种声音

下面的在文本框里输入数字后,再点播放,会按顺序来进行播放的。

源码下载:http://image.niunan.net/H5%E9%9F%B3%E9%A2%91%E6%92%AD%E6%94%BE%E7%A4%BA%E4%BE%8B.zip


下面的代码:


<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>js播放音频测试</title> </head> <body>     <div>         <button type="button" ="bo1()">播放1</button>         <button type="button" ="bo2()">播放2</button>         <button type="button" ="bo3()">播放3</button>         <button type="button" ="bo4()">播放4</button>     </div>     <div>         只能输入1,2,3,4 这几个数字的组合:         <input placeholder="如:4213" type="text" id="txt" />         <input type="button" value="播放" ="bofang()" />     </div>     <script>         var timeoutindex;         var index=0;          var arr; //分隔出来的字符数组         function bo1(){             console.log("进入bo1");            var  audio=new Audio("1.mp3");//路径                 audio.play();          }         function bo2(){             console.log("进入bo2");            var  audio=new Audio("2.mp3");//路径                 audio.play();          }         function bo3(){             console.log("进入bo3");            var  audio=new Audio("3.mp3");//路径                 audio.play();          }         function bo4(){             console.log("进入bo4");            var  audio=new Audio("4.mp3");//路径                 audio.play();         }         function bofang(){             var str = document.getElementById('txt').value;              arr = str.split("");             timeoutindex=  setInterval("bobo()",1000);          }         function bobo(){             eval("bo"+arr[index]+"()");              index++;             if(index>=arr.length){                 index=0;                 clearInterval(timeoutindex);             }         }     </script> </body> </html>
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP