Question

I’ve read this question and I understand that its only possible to do it with frames (I really don’t want full-site AJAX):
How to play a background audio across multiple HTML pages.?

My question is that is there any way to have a small, or maybe invisible frame which plays the music and some nicely designed control for it somewhere in the main frame? Actually I would like to solve it with using SoundCloud, but if its impossible with that then I’m open for some custom player, like FlowPlayer or SoundManager 2.

What I would like to do is to have a website for a small band (I’m doing it voluntarily), which has a couple of pages, like photos.php, biography.php, music.php and I would like to have a selection of music tracks on the music.php page, but I would like to keep the music playing even if the visitor navigates out of the music page. For example it must be the most obvious task when someone starts a music then goes to photos.php and views the photos, while the music is still playing.

What would be the best way to do it?

Update: Of course, I don’t want the music to start automatically.

Answer 1

I strongly recommend against it, but if you really wanted it there are some options:

1. Frame
2. Full-site AJAX (not that different to frame really, but a nicer option)
3. AJAX player synchronisation
4. URL Parameter + Rewrite links
5. Popup

Frame / AJAX Site

The frame is probably the “best” case (it would appear as one site to your viewers). The full-site AJAX is basically the same principle. However you said you are against these options (but not why).

AJAX-player synchronisation

The AJAX-player synchronisation would involve storing a cookie to identify the user and having an AJAX player call a back-end which stored the current playing time for the song for the current user.

Then, on page load you could lookup this time, and start the song there.

However, you’d still get slight skips between pages (comparable to when you play YouTube in an embedded frame, then half way through the song skip through to “real YouTube” rather than the embedded video, and it continues, except they do this with URL parameter passing).

URL Parameter + Rewrite links

Another way to achieve the “synchronisation” option would be to have URL parameters that define the current song moment. Then on every “tick” (say a second/half second) you could use JavaScript to rewrite all the links on the page to include an updated URL parameter. However, this would mean if someone opens your site in a new tab/window/without clicking a link on your page the player would restart. This would happen in most of these options anyway though so is perhaps not a real downside.

The way to do this would be:

1. Make sure your player onload checks the URL GET parameter to determine start playing time.
2. Have a jQuery/JS “tick” function which executes every n milliseconds (you’ll have to test to find the ideal, I would imagine 500/1000 ms at least).
3. In the “tick” function, have all links (a tags with a href) change the ?paramname=0 bit that you’ve added to them all to use the new start time.

If you can set cookies from javascript (which I didn’t think you could, but there might be workarounds now), this could be made even easier by having your player check the cookie on load, and then having your tick function update the cookie rather than rewriting all URLs.

Popup

You could load the player in a popup (of course checking to make sure you don’t start a new popup on every page load). This is probably the easiest option to achieve what you want.

My recommendation

My recommendation is to not play music without permission – have a player (which could be on a frame/in an unchanged component of a full AJAX-site/in a popup) which requires a user-click to play. Alternatively, make sure the music is good enough that they will want to have YouTube / their media player playing it in the background anyway.