在电话屏蔽屏幕上显示音频元数据？答案

【问题标题】：Showing audio metadata on phone block screen?在电话屏蔽屏幕上显示音频元数据？
【发布时间】：2020-07-03 10:31:09
【问题描述】：

我的页面上有一个 html5 音频播放器，它从我的 icecast 服务器流式传输，一切正常。然而，当人们屏蔽他们的手机时，没有元数据，只有 iOS/Android 提供的播放按钮。

有没有办法显示“Glaciar 的直播”之类的内容，例如 Spotify 应用显示歌曲的标题和艺术家时？除了 HTML 和 CSS，我还在使用 PHP 和 Javascript。

提前致谢！

【问题讨论】：

【解决方案1】：

您可以使用Media Session API 自定义锁定屏幕上显示的内容。

但 Safari 不支持它，这意味着您不能使用它来自定义 iOS 设备上的锁定屏幕。

【讨论】：

【解决方案2】：

我刚遇到同样的问题。即使正在播放音频，我们的 Web 应用程序也不会在锁定屏幕上显示任何内容。这是我刚刚发现的：

我们正在 javascript 中设置 new Audio() 元素 - 在我们称为 audio.load() 的用户交互中。然后我们等待canplay 事件触发，并使用该事件处理程序调用audio.play()。当手机现在被锁定时，锁定屏幕上没有显示任何内容。

但是，当我们在audio.load() 之后直接添加audio.play()，以便在同一个用户交互中调用它时，锁定屏幕上的一切都会正常显示。所以看起来，如果在用户交互中调用 audio.play() 很重要。

如果有人想知道为什么我们不在用户交互中调用 play，请提供更多背景信息：我们通常使用音频上下文（在用户交互中解锁）并且刚刚开始回退到音频元素，因为有很多Safari 中与音频相关的错误。

【讨论】：