如何使用 JAVASCRIPT 播放和暂停 Spotify embed？

Question

谁能解释一下如何播放和暂停这个 spotify 嵌入对象？我试图找到播放器的 ID，但我找不到。

URL→https://open.spotify.com/embed-podcast/show/5iKz9gAsyuQ1xLG6MFLtQg

这是 iframe 代码：

<iframe src="https://open.spotify.com/embed/show/5iKz9gAsyuQ1xLG6MFLtQg?utm_source=generator&amp&size=detail&amp;theme=light" style="border:0px #ffffff none;" name="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen=""></iframe>

谢谢！！

Answer 1

您可以使用这样的代码，但由于 cross-origin 个问题，它无法运行：

document.querySelector('iframe').contentWindow.document.body.querySelector('#play-button')

但您得到：未捕获的 DOMException：访问属性 cross-origin 对象上的“文档”的权限被拒绝

所以我认为这是不可能实现的 - 但我很高兴被证明是错误的。

Answer 2

奇怪的是我在任何地方都找不到这个文档，但我能够查看嵌入代码以弄清楚它会监听 postMessage events 以进行 cross-origin 通信和您的请求有可能。

通用代码为：

// Get a reference to the embed iframe element
const spotifyEmbedWindow = document.querySelector('iframe[src*="spotify.com/embed"]').contentWindow;
spotifyEmbedWindow.postMessage({command: 'toggle'}, '*');

上面的代码应该在嵌入播放暂停或停止时开始播放，如果已经在播放则暂停它。

还有一些其他命令，但它们可能不是您要查找的命令（'play'，例如，实际上将播放器重新启动到曲目开头，并且没有明确的 'pause'命令）。

PS: It looks like Spotify has actually implemented this communication both ways - you can receive updates from the embed (for example, if you want to know if someone has paused it), by listening for 'message' events in the parent window.

如何使用 JAVASCRIPT 播放和暂停 Spotify embed？

How to play and pause Spotify embed with JAVASCRIPT?

javascript

android-mediaplayer

spotify