SUBSCRIBE VIA RSS


Subscribe to our feed

Symfony Experts

Symfony Experts
If you have an urgent question for a symfony-related issue, this is the place to ask.

Topics

Stack Overflow


The old fashioned way

RECENT TUNES

August 28, 2010 – 2:45pm Play music continuously across page loads

For most sites, having background music that starts playing without the user’s consent is an annoyance. There are cases where using music on a website can enhance the overall experience.

Unfortunately, if you want to create ambiance with continuously playing background music (and avoid creating a flash-based website), there is no easy way to accomplish this. I spent some time yesterday and today digging up a workable solution, and found a flash mp3 player that “remembers” the position of the audio when you leave each page and starts the track back up again at that spot on the next page. The end result is when you navigate the site, the music starts up where it left off on the previous page. If you hit stop, the music remains off on subsequent page loads. The player is a very simple, open-source flash audio player called XSPF and was enhanced with a feature the author calls “autoresume.”

To have the music truly be continuous, with no breaks while clicking between pages, I’ll explain two potential solutions and the challenges with both. The easiest way to understand all of this may be to think about watching a movie on YouTube or listening to a song on MySpace. Basically, there is just no way to keep playing the audio or video if you click through to another page.. it has to stop, unless you keep that player loaded at all all times in its own window or “frame” on the page.

One way people get around this is to have the audio player open in a popup window. This window would contain just the audio player, and would remain open while you browse the site in a different window. I shutter at the thought of popups, but alas, this is a potential solution.

Most browsers have popup blockers, so it would be difficult to get this audio player to popup automatically. However, if people clicked a link on our site somewhere to play the audio, then we could trigger the popup window to open.

So, the downside to this is a) popups are annoying, and b) the music would most likely not play automatically, since popups that open automatically are typically blocked.

Another option is to use frames. Basically this means that we put the audio player into a horizontal “frame” along the bottom of the site, and load the rest of the site content above in a separate frame. When you browse the site, we only load the new pages into the top frame, but we don’t reload the bottom frame where the audio player is.

The major drawback to this is that when you browse the website, the URL in your browser will never change to reflect the current page. So, you lose the ability to bookmark pages, people can’t tell where they are on the site by looking at the address bar, and if you try to share a link to a page, like a menu page for example, it will always just be “scottconant.com” and not the actual menu page. Search engines also have a tough time with frames.

Generally, if you want background music on your website, I recommend you turn off auto-play and allow your visitors to decide themselves if they’d like to hear your audio. If you’d like the audio to be continuous across different pages, most flash-based audio players include a feature to “pop-out” the player into its own window. If you want to avoid popups, the “autoresume” feature is a good compromise.

Posted by in  Web Development   |  

13 Responses to Play music continuously across page loads

  1. Pingback: Play music as you move from page to page | Smash Company

  2. rob busby says:

    Although I am soooo against having music on a Website, especially if the client has not clearly thought this through, my current client is very adamant about having this option. I think you made some very valuable points in this article. There are, however, other solutions that would work. Some would help the user by having the option to actually start or stop the music if they wanted to. Others would seriously annoy the user by not giving them the option to turn it on or off. Either way, unless you have a purely music site, I would suggest not having music on your Website unless an option is given to turn it off when necessary. SitePoint has a nice thread about these same events:
    http://www.sitepoint.com/forums/showthread.php?threadid=634735

    Thanks for the good insight.
    Rob

  3. Ash says:

    Ajax?

  4. Scott Meves says:

    If you were loading content within a page via ajax, this wouldn’t be a problem. The discussion is regarding backgrou audio that plays across page loads.

  5. Kiran says:

    Can you tell me what kinda player is used in reverbnation.com where once i start to play music it keeps on playing continuously even if i goto a different page.Another example is musicindiaonline.com
    also whats the purpose of the #(number key ) in the link?

  6. Scott Meves says:

    @Kiran, reverbnation uses flash for the player at the top and then they use ajax to load new page content in the frame below it. I looks like musicindiaonline uses the same solution… clicking links in the page doesn’t actually load a new page, but rather does an ajax request to fetch the new content and replace it on the page. That’s why you see the “#” in the URL… in javascript you cannot replace the page URL without the browser loading a new page, but a browser see’s the hash mark (“#”) as being an inline anchor and doesn’t reload the page. This allows ajax to maintain state and for bookmarks to still work. See (http://ajaxpatterns.org/Unique_URLs) for more info. Good luck.

  7. hlozancic says:

    No ajax, no frame… But it works…

    Demo: http://liberty-band.de/

  8. Scott Meves says:

    @hlozancic, this is a good example of automatically starting the track at the same point on subsequent page loads. Clicking a link stops the music, and when the next page is loaded the music starts up again. I would call this “pseudo-continuous” playback… it pauses briefly between page loads but doesn’t start over.

    We accomplished this for a client by using the ‘autoresume’ AudioPlay add-on described here: http://www.boutell.com/xspf/

  9. Imagine says:

    What about the shebang/hasbang solution? Grooveshark http://www.grooveshark.com manage to achieve continuous play and queuing very gracefully.

  10. Leonardo says:

    Good article.
    Five months ago I had a second-frame-audio-player working perfectly on my wordpress website.

    Then I lost my backups and now I can’t remember no more which was that player.

    Do you have one indicated for me?

  11. Gaijin San says:

    Hi , I am using this http://scmplayer.net/ successfully on my WordPress blog. It plays music continuously while browsing the different pages of the site. Just a bit of JavaScript to add to my header. It came very handy while there seems to be no really good continuous music plugin for WordPress.

    I’ll never set it to auto play though, I agree it is a major annoyance when music starts by itself!

  12. Hasitha says:

    I have learnt something useful. many thanks!

  13. RayZor says:

    Can a seamless media player stream files between page loads on blogs like Tumblr??

    If so, please refer me to some links!
    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>