Mute music played in an iframe?

Question

So I have an iframe whose "src" points to the URL of some music. The iframe is hidden and it plays the music automatically. How do I add a button to mute the music?

<iframe hidden="true" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86
        src="http://urlofmusic"></iframe>

Note that the music is from an external website. Also the URL doesn't point to a particular file. It's simply an external link provided by the website.

Could you provide your code so we can see what you're doing? — MattD, Aug 24 '15 at 03:23
is `http://urlofmusic` pointing to some audio file ? (`.mp3`) Is this file on the same server than your page? If those two conditions are true, then you can access it via `document.querySelector('iframe').contentDocument.querySelector('video')` then simply change its `muted` property to `true`if you just want to mute it or even call its `pause()` method. — Kaiido, Aug 24 '15 at 03:43
@Kaiido what if the conditions you mentioned are true? Why did you use querySelector('video') since it's a .mp3 file? — aaa, Aug 24 '15 at 17:01
Well give it a try, you'll find that browsers do parse Media files in a video element, no matter if it's an audio file or a video one — Kaiido, Aug 25 '15 at 00:15
I don't think you can access element inside a frame. You will get a permission error. Take a look here [http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe](http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe) — takid1412, Aug 25 '15 at 06:18
@takid1412 except if the document you're accessing is on the same domain as the parent page — Kaiido, Aug 26 '15 at 08:49

hurtbox · Answer 1 · 2015-08-24T03:30:09.737

1

You want to use "controls" parameter inside the audio tag

<audio controls>
<source src="nameofsong.ogg" type="audio/ogg">
<source src="nameofsong.mp3" type="audio/mpeg">
audio tag not supported message optional
</audio>

You can substitute the filename for the URL of the song in the src

edited Aug 24 '15 at 03:30

answered Aug 24 '15 at 03:25

hurtbox

376
1
3
13

You can refer to my edition above. The url is not pointing to any music file. Instead it is the address of the entire iframe provided by the external website. – aaa Aug 24 '15 at 04:31

score 1 · Accepted Answer · answered Aug 24 '15 at 05:43

The only way to mute a iframe is remove it from html. You can clone it for unmute later. But you cannot pause and resume, it like stop and play.
HTML

<div id = "iframe_contain">
    <iframe width="0" height="0" hidden="hidden" id="iframe"
        src="http://www.youtube.com/embed/y6120QOlsfU?autoplay=1&loop=1">
    </iframe>
</div>
<a href="javascript:" id="mute">Mute</a><a href="javascript:" id="unmute">Unmute</a>

JS

(function(){
    $("#mute").click(mute);
    $("#unmute").click(unmute);
    //backup iframe
    var iframe_bk;
    //play status
    var status = 1;
    function mute(){
        if(status!=1) return;
        var iframe = $("#iframe");
        iframe_bk = iframe.clone();
        iframe.remove();
        status = 0;
    }
    function unmute(){
        if(status!=0) return;
        if(iframe_bk){
            $("#iframe_contain").append(iframe_bk);
            iframe_bk = null;
            status = 1;
        }
    }
})();

I use jQuery and here working version in jsfiddle

Mute music played in an iframe?

2 Answers2