• Announcements

    • boen_robot

      Guidelines and Netiquette   03/28/2017

      Posting Problems:   Having problems posting your topic? Read through this: To join, you agree to our terms and conditions and fill out and submit a registration form. An activation email will be sent to your email adress, so you'll need to verify your account. After that the account has to be validated by one of the moderators. This will mean that it can take up to a day to be activated. A couple of things to remember to ensure approval: Don't use an email address in one of those $2 four character .com domains eg. xyds.com. These will be deleted and the domain added to the banned list. Don't use an email address that is within a domain with a bad reputation for spam. A Google search is run on every email address and email domain. Don't sign up with an email address that doesn't exist, doesn't work or requires the sender to answer a quiz before their email can get to you. Put your country and or state and city in the signup form. Blank forms will go to the botton of the "to do" list. And make sure that your email address and your country match, saying you're from Alabama and using a .ru email address is not going to get you activated. After a membership is activated the first few posts will be monitored. Posting spam or unapproved topics described in the agreement results in an immediate ban. The email provider and the IP addresses associated with the account will be banned and all posts will be deleted. These strict measures have been deemed necessary to hinder spam. Sorry for any inconvenience this causes, but it's not liable to change. If, after reading this, you still can't post and don't understand why, contact one of the Moderators listed here.   Topic Guidelines   Including the following information can expedite an accurate response from board members: Must be a Specific Problem or Question related to web design and development Include Code in Question (wrap with   for small blocks of code and for longer blocks   ) Include Code Author Include Extra Notes/Modifications/Attempts Include web link to page/file when possible Content Guidelines   You may not post, upload, link to, or email any Content that contains, promotes, gives instruction about, or provides prohibited Content. Prohibited Content includes any Content that breaks any local, state, county, national or international law. Prohibited Content also includes: No direct or indirect advertising or websites, forums, products, services No hijacking of posts (do not post your question in someone elses) Content that infringes upon any rights [ex. MP3s and ROMs] (including, but not limited to, copyrights and trademarks) Abusive, threatening, defamatory, racist, or obscene Viruses or any other harmful computer software False Information or libel Spam, chain letters, or Pyramid schemes Gambling or Illicit drugs Terrorism Hacking or cheating for internet/online games Warez, Roms, CD-Keys, Cracks, Passwords, or Serial Numbers Pornography, nudity, or sexual material of any kind Excessive profanity Invasive of privacy or impersonation of any person/entity Hacking materials or information Posting Tips   There are more BBcodes than there are buttons for on the reply menu. To get the full list, click "BB Code Help" underneath the clickable smilie face menu. Use   for small snippets of code Use   for lengthy snippets of code Use   if your snippet is HTML (optional) Use   if your snippet is SQL (optional) Rules of Conduct   Be nice. There's no need for calling someone stupid if they ask an 'easy' question. Keep your avatars and signatures absolutely child friendly. We have a younger audience on this forum. Keep your language appropriate for the same reason above. Do not PM moderators for help on the forum. Post on the topic, or create a new one.   Spam:   Recently, as you have all without doubt noticed, we have had lots of spam and advertisement on the forum. Therefore, we'd like to alert you as to what to do when you have found any of the aforementioned annoying messages: it. Immediately. Give a clear reason, please, if the advertising is not evident. DO NOT POST! Report, let the post stay as is, and we will get to it, meanwhile if you continue to post as normal in the other threads, it won't be on the top so long. Refrain from PMing the member. This won't help at all, as they are most likely spambots anyway. Thank you.       Images in signatures:   After thinking of users on dial-up, we have decided to enforce the following rules regarding signatures. Please pay heed to them. Respecting these rules is respecting the members on this forum with dial-up. Signature rules: No animated images AT ALL. No matter the amount of animation. Maximum image widthxheight: 300x150 Maximum image (file) size: 15kb Use calm colors. Do not use highly contrasting images in your signature, as this can get really annoying when seeing several posts from one member in the same thread. The same prohibited content goes for images as for posts. Lastly, use common sense. No lengthy signatures please. Save us some scrolling. Thank you.       Links in signatures:   Please understand that w3schools.com only exists because of voluntary work and is barely supported by the advertising littered throughout the tutorials and the forum. So, please, stop advertising other sites. DO not post links that drive traffic away from the w3schools domain - especially to a site that offers similar if not identical information. Please help support the site by keeping individuals on it. Thank you. Here are some guidelines as to what you can put in your signature: w3schools links --> allowed w3.org links --> allowed browser links --> allowed html editor links --> allowed personal sites --> allowed tutorial sites competing with w3schools --> NOT allowed sites completely irrelevant to webprogramming and this forum --> NOT allowed   Thanks for understanding, and for taking the time to read this. ~W3Schools Modstaff~
Sign in to follow this  
Followers 0
MikeatW3S

Background audio that survives page transition

18 posts in this topic

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.

Share this post


Link to post
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.

1 person likes this

Share this post


Link to post
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

Share this post


Link to post
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

1 person likes this

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.
1 person likes this

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

After I hyperlink to the background music page in a new window, what command can I put in a onclick button function of that new window to go back to the previous text window?

Edited by MikeatW3S

Share this post


Link to post
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
Sign in to follow this  
Followers 0