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>
posted @ 2023-06-03 11:16 牛腩阅读(22) 评论(0) 收藏举报
刷新页面返回顶部
牛腩的编程不归路

h5 audio播放声音

公告
