在 Ionic4 中加载页面时播放声音

Question

不确定它是否与 Ionic 有关，但是当页面加载时，我有一个播放声音的按钮。

如果我点击那个按钮 - 声音会播放。

然后，我想从那个按钮播放相同的声音 - 但是当页面加载时，所以当页面加载时 - 会播放声音，当您点击该按钮时 - 会播放相同的声音。

NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

我尝试使用ionViewDidEnter、setTimeout 5 秒...但我不断收到此错误消息的权限...

更新 - MEI 分数

我故意将我的权限设置为Auto play sound: Block 以找到正确的解决方案。

我可以根据以下说法提高MEI分数：

在桌面上，用户的媒体参与指数阈值已达到 交叉，表示用户之前播放过有声视频。

这意味着： - 如果在前几页的某处 - 我发出了声音 - 切换到任何其他页面 - 也会触发声音。 - 或有效的点击（加载无声的声音只是为了“收集”权限） - 也可以解决问题..

指望这一点 - 第一次加载 Ionic 项目时，然后正在加载 home.page.ts，这里的技巧是，当我单击菜单项以选择要转到的内页时 -> 这是被认为是有效 click 允许播放音频文件的事件 - 其中声音之前不起作用（因为我一直在刷新同一页面而没有任何点击） - 现在可以在页面切换上使用..

更新背景音乐（视频游戏）

找到这个帖子...我认为这是唯一的方法 How to make audio autoplay on chrome

Answer 1

听起来您的问题与自动播放声音的浏览器权限有关。

在以下情况下允许自动播放声音： 用户与域进行了交互（单击、点击等）。 在桌面上，用户的媒体参与指数阈值已被超过，这意味着用户之前播放过有声视频。 用户已将网站添加到移动设备的主屏幕或在桌面设备上安装了 PWA。

您可以在这里找到更多信息：
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

文章继续建议在启动程序化音频播放时，将返回一个可用于处理成功/失败情况的承诺，例如

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}