如何在隐藏其容器 div 后使用网络音频 api 停止 iframe 中的音频？

Posted 2023-02-25

【中文标题】如何在隐藏其容器 div 后使用网络音频 api 停止 iframe 中的音频？

【英文标题】：How to stop audio in an iframe using web audio api after hiding its container div?

【发布时间】：2014-05-15 20:05:35

【问题描述】：

我有一个 iframe，用户可以在其中播放/停止音频（使用网络音频 api）。但是，如果我隐藏那个 iframe，我怎么能停止音频呢？ （例如，通过设置 CSS 属性 containerDiv.css('display', 'none')）。我尝试使用 containerDiv.html('') 清除父 div，但 iframe 内的音频仍在播放。

【问题讨论】：

你不能。您能解释一下这个用例，因为它可能有助于我们提供不同的解决方案吗？

我在 iframe 中有一个俄罗斯方块游戏，当用户完成一项任务，等待其他任务时出现。俄罗斯方块应用程序（在 javascript 中也是如此）具有声音和控件来管理这些声音和控件。但是，当新任务准备就绪时，必须隐藏 iframe。现在的问题是，如果用户之前启用了音频，那么它会继续播放。

我假设您控制父框架和子框架，在这种情况下，您可以使用postMessage API 与 iframe 进行通信。这将允许您向 iframe 发送一条消息，告诉它停止音频。

哦，好吧，我不知道。我会试试的，我会告诉你的。同时，如果你愿意，你可以提出你的答案，以便我投票作为解决方案。

【参考方案1】：

您可以使用postMessage API 与 iframe 进行通信。这将允许您向 iframe 发送一条消息，告诉它停止音频。

父窗口中的脚本：

// Assuming the origin of your iframe is http://example.org
function hideTetrisIframe()
  var iframe = document.getElementById('tetris');
  iframe.style.display = 'none';
  iframe.contentWindow.postMessage('stop', 'http://example.org'); 

iframe 内的脚本：

window.addEventListener('message', function(event) 
  if (event.data === 'stop') 
    // Stop audio that's playing
  
, false);

【讨论】：

是的，我已经按照您的最后评论实施了类似的机制。但现在我面临以下错误：Cannot read property 'postMessage' of undefined onMessageReceived。你知道吗？

好的，解决了...使用纯javascript可以正常工作。以前我使用 jquery 来获取 iframe，但它似乎不起作用。谢谢！

对于 jquery 解决方案，我发现了这个：***.com/questions/1654017/…