有人可以解释一下如何播放和暂停这个 Spotify 嵌入对象吗？ 我试图找到玩家的 ID，但找不到。
网址 → https://open.spotify.com/embed-podcast/show/5iKz9gAsyuQ1xLG6MFLtQg
这是 iframe 代码：
<iframe src="https://open.spotify.com/embed/show/5iKz9gAsyuQ1xLG6MFLtQg?utm_source=generator&&size=detail&theme=light" style="border:0px #ffffff none;" name="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen=""></iframe>谢谢！！
奇怪的是，我在任何地方都找不到此文档，但我能够查看嵌入代码，发现它侦听
postMessage一般代码是：
// 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：看起来 Spotify 实际上已经以两种方式实现了这种通信 - 您可以通过监听父窗口中的
事件来接收来自嵌入的更新（例如，如果您想知道是否有人暂停了它）。'message'
截至 2023 年，Spotify 提供了自己的 API 来实现播放/暂停/搜索等： https://developer.spotify.com/documentation/embeds/references/iframe-api
您可以使用这样的代码，但由于跨域问题，它无法工作：
document.querySelector('iframe').contentWindow.document.body.querySelector('#play-button')
但是您得到：未捕获的 DOMException：访问跨源对象上的属性“文档”的权限被拒绝
所以我相信这是不可能实现的 - 但我很高兴被证明是错误的。
但是我必须从 Spotify 访问特定艺术家的歌曲并在 iframe 中显示它们我收到错误： [信息：控制台（1）]“未捕获的类型错误：无法读取 null 的属性（读取'getItem'）”，来源：https://open.spotifycdn.com/cdn/build/mobile-web-player/vendor~移动网络播放器.dc66b500.js (1) 2023-12-11 16:55:23.949 27883-27883 chromium com.example.youtubeiframe I [INFO:CONSOLE(1)] “SpeedCurve RUM 错误 200：链接到
idasas // Enable JavaScript
webView?.settings?.javaScriptEnabled = true
// Allow mixed content and file access
webView?.settings?.mixedContentMode = WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE
webView?.settings?.allowFileAccess = true
// Load HTML content with embedded Spotify episodes
val htmlContent = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.tracks {
display: flex;
flex-direction: column;
}
.track {
min-width: max-content;
margin-bottom: .8rem;
padding: .8rem 1rem;
border-radius: 10px;
border: 0;
background: #191414;
color: #fff;
cursor: pointer;
}
.track:hover {
background: #1Db954;
}
</style>
</head>
<body>
<div class="tracks" id="tracks-container"></div>
<script type="text/javascript">
// Define a JavaScript interface to call Kotlin functions
function callKotlinFunction(functionName, params) {
AndroidInterface[functionName](params);
}
// Function to load tracks for a specific artist
function loadTracksForArtist(artistId) {
// Use Spotify Web API to get top tracks for the given artist
fetch(`https://api.spotify.com/v1/artists/${artistId}/top-tracks?country=US`, {
method: 'GET',
headers: {
'Authorization': 'Bearer YOUR_ACCESS_TOKEN', // Replace with a valid access token
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
const tracksContainer = document.getElementById('tracks-container');
data.tracks.forEach(track => {
const button = document.createElement('button');
button.classList.add('track');
button.dataset.spotifyId = track.uri;
button.textContent = track.name;
button.addEventListener('click', () => {
// Call Kotlin function when a track is clicked
callKotlinFunction('onTrackClicked', JSON.stringify(track));
});
tracksContainer.appendChild(button);
});
})
.catch(error => console.error('Error fetching tracks:', error));
}
// Load tracks for the specified artist
loadTracksForArtist('$artistId');
</script>
</body>
</html>
""".trimIndent()
// Load the HTML content into the WebView
webView?.loadDataWithBaseURL(null, htmlContent, "text/html", "UTF-8", null)
bind?.spotifyWebView?.webChromeClient = object : WebChromeClient() {}
// Add a JavascriptInterface to allow JavaScript to call Kotlin functions
webView?.addJavascriptInterface(this, "AndroidInterface")