h5 audio播放声音

h5 audio播放声音

http://www.niunan.net/test_audio.html

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!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 @   牛腩  阅读(7)  评论(0)  编辑  收藏  举报
相关博文：
· WPF播放声音
· chat聊天（对话）静态页
· h5 点击按钮播放声音
· H5播放音频和视频
· h5 页面播放base64编码的audio数据
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
历史上的今天：
2019-06-03 thinkphp项目部署在phpstudy里的nginx上
点击右上角即可分享
微信分享提示
AI IDE Trae