javascript – How to play and pause audio within an Iframe

Question:

How to play with a button and another button to stop an audio that is inside an <iframe> in HTML5.

I tried this but nothing

function silenciar() {
    var x = document.getElementById("iframe");
    var y = x.contentWindow;
    y.document.getElementById("audio").muted = true;
}

Answer:

First we must create the buttons in HTML:

<button onclick="playAudio()" type="button">Reproducir</button>
<button onclick="pauseAudio()" type="button">Pausar</button>

Then, in JavaScript we must obtain the audio element within the corresponding iframe and define the functions to play and pause:

var iframe = document.getElementById("iframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
var audio = iframeDoc.getElementById("audio");

function playAudio() { 
    audio.play(); 
} 

function pauseAudio() { 
    audio.pause(); 
} 

You can take a look at documentation related to your question:

How to get elements within an iframe in this link and how to manage an audio element in this other .

Remember, as Dev. Joel tells you, that the iframe must be under the same domain, otherwise you will not be able to access its internal content ( Cross-site scripting ). I hope I have helped you solve your problem.

Scroll to Top