Hi, I ve created an html page (hype document) which contains an iframe, where I m loading my content, (several hype documents) using the “innerhtml” attribute. I would like to add some bg looping music to my parent html, but it has to be triggered by an iframe action. I tried to use the
window.parent.document.getElementById(‘audio’).play();
to control the audio element located to parent, assuming the audio id element of my music is “audio” with no results.
I cant figure out what I m doing wrong, please help.
Solution: the window.parent.document.getElementById(‘audio’).play(); is correct but you can’t see the result locally, only on a server
you can see the html files, starting from index.html which is the main page here:
All other html files are loading inside the big rectangle (iframe). I need to control background audio, by pressing a button inside the iframe. I can send my project files also if necessary
Thank you
It’s the blue button that triggers the video (I ll replace the video later, with another one with no music) or I can create a new one dedicated for audio only
No, not the video, I want to add an audio element, to use it as a background music, the reason I m not triggering it “on scene load”, is that autoplay in ios is disabled, so I want an event to happen within the iframe to start the audio playing.
Here is another link with rough elements to get things clearer:
The index.html contains the audio element, and the button tha says" play parent audio element" within the iframe, is that i need to press to play the audio.
thank you
Here is a much more simplified version of what I m trying to do.
I m trying to change parent background color with a button. If you run only “test.html” the button is working and change the bg of the container page.
When I embed in to an iframe (index_test.html), the button doesnt control the bg color of the index_test.html. Is there a way to achieve this? thank you
Without a test project I am not really able to replicate the issue.
As it is an iframe, you may need to search:
var audioTag = $('#iframeElementID').contents().find("audio").html();
console.log(audioTag); // this should give you the content, and sources in console
var audio = audioTag.get(0) // this should give you the name of the mp3 file
audio.play(); // play the audio
Again I must stress, without being able to have a project in front of me, its difficult to replicate.
so sorry I forgot to paste the link in my previous msg with the bg color change. I have finally working the parent bg color change from the iframe, but is not working in chrome
the link to the project files of my actual prb is:
in the index.hype (parent) I have an audio element, that needs to be triggered by the button from intro_maketa.hype which loads to the index.hype iframe. You can see the exported files too, to see what exactly i mean. Hope I made things clearer now
thanks again for your patience
Andrew, sorry to bother you again, I want the audio to be played by the button named “play parent audio element”, not the box that contains the audio itself, I tried what you suggested but i m afraid is not what i meant.
The box, which holds the audio is a iframe, within that iframe is an tag, with an id = “audio” The code works fine by only changing the code, as I explained, above. The audio tag has a child tag <source> and this is where the .get(0) is from, so it selects the first tag, and plays it.
The hype doc index.hype, which had the button, with the , which plays and repeats when started, plays the music when you click the button. Which was precisely what you need to happen.
So if this is not what you wanted, then I have no idea, because I thought that is what you wanted to do. Control audio from within a iframe.
Hi andrew, sorry for the mess,
I need to control audio from another iframe, so what I m saying is, I need to trigger it by pressing the “play parent audio element” button, which belongs to “intro_maketa.hype”,if you load the exported files you can see what i mean.
Sorry again to bother you, maybe this time I made it clearer
thank you
Andrew, I feel terrible for all this mess, that’s why it’s the last time I 'm bothering you with all this.
Please go to this link
and open the index.html, I ve made some notes on the buttons. The big rectangle below the audio file is an iframe containing the intro_maketa.html
The corresponding project files can be found on this link
Any help appreciated, or else I ll just make the site only desktop compatible!
Appreciate your help
This is getting very confusing Dizzy. To make it simple, lets just concentrate on one file, and that is the project file, in the second link called intro_maketa.hype.
In that, I have 3 scenes, the first being the main one with the button:
In your exported folder, in the index.html you have the logo on the top centre, with the audio to the left of it:
But in the exported one from hype, you do not have the top bit. Why, that is what is confusing, as in both index.html and intro_maketa.html, the stack is embraced within the hype container div ?
Are you looking to have an iframe, that is completely outside of Hype, but on the index.html file. I cannot see where the logo and audio file is coming from.
But again, can we just work from the main project folder
