2024-03-04 13:25:56
## 在 Spotify 嵌入式 中使用 JavaScript 切换播放/暂停按钮</strong></p> <p><strong>## 背景</strong></p> <p>将 Spotify 播放器嵌入到你的网站中是一种让用户欣赏音乐的便捷方式。然而，可能存在需要通过 JavaScript 编程方式切换播放/暂停按钮的情况。本文将提供分步指南，帮助你实现这一目标。</p> <p><strong>## 步骤 1：了解 Spotify 的 Iframe API</strong></p> <p>Spotify 提供了一个 Iframe API，允许你控制嵌入式播放器的某些方面。但遗憾的是，其中不包括切换播放/暂停按钮。因此，我们需要使用变通方法。</p> <p><strong>## 步骤 2：使用 DOM 操作</strong></p> <p>DOM（文档对象模型）操作让我们可以直接与播放器元素交互。通过以下步骤，我们可以获取播放器元素并控制其播放和暂停状态：</p> <pre><code class="hljs"><span class="hljs-comment">// 获取播放器元素</span> <span class="hljs-keyword">const</span> player = <span class="hljs-built_in">document</span>.<span class="hljs-built_in">querySelector</span>(<span class="hljs-string">'iframe[src*="open.spotify.com"]'</span>); <span class="hljs-comment">// 监听播放器元素上的加载事件</span> player.addEventListener(<span class="hljs-string">'load'</span>, () => { <span class="hljs-comment">// 获取播放器窗口对象</span> <span class="hljs-keyword">const</span> playerWindow = player.contentWindow; <span class="hljs-comment">// 获取播放器控制栏元素</span> <span class="hljs-keyword">const</span> controls = playerWindow.<span class="hljs-built_in">document</span>.<span class="hljs-built_in">querySelector</span>(<span class="hljs-string">'.control-bar'</span>); <span class="hljs-comment">// 获取播放/暂停按钮元素</span> <span class="hljs-keyword">const</span> playPauseButton = controls.<span class="hljs-built_in">querySelector</span>(<span class="hljs-string">'button[data-testid="play-pause"]'</span>); <span class="hljs-comment">// 为播放/暂停按钮添加点击事件监听器</span> playPauseButton.addEventListener(<span class="hljs-string">'click'</span>, () => { <span class="hljs-comment">// 切换播放/暂停状态</span> playerWindow.postMessage({ type: <span class="hljs-string">'togglePlayPause'</span> }, <span class="hljs-string">'*'</span>); }); }); </code></pre> <p><strong>## 步骤 3：处理来自 Spotify 的消息</strong></p> <p>上述代码向 Spotify 播放器窗口发送了一个消息，要求其切换播放/暂停状态。为了响应这个消息，我们需要在 Spotify 播放器中添加一个消息侦听器：</p> <pre><code class="hljs">(<span class="hljs-name">function</span>() { // 监听来自播放器窗口的消息 window.addEventListener(<span class="hljs-symbol">'message</span>', (<span class="hljs-name">e</span>) => { // 检查消息类型 if (<span class="hljs-name">e.data.type</span> === <span class="hljs-symbol">'togglePlayPause</span>') { // 切换播放/暂停状态 const player = document.querySelector(<span class="hljs-symbol">'audio</span>')<span class="hljs-comment">;</span> player.paused ? player.play() : player.pause()<span class="hljs-comment">;</span> } })<span class="hljs-comment">;</span> })()<span class="hljs-comment">;</span> </code></pre> <p><strong>## 步骤 4：自定义播放/暂停按钮</strong></p> <p>要进一步自定义播放/暂停按钮，你可以使用 CSS 更改其外观和位置：</p> <pre><code class="hljs"><span class="hljs-comment">/* 自定义播放/暂停按钮的样式 */</span> <span class="hljs-selector-class">.control-bar</span> <span class="hljs-selector-tag">button</span><span class="hljs-selector-attr">[data-testid=<span class="hljs-string">"play-pause"</span>]</span> { <span class="hljs-comment">/* 这里添加你的自定义样式 */</span> } </code></pre> <p><strong>## 结论</strong></p> <p>通过使用 DOM 操作和消息传递，我们可以轻松地在 Spotify 嵌入式 <iframe> 中用 JavaScript 切换播放和暂停按钮。本文提供的详细指南将帮助你轻松将此功能集成到你的网页中。</p> <p><strong>## 常见问题解答</strong></p> <p><strong>1. 这个方法适用于所有 Spotify 嵌入式播放器吗？</strong></p> <p>是的，此方法适用于所有使用 Spotify Iframe API 的嵌入式播放器。</p> <p><strong>2. 我可以用其他编程语言（如 Python 或 Ruby）来做这个吗？</strong></p> <p>虽然本指南使用 JavaScript，但 DOM 操作和消息传递的概念也适用于其他编程语言。</p> <p><strong>3. 是否可以使用 UI 框架（如 React 或 Vue）来简化此过程？</strong></p> <p>是的，UI 框架可以简化 DOM 操作，从而使此过程更加便捷。</p> <p><strong>4. 我可以自定义播放/暂停按钮的外观吗？</strong></p> <p>是的，你可以使用 CSS 轻松自定义按钮的外观和位置。</p> <p><strong>5. 如果我对 Spotify API 有其他问题，我可以在哪里找到更多信息？</strong></p> <p>你可以访问 Spotify 开发者文档了解更多信息：<a href="https://developer.spotify.com/documentation">https://developer.spotify.com/documentation</a></p> </div></div><ins class="adsbygoogle adsbygoogle mb-[20px] md:mb-[15px]" style="display:block;" data-ad-client="ca-pub-9777110919590837" data-ad-slot="3142630786" data-ad-format="auto" data-analytics-uacct data-analytics-domain-name data-adsbygoogle-status data-ad-full-width-responsive="false" full-width-responsive="true" data-v-101bfb4a></ins><div class="grid lg:flex lg:justify-between lg:items-center gap-y-5 lg:gap-y-0"><div class="flex justify-end items-center gap-x-1.5"><div class="hs-tooltip inline-block min-w-[30px]"><button type="button" class="hs-tooltip-toggle flex items-center gap-x-2 text-sm text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"><svg t="1704868210317" class="icon flex-shrink-0" viewBox="0 0 1024 1024" fill="#8a8a8a" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2510" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><path d="M512 280.901818c171.752727 0 328.145455 167.098182 387.956364 238.545455C839.68 591.127273 683.287273 757.992727 512 757.992727S183.389091 591.127273 123.578182 519.447273C183.389091 448 339.781818 280.901818 512 280.901818zM512 209.454545C298.356364 209.454545 117.76 412.858182 56.785455 490.123636a46.545455 46.545455 0 0 0 0 58.647273C117.76 626.036364 298.356364 829.44 512 829.44s393.309091-203.403636 454.283636-280.669091a46.545455 46.545455 0 0 0 0-58.647273C905.309091 412.858182 724.712727 209.454545 512 209.454545z m0 238.545455a71.68 71.68 0 1 1-69.818182 71.447273 69.818182 69.818182 0 0 1 69.818182-71.447273z m0-71.68A139.636364 139.636364 0 0 0 382.603636 465.454545a146.385455 146.385455 0 0 0 30.254546 155.927273 137.076364 137.076364 0 0 0 151.970909 30.254546A143.127273 143.127273 0 0 0 651.636364 519.447273a141.265455 141.265455 0 0 0-139.636364-143.127273z"></path></svg> 0 <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-black" role="tooltip"> 浏览 </span></button></div><div class="block h-3 border-e border-gray-300 mx-3 dark:border-gray-600"></div><div class="hs-tooltip inline-block min-w-[30px]"><button type="button" class="hs-tooltip-toggle flex items-center gap-x-2 text-sm text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"><svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg> 0 <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-black" role="tooltip"> 喜欢 </span></button></div><div class="block h-3 border-e border-gray-300 mx-3 dark:border-gray-600"></div><div class="hs-tooltip inline-block min-w-[30px]"><button type="button" class="hs-tooltip-toggle flex items-center gap-x-2 text-sm text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"><svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z"></path></svg> 0 <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-black" role="tooltip"> 回复 </span></button></div></div></div></div></div></div><div class="lg:col-span-1 lg:w-full lg:h-full lg:bg-gradient-to-r lg:from-gray-50 lg:via-transparent lg:to-transparent dark:from-slate-800"><div class="sticky top-14 start-0 py-9 lg:ps-4" itemprop="author" itemscope itemtype="https://schema.org/Person"><div class="group flex items-center gap-x-3 border-b border-gray-200 pb-8 mb-[15px] dark:border-gray-700"><a class="block flex-shrink-0" itemprop="url" href="https://www.bytezonex.com"><img onerror="this.setAttribute('data-error', 1)" alt="user avatar" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/avatar.png 1x, https://oss.bolzjb.com/avatar.png 2x" class="h-10 w-10 rounded-full" src="https://oss.bolzjb.com/avatar.png"></a><a class="group grow block" href="/"><h5 itemprop="name" class="group-hover:text-gray-600 text-sm font-semibold text-gray-800 dark:group-hover:text-gray-400 dark:text-gray-200"> Kyle </h5><p class="text-sm text-gray-500"> 探索Web开发资源和人工智能教程的代码社区 </p></a><div class="grow w-[120px]"><div class="flex justify-end"><a href="mailto:mybolide@163.com" class="py-1.5 px-2.5 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"><svg t="1726223114709" class="size-3.5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1508" width="16" height="16"><path d="M834.446 213.447h-640.341c-50.176 0-91.022 40.846-91.022 91.022v423.026c0 50.176 40.846 91.022 91.022 91.022h640.341c50.176 0 91.022-40.846 91.022-91.022v-423.026c0-50.176-40.846-91.022-91.022-91.022zM870.855 727.495c0 20.025-16.384 36.409-36.409 36.409h-640.341c-20.025 0-36.409-16.384-36.409-36.409v-423.026c0-20.025 16.384-36.409 36.409-36.409h640.341c20.025 0 36.409 16.384 36.409 36.409v423.026z" fill="#ffffff" p-id="1509"></path><path d="M786.773 358.059l-272.498 171.918-272.498-171.918c-12.743-8.078-29.582-4.21-37.661 8.533-8.078 12.743-4.21 29.582 8.533 37.661l286.72 180.907c4.551 2.845 9.557 4.21 14.563 4.21h0.91c5.006 0 10.013-1.365 14.563-4.21l286.72-180.907c12.743-8.078 16.611-24.917 8.533-37.661-8.306-12.857-25.145-16.611-37.888-8.533z" fill="#ffffff" p-id="1510"></path></svg> 联系我 </a></div></div></div><div class="flex justify-center items-center"><img onerror="this.setAttribute('data-error', 1)" alt="user avatar" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/wx_qrcode.jpg 1x, https://oss.bolzjb.com/wx_qrcode.jpg 2x" class="h-[200px] w-[200px]" src="https://oss.bolzjb.com/wx_qrcode.jpg"></div><div class="text-center group-hover:text-gray-600 text-sm font-semibold text-gray-800 dark:group-hover:text-gray-400 dark:text-gray-200"> 扫码关注微信公众号</div><div class="space-y-6"><ins class="adsbygoogle adsbygoogle mb-[20px] md:mb-[15px] md:max-h-[80px]" style="display:block;" data-ad-client="ca-pub-9777110919590837" data-ad-slot="3397578392" data-ad-format="fluid" data-ad-layout-key="-gx-2v-6g+z+150" data-analytics-uacct data-analytics-domain-name data-adsbygoogle-status data-ad-full-width-responsive="false" data-v-101bfb4a></ins><!--[--><a class="group flex items-center gap-x-6" href="/archives/bN_G014A.html"><div class="grow"><h3 class="text-sm text-[#303133] group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-500 break-all">用 Nginx 代理 WebSocket：揭秘流畅传输技术的奥秘</h3></div><div class="flex-shrink-0 relative rounded-lg overflow-hidden w-20 h-20"><img onerror="this.setAttribute('data-error', 1)" alt="用 Nginx 代理 WebSocket：揭秘流畅传输技术的奥秘" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/2024/02/21/4f56c6efc6433caf6d29d4ecc1abb436.image 1x, https://oss.bolzjb.com/2024/02/21/4f56c6efc6433caf6d29d4ecc1abb436.image 2x" class="w-20 h-20 absolute top-0 start-0 object-cover rounded-lg" src="https://oss.bolzjb.com/2024/02/21/4f56c6efc6433caf6d29d4ecc1abb436.image"></div></a><a class="group flex items-center gap-x-6" href="/archives/2GkzU1R3.html"><div class="grow"><h3 class="text-sm text-[#303133] group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-500 break-all">借古鉴今：看登录态风云变幻，捍卫网络安全</h3></div><div class="flex-shrink-0 relative rounded-lg overflow-hidden w-20 h-20"><img onerror="this.setAttribute('data-error', 1)" alt="借古鉴今：看登录态风云变幻，捍卫网络安全" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/blog/thumb/17.jpg 1x, https://oss.bolzjb.com/blog/thumb/17.jpg 2x" class="w-20 h-20 absolute top-0 start-0 object-cover rounded-lg" src="https://oss.bolzjb.com/blog/thumb/17.jpg"></div></a><a class="group flex items-center gap-x-6" href="/archives/5AmGGdJm.html"><div class="grow"><h3 class="text-sm text-[#303133] group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-500 break-all">解码视频帧的艺术：让视频生动起来</h3></div><div class="flex-shrink-0 relative rounded-lg overflow-hidden w-20 h-20"><img onerror="this.setAttribute('data-error', 1)" alt="解码视频帧的艺术：让视频生动起来" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/blog/thumb/31.jpg 1x, https://oss.bolzjb.com/blog/thumb/31.jpg 2x" class="w-20 h-20 absolute top-0 start-0 object-cover rounded-lg" src="https://oss.bolzjb.com/blog/thumb/31.jpg"></div></a><a class="group flex items-center gap-x-6" href="/archives/Pby0ng6p.html"><div class="grow"><h3 class="text-sm text-[#303133] group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-500 break-all">前后端分离架构的剖析与实践经验分享</h3></div><div class="flex-shrink-0 relative rounded-lg overflow-hidden w-20 h-20"><img onerror="this.setAttribute('data-error', 1)" alt="前后端分离架构的剖析与实践经验分享" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/blog/thumb/19.jpg 1x, https://oss.bolzjb.com/blog/thumb/19.jpg 2x" class="w-20 h-20 absolute top-0 start-0 object-cover rounded-lg" src="https://oss.bolzjb.com/blog/thumb/19.jpg"></div></a><a class="group flex items-center gap-x-6" href="/archives/GXO4IoFL.html"><div class="grow"><h3 class="text-sm text-[#303133] group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-500 break-all">Element-UI 表格多选框分页保存数据的高级指南</h3></div><div class="flex-shrink-0 relative rounded-lg overflow-hidden w-20 h-20"><img onerror="this.setAttribute('data-error', 1)" alt="Element-UI 表格多选框分页保存数据的高级指南" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/blog/thumb/35.jpg 1x, https://oss.bolzjb.com/blog/thumb/35.jpg 2x" class="w-20 h-20 absolute top-0 start-0 object-cover rounded-lg" src="https://oss.bolzjb.com/blog/thumb/35.jpg"></div></a><!--]--><ins class="adsbygoogle adsbygoogle mb:mt-[24px] max-w-[358px] mb-[20px] md:mb-[15px] overflow-hidden" style="display:block;" data-ad-client="ca-pub-9777110919590837" data-ad-slot="3095100140" data-ad-format="auto" data-analytics-uacct data-analytics-domain-name data-adsbygoogle-status data-ad-full-width-responsive="false" full-width-responsive="true" data-v-101bfb4a></ins></div></div></div></div></div><!--]--></div></main><footer class="w-full max-w-[85rem] pb-10 px-4 sm:px-6 lg:px-8 mx-auto"><div class="text-center"><div><a class="flex-none text-xl font-semibold text-black dark:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="/" aria-label="Brand">ByteZoneX</a></div><div class="mt-3 text-sm"><p class="text-gray-500"> © ByteZoneX. 2023 Kyle. All rights reserved. </p><p class="text-gray-500"> 备案号： <a class="text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400" href="https://beian.miit.gov.cn" target="_blank">京ICP备14007360号-4</a></p></div></div></footer></div><!--]--></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":76,"once":78,"_errors":79,"serverRendered":82,"path":83},["ShallowReactive",3],{"blogCategories":4,"$ttMp0qbt10":44},[5,8,11,14,17,20,23,26,29,32,35,38,41],{"id":6,"title":7},"2954937509122932736","日志",{"id":9,"title":10},"2954937466366197760","开发配置",{"id":12,"title":13},"2954937441280065536","前端",{"id":15,"title":16},"2959350982124765184","后端",{"id":18,"title":19},"2959351812286578688","Android",{"id":21,"title":22},"2959351884051120128","IOS",{"id":24,"title":25},"2954937393997676544","操作系统",{"id":27,"title":28},"2954937335512301568","开发工具",{"id":30,"title":31},"2962269454831976448","esp32",{"id":33,"title":34},"2969586738701271040","数据库",{"id":36,"title":37},"2966899206691749888","电脑技巧",{"id":39,"title":40},"3071998081319829504","AI安装配置",{"id":42,"title":43},"2970920559132540928","Office技巧",{"tuijianArticle":45,"struturedDataText":62,"articleData":63},[46,50,53,56,59],{"title":47,"urlName":48,"coverImg":49},"用 Nginx 代理 WebSocket：揭秘流畅传输技术的奥秘","bN_G014A","https://oss.bolzjb.com/2024/02/21/4f56c6efc6433caf6d29d4ecc1abb436.image",{"title":51,"urlName":52},"借古鉴今：看登录态风云变幻，捍卫网络安全","2GkzU1R3",{"title":54,"urlName":55},"解码视频帧的艺术：让视频生动起来","5AmGGdJm",{"title":57,"urlName":58},"前后端分离架构的剖析与实践经验分享","Pby0ng6p",{"title":60,"urlName":61},"Element-UI 表格多选框分页保存数据的高级指南","GXO4IoFL","{\n \"@context\": \"https://schema.org\",\n \"@type\": \"NewsArticle\",\n \"image\": [\"https://oss.bolzjb.com/blog/thumb/14.jpg\"],\n \"headline\": \"如何在Spotify嵌入式\u003Ciframe>中用JavaScript控制播放/暂停按钮？\",\n \"datePublished\": \"2024-03-04T13:25:56+8:00\",\n \"dateModified\": \"2024-03-20T20:46:19+8:00\",\n \"author\": [{\n \"@type\": \"Person\",\n \"name\": \"Kyle\",\n \"url\": \"https://www.bytezonex.com\"\n }]\n }",{"urlName":64,"title":65,"categoryId":12,"categoryTitle":66,"keywords":67,"description":68,"content":69,"createdAt":70,"viewCount":71,"updatedAt":72,"coverImg":73,"datePublished":74,"dateModified":75},"s7Qm7Lju","如何在Spotify嵌入式\u003Ciframe>中用JavaScript控制播放/暂停按钮？","javascript","Spotify嵌入式播放器, JavaScript切换播放/暂停按钮, DOM操作, Iframe API, 消息传递, 自定义播放/暂停按钮, Spotify开发者文档","本文提供了详细指南，介绍了如何在Spotify嵌入式\u003Ciframe>中使用JavaScript切换播放/暂停按钮。通过DOM操作和消息传递，可以轻松实现此功能，并自定义按钮的外观。文中还回答了常见问题，并提供了Spotify开发者文档的链接以获取更多信息。","\u003Cp>\u003Cstrong>## 在 Spotify 嵌入式 \u003Ciframe> 中使用 JavaScript 切换播放/暂停按钮\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>## 背景\u003C/strong>\u003C/p>\n\u003Cp>将 Spotify 播放器嵌入到你的网站中是一种让用户欣赏音乐的便捷方式。然而，可能存在需要通过 JavaScript 编程方式切换播放/暂停按钮的情况。本文将提供分步指南，帮助你实现这一目标。\u003C/p>\n\u003Cp>\u003Cstrong>## 步骤 1：了解 Spotify 的 Iframe API\u003C/strong>\u003C/p>\n\u003Cp>Spotify 提供了一个 Iframe API，允许你控制嵌入式播放器的某些方面。但遗憾的是，其中不包括切换播放/暂停按钮。因此，我们需要使用变通方法。\u003C/p>\n\u003Cp>\u003Cstrong>## 步骤 2：使用 DOM 操作\u003C/strong>\u003C/p>\n\u003Cp>DOM（文档对象模型）操作让我们可以直接与播放器元素交互。通过以下步骤，我们可以获取播放器元素并控制其播放和暂停状态：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-comment\">// 获取播放器元素\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> player = \u003Cspan class=\"hljs-built_in\">document\u003C/span>.\u003Cspan class=\"hljs-built_in\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'iframe[src*="open.spotify.com"]'\u003C/span>);\n\n\u003Cspan class=\"hljs-comment\">// 监听播放器元素上的加载事件\u003C/span>\nplayer.addEventListener(\u003Cspan class=\"hljs-string\">'load'\u003C/span>, () => {\n \u003Cspan class=\"hljs-comment\">// 获取播放器窗口对象\u003C/span>\n \u003Cspan class=\"hljs-keyword\">const\u003C/span> playerWindow = player.contentWindow;\n\n \u003Cspan class=\"hljs-comment\">// 获取播放器控制栏元素\u003C/span>\n \u003Cspan class=\"hljs-keyword\">const\u003C/span> controls = playerWindow.\u003Cspan class=\"hljs-built_in\">document\u003C/span>.\u003Cspan class=\"hljs-built_in\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.control-bar'\u003C/span>);\n\n \u003Cspan class=\"hljs-comment\">// 获取播放/暂停按钮元素\u003C/span>\n \u003Cspan class=\"hljs-keyword\">const\u003C/span> playPauseButton = controls.\u003Cspan class=\"hljs-built_in\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'button[data-testid="play-pause"]'\u003C/span>);\n\n \u003Cspan class=\"hljs-comment\">// 为播放/暂停按钮添加点击事件监听器\u003C/span>\n playPauseButton.addEventListener(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, () => {\n \u003Cspan class=\"hljs-comment\">// 切换播放/暂停状态\u003C/span>\n playerWindow.postMessage({ type: \u003Cspan class=\"hljs-string\">'togglePlayPause'\u003C/span> }, \u003Cspan class=\"hljs-string\">'*'\u003C/span>);\n });\n});\n\u003C/code>\u003C/pre>\n\u003Cp>\u003Cstrong>## 步骤 3：处理来自 Spotify 的消息\u003C/strong>\u003C/p>\n\u003Cp>上述代码向 Spotify 播放器窗口发送了一个消息，要求其切换播放/暂停状态。为了响应这个消息，我们需要在 Spotify 播放器中添加一个消息侦听器：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\">(\u003Cspan class=\"hljs-name\">function\u003C/span>() {\n // 监听来自播放器窗口的消息\n window.addEventListener(\u003Cspan class=\"hljs-symbol\">'message\u003C/span>', (\u003Cspan class=\"hljs-name\">e\u003C/span>) => {\n // 检查消息类型\n if (\u003Cspan class=\"hljs-name\">e.data.type\u003C/span> === \u003Cspan class=\"hljs-symbol\">'togglePlayPause\u003C/span>') {\n // 切换播放/暂停状态\n const player = document.querySelector(\u003Cspan class=\"hljs-symbol\">'audio\u003C/span>')\u003Cspan class=\"hljs-comment\">;\u003C/span>\n player.paused ? player.play() : player.pause()\u003Cspan class=\"hljs-comment\">;\u003C/span>\n }\n })\u003Cspan class=\"hljs-comment\">;\u003C/span>\n})()\u003Cspan class=\"hljs-comment\">;\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cp>\u003Cstrong>## 步骤 4：自定义播放/暂停按钮\u003C/strong>\u003C/p>\n\u003Cp>要进一步自定义播放/暂停按钮，你可以使用 CSS 更改其外观和位置：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-comment\">/* 自定义播放/暂停按钮的样式 */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.control-bar\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[data-testid=\u003Cspan class=\"hljs-string\">"play-pause"\u003C/span>]\u003C/span> {\n \u003Cspan class=\"hljs-comment\">/* 这里添加你的自定义样式 */\u003C/span>\n}\n\u003C/code>\u003C/pre>\n\u003Cp>\u003Cstrong>## 结论\u003C/strong>\u003C/p>\n\u003Cp>通过使用 DOM 操作和消息传递，我们可以轻松地在 Spotify 嵌入式 \u003Ciframe> 中用 JavaScript 切换播放和暂停按钮。本文提供的详细指南将帮助你轻松将此功能集成到你的网页中。\u003C/p>\n\u003Cp>\u003Cstrong>## 常见问题解答\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>1. 这个方法适用于所有 Spotify 嵌入式播放器吗？\u003C/strong>\u003C/p>\n\u003Cp>是的，此方法适用于所有使用 Spotify Iframe API 的嵌入式播放器。\u003C/p>\n\u003Cp>\u003Cstrong>2. 我可以用其他编程语言（如 Python 或 Ruby）来做这个吗？\u003C/strong>\u003C/p>\n\u003Cp>虽然本指南使用 JavaScript，但 DOM 操作和消息传递的概念也适用于其他编程语言。\u003C/p>\n\u003Cp>\u003Cstrong>3. 是否可以使用 UI 框架（如 React 或 Vue）来简化此过程？\u003C/strong>\u003C/p>\n\u003Cp>是的，UI 框架可以简化 DOM 操作，从而使此过程更加便捷。\u003C/p>\n\u003Cp>\u003Cstrong>4. 我可以自定义播放/暂停按钮的外观吗？\u003C/strong>\u003C/p>\n\u003Cp>是的，你可以使用 CSS 轻松自定义按钮的外观和位置。\u003C/p>\n\u003Cp>\u003Cstrong>5. 如果我对 Spotify API 有其他问题，我可以在哪里找到更多信息？\u003C/strong>\u003C/p>\n\u003Cp>你可以访问 Spotify 开发者文档了解更多信息：\u003Ca href=\"https://developer.spotify.com/documentation\">https://developer.spotify.com/documentation\u003C/a>\u003C/p>\n","2024-03-04 13:25:56",144,"2024-03-20 20:46:19","https://oss.bolzjb.com/blog/thumb/14.jpg","2024-03-04T13:25:56+8:00","2024-03-20T20:46:19+8:00",["Reactive",77],{},["Set"],["ShallowReactive",80],{"blogCategories":81,"$ttMp0qbt10":81},null,true,"/archives/s7Qm7Lju.html"]</script> <script>window.__NUXT__={};window.__NUXT__.config={public:{googleAdsense:{id:"ca-pub-9777110919590837",analyticsDomainName:"",analyticsUacct:"",hideUnfilled:false,includeQuery:false,onPageLoad:false,overlayBottom:false,pageLevelAds:false,pauseOnLoad:false,tag:"adsbygoogle",test:false}},app:{baseURL:"/",buildId:"b9e826b1-a867-4ee1-9490-c7deb67e327e",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="6bbb5ed9547f0685c3452eb9-|49" defer></script>