如何询问用户是否允许在 Chrome 浏览器中播放声音

Question

var sound = new Howl({
            src: [this.config['Audio'].English],
            preload: true,
            sprite: this.AudioSpriteEn,
            autoplay: true,
            html5: true,
            muted: false,           
        });    
sound.play();

我想在我的 Angular 网站中自动播放声音 onload，但 Chrome 的自动播放策略是阻止声音播放。

Answer 1

通常，浏览器希望用户与您的网站进行第一次交互，然后触发声音。您是在用户点击后尝试播放，还是在网站加载后自动播放？

根据 Mozilla：https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

从用户的角度来看，在没有警告的情况下自发发出噪音的网页或应用程序可能会令人不快、不方便或令人反感。因此，浏览器通常只允许在特定情况下成功进行自动播放。

这就是 chrome 所说的：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

始终允许静音自动播放。在以下情况下允许自动播放声音：
- 用户与域进行了交互（单击、点击等）。 -在桌面上，用户的媒体参与指数阈值已被超过， 表示用户之前播放过有声视频。 -用户 已将该网站添加到他们在移动设备上的主屏幕或安装了 PWA 在桌面上。顶部帧可以将自动播放权限委托给它们的 iframes 允许自动播放声音。

实际上，您不需要用户专门单击带有“MAKE NOISE”字样的红色大按钮，而是单击您网站中的任何其他元素（列表、div、图像、滑块...）算作“用户交互”，给你带来另一种可能。 IE：如果你展示一个大的 Cookies 广告横幅，你可以在用户关闭该横幅后开始播放音频。

绕过第一用户交互规则：

方法一： 为您的网站提供 PWA 功能并要求用户安装您的 PWA，之后您将能够在无需用户首次交互的情况下播放声音。 注意：这是根据 chrome 文档，可能会在其他浏览器上中断。 https://web.dev/add-manifest/#:~:text=The%20web%20app%20manifest%20is,when%20the%20app%20is%20launched.

方法二：

聆听第一个用户在您的网站正文中点击的声音，然后播放声音。尝试运行 sn-p 然后单击生成的正文

const ks = new Audio('https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3')
let userinteraction = 0
document.addEventListener('click',()=>{
 if(userinteraction) return;
 userinteraction++;
 ks.play()
})

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h1>