JS控制音频顺序播放
标签：
JavaScript
做一项目，用到“叫号功能”，网页上有一“叫号”按钮，点击后就读数据库中存的号码，如123号， 然后就发声音出来，
思路是网上下载0123456789的叫号声音，然后按钮点击事件里就在JS里写用那个HTML5的video来播放声音就行了，顺序播放声音的话就得用到Setinterval隔一段时间来播放声音的，
网上搜索了一下，终于做出个简单的示例了：
上面的四个按钮分别播放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>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦