Jump to content

Background audio that survives page transition


MikeatW3S

Recommended Posts

I'd like the user to enable some secondary background music while another audio file reads text for each page. There is a different audio file for each page that reads the page, and these audio files take precedence over any secondary background music. Yet I'd like the secondary background music to survive a page transition to give the impression of continued train of thought. Any ideas on how to do this? Many thanks.

Link to comment
Share on other sites

You'll need to use an iframe where the background music plays on the parent frame and the child frame will be each individual page. The parent page wouldn't refresh in that case.

 

I don't know. Wouldn't it be a contradiction to have a button (or js) on a page that when pressed makes it a child frame in some other parent (that plays the background music), and then when pressed again closes its own parent but leaves itself intact? Can a child control its parent? I thought only a parent could control a child.

Edited by MikeatW3S
Link to comment
Share on other sites

If you create a new window with window.open() you can refer to it from the child window using window.opener.

 

iframes can access parent windows using window.parent or window.top

  • Like 1
Link to comment
Share on other sites

Wouldn't it be a contradiction to have a button (or js) on a page that when pressed makes it a child frame in some other parent (that plays the background music), and then when pressed again closes its own parent but leaves itself intact?

That's not what I'm talking about, I'm talking about a container page and a child page. The container page has the background sound on it and whatever controls you want for that, and the child page is the main content that they're using. The child page does not create the parent and then add an iframe, the iframe is always there.
Link to comment
Share on other sites

If you create a new window with window.open() you can refer to it from the child window using window.opener.

 

iframes can access parent windows using window.parent or window.top

 

Does this allow me access to the <audio> elements in the parent from inside the child?

 

How would I possibly close the parent without also closing the child? Thanks again. This is all very constructive.

Edited by MikeatW3S
Link to comment
Share on other sites

How about this:

 

When I click the button to start the background music in the original page, it opens another page in a new window. This new window will continue to be open and operate even if the original window closes, right? Then I communicate between the two windows with cookies. The original page can set cookies every 500ms according to how loud and whether the background should play. And the background page can fetch the cookies every 500ms to set user preferences. If the original page should be closed and no longer update cookies, then the background page can detect this lack of updating and close as well. Does anyone see a problem with this idea? Thanks.

Link to comment
Share on other sites

What do you not like about the <iframe> solution?

 

learning curve. The only thing I would have to learn about my suggestion would be how to open a new window, which sounds kind of easy compared to learning about iframes. The only problem I see with my suggestion is what happens with slow connections, how long do a wait with the background page playing before deciding to shut it down. Another problem might be what happens if a user opens more than one text page. But then again perhaps iframes are not that hard to learn.

Link to comment
Share on other sites

All you really need for the iframe solution is this:

<audio><iframe src="page.html"></iframe>

Then use CSS to hide the audio element and make the iframe take the full size of the window.

Link to comment
Share on other sites

All you really need for the iframe solution is this:

<audio><iframe src="page.html"></iframe>

Then use CSS to hide the audio element and make the iframe take the full size of the window.

 

From what I"ve seen on the net. I'm not sure what code would be browser independent. I'm trying to get things to work in IE11, Firefox, and Chrome. I've already got cookies and controls working in these browsers. But I don't know about iframes.

 

If I had sample code I could try to open a parent and control, say, some text element in the parent from the child, I would probably go with that. If you can't easily cut and paste some code here, what search terms would I look for to google this? Thanks much.

Link to comment
Share on other sites

iframes have been around for a long time, I can't name a desktop browser off the top of my head that doesn't support them. IE6 supported them, I'm not sure about IE5.

 

Wouldn't I have to open the parent first before opening the child which has the text? Then what URL do I instruct people to link to, the parent or the child? I'd like them to go directly to the child with the text so that the parent with the audio is not even noticed by visitors (if possible). Can I actually open a parent iframe from within a child? I hope you can see my confusion about this.

Edited by MikeatW3S
Link to comment
Share on other sites

Wouldn't I have to open the parent first before opening the child which has the text?

Yes.

Then what URL do I instruct people to link to, the parent or the child?

The parent.

I'd like them to go directly to the child with the text so that the parent with the audio is not even noticed by visitors (if possible).

There doesn't need to be anything on the parent. You can make it an iframe that takes up 100% width and height so it doesn't even look any different, the only reason anyone would know it was an iframe would be because the URL wouldn't change when the child page changes. You can even control the audio on the parent from the child.

Can I actually open a parent iframe from within a child?

No, a page cannot insert itself as a child frame of another page. At least not without a lot of hacky behavior that the browser would probably block anyway.You're saying that you want background music to play continuously as the page changes. You can't do that with a single page, when the page changes the music stops and then you can start again on the next page, but there's going to be a gap any time the page is loading. To avoid that, use an iframe, have the music coming from the parent page (which never changes) while the pages inside the frame are free to change. That's the cleanest way to handle it, it's cleaner than trying to open pop ups or whatever else.The alternative is to completely change how you're doing this and do all of your loading via ajax instead of regular links, so that again the page does not refresh when you load new content. If you're worried about a learning curve though, iframes are much more simpler to visualize and work with than ajax communication is.
  • Like 1
Link to comment
Share on other sites

Thank you, justsomeguy,

 

The problem is that my current pages have been around awhile and many may have links to particular text pages. So I'd like to not generate an error for them if I now make all the pages only accessible from the url of a parent page. So my inclination at this time is to simply open a new page from the text pages, not as an iframe, but as an entirely new independent page that will stay open even during text page transitions. I've seen this done before where I have to go and separately close the newly created window after closing the creating window. This new page will have the audio in it, and I can communicate settings using cookies. I think I already know how to do all that. Thanks for all your help.

Edited by MikeatW3S
Link to comment
Share on other sites

They wouldn't be only accessible from a parent, there's not really a way to do that actually. I suppose you could put some Javascript code on a page to make sure that it's not in the parent window, but I've never seen anyone do that. All of the old links will still work, they just won't have background music.

Link to comment
Share on other sites

  • 3 weeks later...

It turns out that using window.open() to create a new window that is hidden in the background (even to play music) is frowned upon because it's called a popup. And many browsers default to blocking popups. I've tried everything to take the focus off the newly opened page (where the music is) and put the focus back on the original page (with the text). But nothing seems to work across all browsers. Plus I'd have to ask the visitor to enable popups for my site in order to do this. So I need to find another way.

 

So perhaps I can create a button that is a hyperlink that opens link in new window. And then once the new window is open I can change the button to an onclick="myfunction()" that just displays this newly opened background music page so that the visitor can adjust the background. Can I change the button type with javascript from an <a href...> to an onclick="myfunction()"? I know you can add attributes later in the program with javascript. But I need to stay away from the window.open() statement because popups may be blocked. Any help is appreciated. Thanks.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...