h5 audio播放声音
http://www.niunan.net/test_audio.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<title>测试播放声音</title>
</head>
<body>
<div>
序号：<input id="xuhao" type="number" value="22" />
</div>
<div>
诊室：
<label>
<input type="radio" name="rad" value="沉香诊室" checked="checked" />
沉香诊室
</label>
<label>
<input type="radio" name="rad" value="関元诊室" />
関元诊室
</label>
<label>
<input type="radio" name="rad" value="合香诊室" />
合香诊室
</label>
</div>
<button id="btn1">测试语音</button>
<audio id="audio1" src="music/请.mp3" controls="controls" hidden="hidden"></audio>
<audio id="audio2" src="" controls="controls" hidden="hidden"></audio>
<audio id="audio3" src="music/号到.mp3" controls="controls" hidden="hidden"></audio>
<audio id="audio4" src="" controls="controls" hidden="hidden"></audio>
<audio id="audio5" src="music/就诊.mp3" controls="controls" hidden="hidden"></audio>
<hr />
<div id="mes"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
var aud1 = document.getElementById("audio1");
var aud2 = document.getElementById("audio2");
var aud3 = document.getElementById("audio3");
var aud4 = document.getElementById("audio4");
var aud5 = document.getElementById("audio5");
var onoff = false; //序号没有播放完则不放“号到”的声音
var i = 0; //播放序号，从第0位开始放
var timer;
$(function () {
$('#btn1').click(function () {
var no = $('#xuhao').val();
var zhenshi = $('input[name=rad]:checked').val();
$('#audio4').attr("src","music/"+zhenshi+".mp3")
$('#mes').html("请" + no + "号到" + zhenshi + "就诊")
bofang();
})
})
//播放声音
function bofang() {
aud1.play(); //读“请”
aud1.addEventListener('ended', function () {
//读序号
playlist();
});
aud2.addEventListener('ended', function () {
if (onoff) {
aud3.play();
}
});
aud3.addEventListener('ended', function () {
aud4.play();
});
aud4.addEventListener('ended', function () {
aud5.play();
});
aud5.addEventListener('ended', function () {
onoff = false;
i = 0;
mainonoff = true;
$("#callTips").hide();
});
}
function playlist() {
var number = $('#xuhao').val(); //序号
var arr = number.split(""); //序号分隔成了单个数字，
var buffer = new Array();
switch (arr.length) {
case 1: buffer = arr; break;
case 2:
buffer[0] = arr[0]; buffer[1] = "十"; buffer[2] = arr[1];
if (arr[0] == "1") {
buffer[0] = "十";
buffer[1] = arr[1];
buffer.splice(2, 1);
}
if (arr[1] == "0") {
buffer.splice(2, 1)
if (arr[0] == "1") {
buffer[0] = "十";
buffer.splice(1, 1);
}
}
break;
case 3:
buffer[0] = arr[0]; buffer[1] = "百"; buffer[2] = arr[1]; buffer[3] = "十"; buffer[4] = arr[2];
if (arr[2] == "0") {
buffer.splice(4, 1);
if (arr[1] == "0") {
buffer.splice(2, 2);
}
} else if (arr[1] == "0") {
buffer.splice(3, 1);
}
break;
case 4:
buffer[0] = arr[0]; buffer[1] = "千"; buffer[2] = arr[1]; buffer[3] = "百"; buffer[4] = arr[2]; buffer[5] = "十"; buffer[6] = arr[3];
if (arr[3] == "0") {
buffer.splice(6, 1);
if (arr[2] == "0") {
buffer.splice(5, 1);
}
if (arr[2] == "0" && arr[3] == "0") {
buffer.splice(4, 1);
}
if (arr[1] == "0") {
buffer.splice(3, 1);
}
if (arr[1] == "0" && arr[2] == "0" && arr[3] == "0") { buffer.splice(2, 1); }
} else if (arr[2] == "0") {
buffer.splice(5, 1);
if (arr[1] == "0") {
buffer.splice(2, 2);
}
} else if (arr[1] == "0") {
buffer.splice(3, 1);
}
break;
//case 5: buffer[0] = arr[0]; buffer[1] = "万";buffer[2] = arr[1]; buffer[3] = "千"; buffer[4] = arr[2]; buffer[5] = "百"; buffer[6] = arr[3]; buffer[7] = "十"; buffer[8] = arr[4]; break;break;
default: alert("序号过大!"); return;
}
clearInterval(timer);
timer = setInterval(function () { playNumber(buffer); }, 500); //开始播放序号
}
function playNumber(arr) {
if (i > arr.length - 1) {
clearInterval(timer); //停止播放序号
onoff = true; //打开下一个播放开关
aud3.play();
return;
}
eval('play("' + arr[i] + '")');
i++;
}
//播放指定音频
function play(str) {
aud2.src = "music/" + str + ".mp3";
aud2.load();
aud2.play();
}
</script>
</body>
</html>
标签：function,arr,audio,buffer,play,h5,splice,var,播放 From： https://www.cnblogs.com/niunan/p/17453684.html