Spotify播放按钮不起作用-仅在最近的Chrome浏览器中播放预览

Question

我在Spotify Cares Twitter上来回走了四天。最后他们将我定向到这里，所以我希望Spotify的一名开发人员会回答。

我正在尝试在网站上放置Spotify播放按钮。我正在关注instructions from the documentation。然后我也found on the Spotify blog，一些细节在2018年7月发生了变化。所以我也尝试了这段代码。

无论我做什么，当在Chrome（版本68和69）中访问网站时，“播放按钮”嵌入播放器仅播放预览（30秒）。

代码很简单，直接摘自文档/博客：

<iframe src="https://open.spotify.com/embed?uri=spotify:album:1DFixLWuPkv3KT3TnV35m3" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

我已将此代码放入空HTML中，因此完全没有其他代码干扰。您可以检查它in the example on Codepen。

我试图找出问题所在，这是我所发现的：

• 在Chrome中，它永远无法正常工作：无论我登录Spotify还是不登录并使用播放器中显示的按钮登录
• 在带有/不带有SSL的Chrome中-在两种情况下均不起作用
• 在Firefox中，它可以正常运行。当我在浏览器上登录Spotify时，转到该页面，它会播放完整曲目
• 还要求我的朋友使用此代码访问该页面，并且-登录到Spotify-对他们也不起作用
• “播放”按钮在Spotify博客和文档中的示例中可以正常使用-位于其域中，因此与iframe内容位于同一域-这是我的提示。
• 我还检查了Chrome的最新更改，但是只有一个有关iframe的内容在麦克风和摄像头上添加了allow。即使使用此工具也无济于事（但这实际上不应相关）。
• 我还检查了最近的Safari / MacOS-也存在此问题（但在Firefox / MacOS上却没有）

该问题的原因可能是什么？如何解决呢？还是Spotify开发人员团队需要修复它？

Answer 1

因此，如果您知道在哪里看，答案就非常明显。

在chrome://settings/content/cookies下，Chrome浏览器具有此选项阻止第三方cookie 。我启用了它，这就是问题的原因。

但是为什么我以前没有想到呢？这是因为在这种情况下，谷歌浏览器会向所有未列入白名单的网站（见下文）添加一个在地址栏右侧带有红色 X 的cookie图标。单击该按钮会显示两个选项：

• 始终允许[站点的网址]网站保存cookie
• 保持阻止cookie

由于我是第一个被选中的人，所以那时对我来说看起来不错。

但是此选项与“允许使用第三方cookie”不同，后者在弹出的选项窗口中不可用。

实际上，要允许网站使用Spotify中的cookie，您必须：

通常，
1. 在Chrome设置中禁用选项阻止第三方Cookie
2. 或将[*.]spotify.com添加到您的白名单中（我推荐这个）

这样，任何站点都可以访问spotify.com cookie，以检查用户是否已登录以正确播放音乐（完整曲目或只是预览）。

最后一点注意事项：必须使用SSL才能访问带有嵌入播放按钮代码的网站，因此必须通过https。

我没有检查如何在MacOS的Safari上进行更改，但是解决方案可能与此类似。