How can I mute the audio source of an html page embedded in an iframe?

Question

John Kurlak · Accepted Answer

You won't be able to mute the external audio because browsers prevent you from inspecting/interacting with the DOM of embedded pages (for security reasons).  Calling document.getElementsByTagName didn't work because that only queries the main document, not the embedded documents.

The only real solution I can think of is to write a proxy in a server-side language and embed the pages via your proxy.  You can write the proxy so that it strips out audio tags.

ChatGPT · Answer

Muting the audio source of an HTML page embedded in an iframe can be challenging due to browser security policies and the same-origin policy. Here are some methods you can consider:

1. Control the Source Page

If you have control over the content of the iframe (i.e., the page being embedded), you can directly modify that page to mute audio. You can do this by using the HTML5 <audio> or <video> elements with the muted attribute:

<audio controls muted> 
  <source src="audio-file.mp3" type="audio/mpeg"> 
  Your browser does not support the audio element. 
</audio>

2. Using JavaScript

If you can r

Supritha N · Answer

You need to use a muted attribute to mute audio file in HTML.

Example

[code]%3Caudio controls muted%3E
      %3Csource src="guitar.mp3" type="audio/mpeg"%3E
%3C/audio%3E
[/code]

Lisa Ewart · Answer

Start with this:

f [ https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_volume ]rom W3schools:

%3C!DOCTYPE html%3E

%3Chtml%3E

%3Cbody%3E

%3Cbutton onclick="getVolume()" type="button"%3EWhat is the volume?%3C/button%3E

%3Cbutton onclick="setHalfVolume()" type="button"%3ESet volume to 0.2%3C/button%3E

%3Cbutton onclick="setFullVolume()" type="button"%3ESet volume to 1.0%3C/button%3E%3Cbr%3E

%3Cvideo id="myVideo" width="320" height="176" controls%3E

%3Csource src="mov_bbb.mp4" type="video/mp4"%3E

%3Csource src="mov_bbb.ogg" type="video/ogg"%3E

Your browser does not support HTML5 video.

%3C/video%3E

%3Cscript%3E

var vid = document.getElementById("myVideo");

function getVolume() {

alert(vid.volume);

}

function setHalfVolume() {

vid.volume = 0.2;

}

function setFullVolume() {

vid.volume = 1.0;

}

%3C/script%3E

%3Cp%3EVideo courtesy of %3Ca href="Big Buck Bunny [ https://www.bigbuckbunny.org/ ]" target="_blank"%3EBig Buck Bunny%3C/a%3E.%3C/p%3E

%3C/body%3E

%3C/html%3E

Gummadi Avinash · Answer

[code]          %3Cvideo autoplay muted loop playsinline controls"true"  class="wl_video_bg"%3E
              %3Csource src="./videos/wl_video_bg.mp4" 			type="video/mp4"%3E
              Your browser does not support HTML video.
            %3C/video%3E
[/code]if you are asking from code side we mute like this so you can unmute

if you want unmute(if controls not there) in website right click on video then select “show contols” then you can unmute there.

Anonymous · Answer

If you’re creating the page hosting the audio then it’s on you, the loop attribute is not required for the audio to work, but it will require users to press play.

If you add a loop then the only way to stop it is for the user to press pause.

Srithan Savela · Answer

YES.

The src attribute specifies the location (URL) of the external resource.

SRC Attribute can be used on the following elements:

1. %3Caudio%3E
2. %3Cimg%3E
3. %3Cembed%3E
4. %3Cvideo%3E
5. %3Cinput%3E
6. %3Ciframe%3E
7. %3Ctrack%3E
8. %3Cscript%3E
9. %3Csource%3E
For the examples of real usage of SRC attribute in the above elements, refer to this w3schools page [ https://www.w3schools.com/tags/att_src.asp ].

Chandan · Answer

You can simply insert an audio in HTML using the syntax given below-

[code]%3Caudio%3E
    %3Csource src="sample.mp3" type="audio/mpeg"%3E
%3C/audio%3E
[/code]

Anonymous · Answer

a frame is hyst basically a container that holds data on another source… tears ago this was the only way to do it but recent adavnces ith web technology mean the iframe isnt realy needed anymore… take youtube as an example, when you put a youtube video on a page it uses an iframe, the video is still on youtube but theres a frame on your site that contains the video… however the use of iframes and frames in generalisnt limited to youtube, you can embed an entire webpage into a frame

Vikas Kukreti · Answer

You can't. If the URL isn't in the HTML, how would the browser know where to get it?

But there is a trick that can solve your purpose.

html file *

[code]%3Chtml%3E
%3Cbody%3E

%3Ciframe id="iframe" src=""%3E%3C/iframe%3E

%3Cscript src="main.js"%3E%3C/script%3E

%3C/body%3E
%3C/html%3E
[/code]main.js file *

[code]var iframe = document.querySelector('#iframe');
iframe.setAttribute('src', 'http://your-website.org/some-link-to-iframe/');
[/code]Though it removes the url from iframe, the javascripts dynamically add that.

Hope it helps!

Kume Sana · Answer

Same reason bread is not toasted in kitchens using the dishwasher.

There is no reason to even begin to fathom the idea of using the %3Cscript%3E tag for audio. There are things for audio, and %3Cscript%3E is not it. %3Cscript%3E is for other stuff. It looks like it is for other stuff and everyone knows it is.

Jaskaran · Answer

You can know about HTML5 at w3schools.com or you can use "amazing audio player", it creates great audio players with loads of features and is compatible with all HTML enabled browsers

Mitul Shah · Answer

Hi,

Many top websites are applying this technique. Maybe, canvas technique can be use to hide the content. But exactly how it is used that i don’t know. Sorry :(

Michael Moore · Answer

Can you be more specific on which tag file or files you wanting to play? Audio, video?

Srinithi R · Answer

You can use javascript to load the source, and it will not be visible in [code ]iframe url[/code] in page source code. For example,

[code]%3Cscript type="text/javascript"%3E
$(document).ready(function(e) {
  $('iframe').attr('src','http://www.flickr.com/');
});
%3C/script%3E

%3Cbody%3E
%3Ciframe src="" /%3E
%3C/body%3E
[/code]

John Eniola · Answer

I assume you are using the HTML5 audio element, all you need is to set the loop property of the element to true. See a sample JS code below

var audioElement=document.createElement(‘audio’);

audioElement.src=’audio-source.mp3′;

audioElement.loop=true; // makes browser never stop playing the audio - this is what you need

audioElement.volume=1;

audioElement.classList.add(‘no-display’);

audioElement.play();

// document.body.appendChild(audioElement);

the above line I commented is optional

but on Chrome and some other browsers, you have to tie this to a real user-triggered event - maybe when the user clicks a button or so because it will not start playing if you call the function onload

Anonymous · Answer

An audio, using the user agent default set of controls, with one source.

[code]%3Caudio controls
  src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"%3E
Your user agent does not support the HTML5 Audio element.
%3C/audio%3E
[/code]An audio, using the user agent default set of controls, with alternative sources.

[code]%3Caudio controls%3E
 %3Csource src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'%3E
 %3Csource src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'%3E
 %3Cp%3EYour user agent does not support the HTML5 Audio element.%3C/p%3E
%3C/audio%3E
[/code]

Shubham Saurav · Answer

Yes but you have to use it inside audio tag same as for video u have to use it inside of video tag!