当前位置: 首页 > Web前端 > HTML5

chrome浏览器下音频自动播放的Hack

时间:2023-04-05 18:36:16 HTML5

前言可能很多前端都遇到过这个需求:消息提醒。一般来说,它可以简单地实现,而不是复杂的方式。音频标签提供了这个功能。但是新版chrome浏览器禁止js自动播放音频,见鬼。音频播放这是最简单的音频播放脚本,但是在chrome下会抛出异常:Uncaught(inpromise)DOMException,因为这个操作必须由用户发起。当然,这不是特例。和F11全屏操作一样,浏览器也禁止脚本操作。但是我们有这个需求,怎么破呢?不服输的心能不操作戏吗?Chrome不仅禁止脚本自动调用play,还禁止audio的autoplay属性。但是,如果音频被静音,autoplay属性仍然可以生效。就是可以玩,但是不能干扰用户的视听。这就给我们提供了一个hack的方法:默认开启音频的静音播放,循环播放。当我们需要提醒用户时,打开声音并将播放时间设置为0秒。播放完成后,关闭声音继续。循环。是的,音频一直在播放,但用户听不到。只有我们想让用户听到,我们才能听到,客观上才能实现需求。具体实现结论该方法在chrome上实际测试后可以使用。不过其他浏览器还没有测试过。据说有些浏览器好像是IE不支持muted属性。限于操作系统,未测试。如果IE运行有问题,可以提醒我。