: Music Player on Website that continues playing between pages I know that having a music player on a website isn't necessary nowadays. But I have a client that really wants one on their website.

@Kaufman565

For the detail of how to implement this, that's a web tech engineering question that should probably be asked at one of the following of our sister sites:


Webmasters for questions about what existing tools are out there
The programming Q&A site stackOverflow for specific questions about how to code up or implement this (note that those guys expect tight, code-focussed questions, and strong evidence of prior research of each specific problem)
You might want to try asking the guys at webapps just in case something has been created that does exactly this.


But I appreciate that there's a more general question still of "What could even do this? What can I actually ask for?".

The short answer is, it's much, much harder than you would expect. Realistically, there's a real danger it'll involve much more work than your client will be willing to pay, for something they probably expect to be simple.



The long answer: (just take this as a rough guide of where to start looking and what questions to ask on sites that are more about web technology or programming) So the basic problem is, making a music player persist when you move from page to page. Moving from page to page normally clears the old page and replaces it with a new one.

So logically there are two types of approach:


Make a web page that doesn't clear the whole of the old page when you move to a new one. There are basically three options:


A completely AJAX site. This is a big technical challenge, probably bigger than re-making the site as Flash only. It's what techies will say is the best approach, but it's a difficult challenge even for a team of professional programmers. I would not recommend going that road unless you're working with a team of developers who understand what is involved client side and server side. If you don't (and it sounds like you don't), don't go there. If you do have the resources, however, it's a solid approach. You can make search engines aware of and index individual pages using escaped fragments, and it uses standard, future-proof technology. Many big websites (e.g. Twitter) use this approach - but be warned that even they often get it wrong. It's very difficult, and delicate too.
Flash, as you say. Not recommended as the portion of browsers that use Flash is going down, fast. Adobe don't even support Flash for mobile devices (smartphones, tablets) any more - they literally moved that team into different roles. It's technology that is on its way out. Unless you've got a good reason to only target desktops and laptops, I'd advise don't go there.
Frames. This is an old-school approach that is widely dismissed as having had its day long ago. It makes sites very difficult to index by search engines and makes pages very difficult to link to or share by social media. Unless you have a reason not to care about these things, don't go there.

Load the music player in something other than the main page.


A popup window. This is a somewhat unpopular, unfashionable approach, but it might not be so bad in this case. There are also ways to control the content of a popup window in the main window that triggered it. Most browsers prevent popups, and on some browsers, the option to allow popups is barely noticeable, so you'll need a design element that guides people to the popup, but that's no bad thing since you probably don't want to blare music at people without their permission anyway. You should research how pop-up windows are handled on mobile device browsers and by common desktop browsers before considering this option. Expect at least a moderate amount of highly technical work, including at least a little bit of Javascript programming.
Giving them the music file to run in the default music player on the users' machine. This also isn't an easy option - you may need to make sure your server sends the media files with the right mime-type, and there are any number of things that could go wrong, such as software blocking your file from playing automatically. Also needs research.

The "third way" cheats' approach. Since the options for making the music play uninterrupted are so unattractive, how about an option that isn't perfectly uninterrupted, but where, at the very least, when the new page loads, the music player continues where it left off? Again, this isn't simple (unless you can find some magic solution someone else has made, there aren't any easy answers), but if you or a friend or colleague have at least low to lower-intermediate Javascript skills, you could try something like this. (If none of this means anything to you, and you don't have a friendly client-side developer who you can ask for help, don't go there! Unless you really want to learn to program in Javascript...):


Using something like Flowplayer that responds to external javascript controls...
...bind something to click events on all links that:


gets the track and playing position time (in seconds or miliseconds) of the music player...
...appends it to the destination as a hash fragment (so a link to /somepage would becomes /somepage#track=Free-bird&time=223
...then goes to that destination.

...then, on document ready, parse the url hash fragment (jQuery BBQ might help), and if there's a track and a time, tell the music player to skip to that track and that time, and start playing.



Basically, music players that continue between web pages is one of those things that sounds like it should be easy, but really, really isn't.

Vote Up Vote Down