商城订单实时语音提醒功能JavaScript部分 附提醒语音音频文件

第一步,按钮控制实时提醒

<form class="layui-form roll-nav" style="margin-left: 81%;margin-top: -5px;" action="">
    <input type="checkbox" checked="" name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
</form>

第二步,在页面中加一个audio,,加载你引用的音频文件,并隐藏掉

 <audio id='audioPlay' src='{__FRAME_PATH}notice.mp3' hidden='true'>

第三步,利用js中的setInterval() 方法一直轮询查找后台返回的 ordernum 值,当值大于0 且实时提醒开关打开时,执行音频播放。

<script>
    layui.use(['form'], function(){
        var form = layui.form
            ,layer = layui.layer
        //监听实时提醒开关
        var timer;
        form.on('switch(switchTest)', function(data){
            if(this.checked){
                layer.msg('实时提醒:'+ (this.checked ? '已开启' : 'false'), {
                    offset: '6px'
                });

                timer = setInterval(domusic, 5000);
                function domusic(){
                    var ordernum = $('#ordernum').html().substr(0,1);
                    if(ordernum>0){
                        document.getElementById('audioPlay').play();
                    }
                }
                domusic();
            }else{
                layer.msg('实时提醒:已关闭', {
                    offset: '6px'
                });
                clearInterval(timer);
            }

        });
    });

</script>

语音提醒音频文件下载

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DreamCoders

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值