3

I would have wanted to keep writing on this discussion, but my reputation doesn't allow me to edit or answer (sorry about that): Uninterrupted background music on website

So going quickly to the point:

  • I do hate music on website, but unfortunately I couldn't find any way to change my client's mind this time.
  • We are working through a comunication (graphic) agency, so I can't tell the end client he's an xxiot and I really need to make the agency happy since they are giving us a lot to do recently and right now is a good thing.

So bottom line they want music on the site, and they would like to possibly have to not restart at each page load.

I already decided to avoid frames.

I'm struggling in between those ways trying to find the "best" one:

  • opening a small popunder window with the music (imagine: "we would recommend you to visit our website with this music..if you just hate it close this popup") PRO: should not be too bad for SEO CONS: popunder aren't very reliable, browser changes very often and they stop working, I dont want to spend my time fixing that.. :) this is the script I tryed https://github.com/hpbuniat/jquery-popunder but as I said works just on Firefox and IE, on Chrome 25 it opens as a popup, on Safari doesn't work well.

  • do a vice versa: the domain opens on a page with just logo, background and music, automatically opens a new tab with the regular site...if someone closes the inital tab amen, they are not going to have music, but if they don't they basically have continous music...when they close the browser the silence comes back :) PRO: should work on all browser (or at least I can have a backup enter the site link, usefull for SEO too) CONS: what about SEO??? is it going to index the other pages? is it enough to put a enter the site link? I'm really worried about that. :(

I hate myself, I hate music on websites damn..

Thank you guys I hope you will be spending a tear for me :)

Community
  • 1
  • 1
luke
  • 118
  • 4
  • 13
  • 1
    Option 3, load all the content with Ajax and use HTML5 pushstate to work with the address bar. A lot of work for little gain. – epascarello Mar 01 '13 at 14:57
  • that's what my old company did http://www.nowthenrecords.com/ – David Fregoli Mar 01 '13 at 15:02
  • yeah.. that would be good, but I have the site all the way done and already live, doing that would be a huge amount of work for no money, especially because to do it seo friendly requires some attentions... – luke Mar 01 '13 at 15:04
  • just intercept all the A tags clicks, prevent default, inject the new body. ajaxified and seo compliant – David Fregoli Mar 01 '13 at 15:05

1 Answers1

1

It doesn't seem to be an enourmous amount of work to me to make it work with ajax, and even if it is it would be a nice experience that will make you better at using and understaing the technology used today, instead of toying with hacky bits of code from 10 years ago and copying and pasting some obscure scripts for popunder from the dark side of the web.

All the work you have done up to now is not wasted, in fact that's the principle of progressive enhancement. Make it work for everyone (including seo bots) and then improve it.

Something like this will transform all your anchor tags into ajax requests but they will still fallback to plain page requests otherwise.

$('body').on('click', 'a', function() {
var url = $(this).attr('href');
$.ajax({
    url: url
}).done(function(response) {
    $('body').html(response);
});
return false;
});

you can add a ?ajax=1 to the request url to instruct the backend to return only the body when present.

Obviously all your scripts/css will have to be served on the initial page as the head won't change (unless you want to make everything more comples) and event bindings will need to be triggered or delegated to body.

You'll need a div for your player (with a fixed position maybe) so the code will actually be more like

<head>
    ...
</head>
<body>
   <div id="player></div>
   <div id="wrapper">[page html]</div>
</body>

and you'll target the #wrapper instead of the body.

David Fregoli
  • 3,377
  • 1
  • 19
  • 40
  • Yeah it's definitely the best way to do it, although I was hoping to avoid that, we lots of deadlines and none of the programmers that we have available right now can do that in a way that is not a waste of money. I will keep it as my last option. But thanks! – luke Mar 05 '13 at 13:24