我在 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 时,转到该页面,它会播放完整轨道
- 还要求我的 friend 使用此代码转到该页面,但在登录 Spotify 后,它对他们也不起作用
- 播放按钮在博客和 Spotify 文档的示例中工作正常 - 这是在他们的域中,因此它与 iframe 内容在同一域 - 我认为这是一个提示。
- 我还检查了 Chrome 中最近的更改,但只有一个与 iframe 相关的更改是在麦克风和摄像头上添加
allow
。即使使用这个也没有帮助(但这实际上不应该相关)。 - 我还检查了最近的 Safari/MacOS - 这个问题也存在(但在 Firefox/MacOS 上没有)
问题的原因可能是什么?如何解决这个问题?或者也许 Spotify 开发团队需要修复它?
最佳答案
所以,如果您知道去哪里寻找,答案就很明显了。
在 chrome://settings/content/cookies
下,Google Chrome 浏览器有此选项阻止第三方 cookie。我启用了它,这就是问题的原因。
但是为什么我之前没有想到呢?这是因为在这种情况下,Google Chrome 浏览器会向所有非白名单(见下文)站点添加一个在地址栏右侧带有红色 X 的 cookie 图标。单击它时,它会显示两个选项:
- 始终允许[网站的 URL] 网站保存 Cookie
- 继续阻止 cookie
因为我选择了第一个,所以当时对我来说看起来不错。
但此选项与“允许使用第三方cookie”不同,“允许使用第三方cookie”在弹出的选项窗口中不可用。
事实上,要允许网站使用 Spotify 的 cookie,您必须:
- 在 Chrome 设置中禁用“阻止第三方 Cookie”选项
- 或将
[*.]spotify.com
添加到您的白名单(我推荐这个)
这样,任何网站都可以访问 spotify.com
cookie,以检查用户是否登录并正确播放音乐(完整轨道或仅预览)。
最后一点:具有嵌入播放按钮代码的网站必须通过 SSL 访问,因此通过 https
进行访问。
我没有检查如何在 MacOS 上更改 Safari 的设置,但解决方案可能与此类似。
关于api - Spotify 播放按钮不起作用 - 在最近的 Chrome 中仅播放预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52280122/