JS实现声音提示

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

JS实现声音提示
第五节实现zabbix报警功能之页面信息报警和页面提示声音报警
捕获窗口关闭、刷新事件
强势围观！JS仿智能搜索究竟有多牛逼？
OpenGLES3-OpenGLES画板
手机端实现Tooltip (Hover)
js 实现简单弹出'确认'、'取消' 提示
60s倒计时
一份头条前端面试准备[整理稿]
JS实现插入排序、快排、二分查找法

场景

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

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会注意到已经播放了声音，并允许在音频标签中自动播放。