How to stop audio in an iframe using web audio api after hiding its container div?

Question

I have an iframe where users can play/stop audio (using web audio api). But how can I stop audio if I hide that iframe? (e.g., by setting the CSS property containerDiv.css('display', 'none')). I've tried to clear the parent div with containerDiv.html(''), but audio inside iframe still keeps playing.

Answer 1

You can use the postMessage API to communicate with the iframe. This would allow you to send a message to the iframe telling it to stop the audio.

A script in the parent window:

// 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'); 
}

A script inside the iframe:

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