Spotify 播放按钮不起作用 - 仅播放最近 Chrome 中的预览
Spotify Play Button is not working - playing only previews in recent Chrome
我在 Spotify Cares Twitter 上来回奔波了四天多。最后他们把我带到这里，所以我希望 Spotify 的一位开发者能够回答。
我正在尝试将 Spotify 播放按钮放在网站上。我一直在关注 instructions from the documentation. Then I also found on the Spotify blog，一些细节在 2018 年 7 月发生了变化。所以我也尝试了这段代码。
无论我做什么，在 Chrome（版本 68 和 69）中访问网站时，播放按钮嵌入播放器仅播放预览（30 秒）。
代码简单直接取自documentation/blog:
<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 还是当我没有登录并使用播放器中显示的按钮登录时
- 在 Chrome with/without SSL 中 - 在这两种情况下都不起作用
- 在 Firefox 中它工作正常。当我在浏览器上登录 Spotify 时，转到页面，它播放完整曲目
- 还要求我的朋友使用此代码访问该页面，并且 - 正在登录 Spotify - 它对他们也不起作用
- 播放按钮在 Spotify 的博客和文档中的示例中正常工作 - 在他们的域中，因此它与 iframe 内容是相同的域 - 我认为这是一个提示。
- 我还检查了 Chrome 中的最新更改，但只有一个与 iframe 有关的更改是在麦克风和摄像头上添加了
allow。即使使用这个也没有帮助（但这实际上不应该相关）。
- 我还检查了最近的 Safari / MacOS - 问题也存在（但不在 Firefox/MacOS）
问题的原因可能是什么？如何解决这个问题？或者 Spotify 开发团队需要修复它？
所以如果您知道去哪里找，答案就很明显了。
在 chrome://settings/content/cookies Google Chrome 下有这个选项 阻止第三方 cookies。我启用了它，这就是问题的原因。
可是我之前怎么没想到呢？这是因为 Google Chrome 在这种情况下会向所有非白名单（见下文）站点添加一个带有红色 X 的 cookie 图标地址栏。单击它时，它会显示两个选项：
- 始终允许 [url of the site] 站点保存 cookie
- 继续阻止 cookies
因为我选择了第一个，所以当时我觉得它很好。
但是这个选项和"allow use of the third-party cookies"不一样，在弹窗选项里没有window。
事实上，要允许站点使用来自 Spotify 的 cookie，您必须：
- 在Chrome常规设置
中禁用选项阻止第三方cookie
- 或将
[*.]spotify.com添加到您的白名单（我推荐这个）
这样，任何站点都可以访问 spotify.com cookie 来检查用户是否已登录以正确播放音乐（完整曲目或只是预览）。
最后一点： 必须使用 SSL 访问带有嵌入播放按钮代码的站点，因此通过 https.
我没有检查如何在 MacOS 上为 Safari 更改它，但解决方案可能与此类似。
我在 Spotify Cares Twitter 上来回奔波了四天多。最后他们把我带到这里，所以我希望 Spotify 的一位开发者能够回答。
我正在尝试将 Spotify 播放按钮放在网站上。我一直在关注 instructions from the documentation. Then I also found on the Spotify blog，一些细节在 2018 年 7 月发生了变化。所以我也尝试了这段代码。
无论我做什么，在 Chrome（版本 68 和 69）中访问网站时，播放按钮嵌入播放器仅播放预览（30 秒）。
代码简单直接取自documentation/blog:
<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 还是当我没有登录并使用播放器中显示的按钮登录时
- 在 Chrome with/without SSL 中 - 在这两种情况下都不起作用
- 在 Firefox 中它工作正常。当我在浏览器上登录 Spotify 时，转到页面，它播放完整曲目
- 还要求我的朋友使用此代码访问该页面，并且 - 正在登录 Spotify - 它对他们也不起作用
- 播放按钮在 Spotify 的博客和文档中的示例中正常工作 - 在他们的域中，因此它与 iframe 内容是相同的域 - 我认为这是一个提示。
- 我还检查了 Chrome 中的最新更改，但只有一个与 iframe 有关的更改是在麦克风和摄像头上添加了
allow。即使使用这个也没有帮助（但这实际上不应该相关）。 - 我还检查了最近的 Safari / MacOS - 问题也存在（但不在 Firefox/MacOS）
问题的原因可能是什么？如何解决这个问题？或者 Spotify 开发团队需要修复它？
所以如果您知道去哪里找，答案就很明显了。
在 chrome://settings/content/cookies Google Chrome 下有这个选项 阻止第三方 cookies。我启用了它，这就是问题的原因。
可是我之前怎么没想到呢？这是因为 Google Chrome 在这种情况下会向所有非白名单（见下文）站点添加一个带有红色 X 的 cookie 图标地址栏。单击它时，它会显示两个选项：
- 始终允许 [url of the site] 站点保存 cookie
- 继续阻止 cookies
因为我选择了第一个，所以当时我觉得它很好。
但是这个选项和"allow use of the third-party cookies"不一样，在弹窗选项里没有window。
事实上，要允许站点使用来自 Spotify 的 cookie，您必须：
- 在Chrome常规设置 中禁用选项阻止第三方cookie
- 或将
[*.]spotify.com添加到您的白名单（我推荐这个）
这样，任何站点都可以访问 spotify.com cookie 来检查用户是否已登录以正确播放音乐（完整曲目或只是预览）。
最后一点： 必须使用 SSL 访问带有嵌入播放按钮代码的站点，因此通过 https.
我没有检查如何在 MacOS 上为 Safari 更改它，但解决方案可能与此类似。