JS控制音频顺序播放
做一项目，用到“叫号功能”，网页上有一“叫号”按钮，点击后就读数据库中存的号码，如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 lang="en">
<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" onclick="bo1()">播放1</button>
<button type="button" onclick="bo2()">播放2</button>
<button type="button" onclick="bo3()">播放3</button>
<button type="button" onclick="bo4()">播放4</button>
</div>
<div>
只能输入1，2，3，4 这几个数字的组合：
<input placeholder="如:4213" type="text" id="txt" />
<input type="button" value="播放" onclick="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>
撸码：复制、粘贴，拿起键盘就是“干”！！！
分类:
JavaScript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具