美文网首页
JS实现声音提示

JS实现声音提示

作者: 云龙789 | 来源:发表于2021-11-20 22:27 被阅读0次
    • 场景

    有时候后台需要某些场景做声音提示,比如商城有客户下单,后台就需要提示声音

    https://qastack.cn/programming/50490304/how-to-make-audio-autoplay-on-chrome

    • 代码
    <html>
    
    <body>
    <iframe src="notice.mp3" allow="autoplay" id="audio" style="display: none"></iframe>
    
    <script src="http://xxx/assets/js/jquery.min.js"></script>
    
    <script language="javascript">
        $(function () {
            notice();
            setInterval(function () {
                notice();
            }, 5000)
        });
    
    
        // 检测是否有提款
        function notice() {
            let my_url = 'https://xxx/test/index.php';
            $.ajax({
                url: my_url,
                type: 'GET',
                success: function (data) {
                    //向页面渲染后台传过来的数据
                    // if(data == 'success'){
                    // console.log(data);
                    var audio = document.createElement('audio');
                    audio.src = 'https://xxx/test/notice.mp3';
                    // audio.src = './notice.mp3';
                    audio.play();
                    // }
                }
            });
        }
    </script>
    </body>
    </html>
    
    var audio = document.createElement('audio');
     audio.src = 'https://xxx/test/notice.mp3';
     audio.play();
    
    play(); 这个方法,浏览器默认是不允许操作的
    
    所以才必须在页面中加入
    <iframe src="notice.mp3" allow="autoplay" id="audio" style="display: none"></iframe>
    这段代码
    iframe 这段代码运行之后  
    Chrome会注意到已经播放了声音,并允许在音频标签中自动播放。
    

    相关文章

      网友评论

          本文标题:JS实现声音提示

          本文链接:https://www.haomeiwen.com/subject/zmnutrtx.html