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

Posted 2023-02-25

【中文标题】在 Ionic4 中加载页面时播放声音

【英文标题】：play sound when page has loaded in Ionic4

【发布时间】：2019-08-23 16:55:12

【问题描述】：

不确定它是否与 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

【问题讨论】：

即使我遇到同样的错误，原因可能是 chrome 浏览器的媒体参与度得分。 navigator.getUserMedia(audio: true, (success) => console.log(success), error => console.warn(error.toString()););

如果您的问题与 MEI 分数有关，并且如果您发现任何指南显示如何改进以提高 MEI 分数，请在此处发布@Ricky

所以navigator.getUserMedia 给了我TypeError: navigator.getUserMedia is not a function，所以我使用了navigator.mediaDevices.getUserMedia( - 响应：Promise <state>: "rejected" .. 然后我点击那个发出声音的按钮 - 并重试了那个代码 - 响应仍然“被拒绝”……（？！）

【参考方案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.
  );

【讨论】：

我也是这么想的，但是加载该代码 - 说audio：请求麦克风权限，video：请求摄像头权限（这是有道理的） - 但两者我都不需要.. . 我只想播放音频...