View Full Version : Music Player to autoresume?

08-19-2011, 04:11 PM
Hi all,
I Run a DJ Business and i am looking to put a music player on my site. Nothing annoys me more than when a site has the player on every page and each page the same song starts over. I am looking to implement something that would be on every page and when they clicked on a new page, the song that was playing resumes from where it left off. is this possible without having a completely flash website? I would prefer to use javascript/jquery than flash, as i cant stand flash of any kind (i wish youtube would stop using flash! :banghead: ). if anyone know of anything like this please let me know!

:) Thanks in advance,

-JL Griffin

08-19-2011, 08:22 PM
Well, Flash is a good option when it comes to media, especially video (regarding your comment about youtube). For audio, there are other solutions, but Flash is by far the most common and compatible.

A good solution for cross-browser compatible audio is Sound Manager 2, a script available for free here:

I also avoid Flash as much as I can, but in some cases there is no better solution. Sound Manager 2 is a great option for the moment because it mixes several technologies for maximum compatibility. It's my first choice for audio on websites now. It's also minimally Flash, mostly used via Javascript when possible.

Regarding keeping the audio the same on all pages, that's difficult. Note that even Flash won't actually fix this problem by itself, though it could be used as part of a solution, see below.

There are two ways to approach it.

1) Do not reload the page.
Keep the audio player loaded while strategically reloading other parts of the page. There are 3 common ways to do that:
--1. Use frames (or iframes) and load the content pages into a smaller frame while keeping the audio player in the parent.
--2. Use Ajax (a way for Javascript to reload parts of the pages without actually refreshing the whole page) to dynamically update parts of the page, or even the entire page (except the audio player). A clear example of this is how facebook works. The whole page never actually reloads. It's just various pieces reloaded using Ajax. This is complicated.
--2b. Of course you could also just have an entirely one-page website, a simplified version of the Ajax idea. You could hide and show elements but never actually load any new material from the server. This would mean loading a lot of content in the first place and wouldn't make sense unless you have a relatively small site.
--3. Use Flash. Flash can have a similar effect and load a different "page" (real HTML file, or just another hidden page within the same flash project, among other options). In this sense, Flash isn't special, except that it automatically includes the "frames" ability, basically.

All of those methods may be incompatible with some browsers or devices. Therefore, you'd need a backup (probably just a direct link to those pages, with some serverside code such as PHP to mimic what Javascript [or flash] would do dynamically). And with that backup the page would reload, so the song would restart. But for most visitors with modern browsers on a computer (potentially not some smart phones, for example), it would work fine. For the others, the song would just start over.

2) Restart the audio at the correct position.
This would involve Javascript keeping track of the current position of the audio. This means that your audio player would need to be able to interact with Javascript. It also would create a pause while the page reloads, but after that pause the audio would resume from the same position (or close to the same position, depending on how accurate your system was) instead of starting over from the beginning.
There's no simple way to approach this that I know of, but I imagine you could start by creating a Javascript to store the current audio file name and time in a cookie, on a loop every second. Then when a new page loads by default start from the beginning of audio file 1, but check if there is a value in the cookie and you'd start from that point if the value is found.
You could do this somewhat creatively depending on your needs, but it might be difficult. And you'd probably still not have compatibility issues, although this presents a great default fallback: it just will play the default if the Javascript doesn't work.
Note that Flash can also store cookies so if you are using a Flash player it could do all of this internally. That might be a little smoother. (But only compatible with Flash-enabled devices.)

Some alternative ideas:
--Give the user an option to "pop out" the music player.
This will place it in a (smaller?) new window and they can keep that open while browsing the rest of the site. This is easy and, assuming a bit of cooperation from the users, works well enough. You can still include the player embedded on the page, but then give the visitors an option for the pop up instead. (A bit of complicated Javascript will allow you to decide if you need the player on a newly loaded page-- careful not to duplicate the player if they already have it open in another window.) Of course this could be done automatically (or at least attempted-- popup blockers may get in your way), but giving the visitors a choice is a good idea.
--Don't play audio files. Instead, stream audio from your site constantly.
This is like a radio station, so everyone will hear the same music at the same time, and when reloading a page it will pause as the page loads then begin again in real time. This is a different kind of solution (and somewhat complicated to setup-- streaming is not particularly easy), but in some cases it might actually be better anyway-- this will make it very hard for your visitors to save your audio files for example. (It's still possible, of course, especially if they just record the sound from their speakers. But it's not nearly as easy as just saving a .mp3 from your site.)

I hope one of those ideas helps you get started. By far the easiest is the "pop out" player, but it's not very sophisticated either. What you're trying to do makes a lot of sense but it's not particularly easy with the way the web works at the moment. With media becoming such a central part of the internet, it may become easier soon. This would be a great feature for the <audio> tag in HTML5, for example.

For your information, the Ajax solution is where the web is headed. Again, just look at facebook. But that may be the most complicated of all the solutions because it requires redesigning the entire site around it.

08-19-2011, 08:34 PM
how about a pop up window that has the player.