WWW FAQs: How do I keep the same song playing when the user moves between pages?


2006-07-10: "Whenever I go to a new page on my site the music player stops and I have to press play again with each page." Yep! That's because an object embedded in a page, such as Flash player or RealPlayer, goes away when you change pages.

How can we work around this? There are two good solutions:

1. Use my enhanced version of the XSPF Flash Music Player, which supports the autoresume option. This allows the music to pick up where it left off when the user moves to a new page, as long as both pages embed the player. There is a short delay before the music starts again, however, which cannot be avoided unless you use a separate player window. For more information, see how do I embed sound or music in a web page?

2. Open an audio player in a separate browser window. The user can leave the player window in place while continuing to explore your site in the main browser window, and close it when they are ready to do so.

"OK! Can I open a separate browser window automatically when my page opens?" Unfortunately, no - JavaScript has features to do that, but every popular browser has built-in "popup blocker" features that will kill your player window if you try to force it open that way.

That's why the best technique is to open a new player window when the user clicks of their own free will on a link labeled "listen to my band," or something similar. When you do it that way, the popup blocker doesn't kick in. That's because the web browser understands that the user is making a free choice to click on the link.

"So how do I do it?" Easy! Just check out my article "how do I open a browser window of a certain size?"

Then, just put your music player in the page that the new browser window opens.

If you don't already know how to embed a music player in a page, see the article "how do I embed sound and music in a page?"

Are you frustrated because you can't force the user to listen to the music this way? Don't be. Most users hate background music on web pages, unless they chose to play it. And opening the music player in a new browser window gives you the freedom to design a more elegant player page.

Alternative Techniques

When I say you can only do this with the autoresuming Flash player or a separate player window, I'm skipping over two alternatives. That's because they have serious problems that make them poor choices! But I wouldn't want you to think I hadn't considered them carefully. So here are the alternatives, along with the reasons why you shouldn't use them. Of course, you can do what you like - it's a free Internet.

Bad Idea #1: Do Your Site In Frames

You can solve this problem... sort of... by laying out your entire site using "frames." Placing the player in one frame and the rest of the site's content in another, larger frame means that you can move from page to page in the main frame without disturbing the player.

Unfortunately, frames have several serious problems:

1. Users can't bookmark things or add them to your favorites properly. Users can't tell where they are by looking at the status bar. If someone tries to tell a friend how great your page is, they will wind up giving them only the link to your home page. Usually the friend will realize they have to guess what links to follow from there, and give up. This is bad design.

2. Search engines have a tough time with frames. Google might not index your site properly if you don't write your <noframes> element carefully. People might never find you. And a website people can't find is a bad website.

3. You have to write your links very carefully so that users don't wind up browsing off into the rest of the Internet with your player frame still stuck on the screen.

If you're sure you want to tackle frames anyway, check out the frames pages on the w3schools.com site for more information.

Bad Idea #2: Replace Your Content With JavaScript

Instead of browsing normally from page to page, you could write your links to invoke Javascript functions that replace parts of your page with other content. Specifically, you could place your "main body" content in a <div> element, and use AJAX techniques to replace it when links are clicked on.

Yes, this looks like a sort-of-normal browsing experience to the user. But it comes with all of the problems of frames... and it's even worse, because search engines definitely will not be able to index your site properly. So don't do it. Both frames and JavaScript code replacement have too many weaknesses to be worthwhile just to have smoothly playing background music on a website!

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!