5

I am working on a project like a music store and i need to implement persistent music player as in ReverbNation. I examined ReverbNation and found that they are using ajax to load central content so that the player is always intact. My project is in opencart and it is almost complete. So i don't want to change hell lot of things and load everything from ajax just for the player. I tried iframe, it works, but the problem is that the url in address bar always remain same. Is it possible to change the url in the address bar for the content loaded in iframes? or is there any good way to implement persistent music player? Please suggest.

Konsole
  • 3,447
  • 3
  • 29
  • 39
  • u can use document hash to indicate the stare, or use history.pushState – SoWhat Aug 06 '13 at 10:51
  • But using an iframe for your whole website doesn't sound like a clean idea... Why don't you change approach instead, and load the music player in a popup window? Then you can just navigate the website without any change. – Eggplant Aug 06 '13 at 10:54
  • @SomeshMukherjee An explanation would be very helpful. And i think history.pushState is not supported in IE – Konsole Aug 06 '13 at 10:58
  • @Eggplant I know iframe sucks and its not a good idea but the client want it that way, similar to reverbnation. Popup window could be the last option – Konsole Aug 06 '13 at 10:59
  • suppose the user clicks on /albums/1 on the iframe, detect this using an event handler and change the window.location.hash to albums/1 That way the link becomes site.com/player#albums/1 Now you can read this has at startup and change the song and the content of the iframe to /albums/1 – SoWhat Aug 06 '13 at 11:03

2 Answers2

2

I did the similar type of project in opencart using Jplayer (http://ewlsol.com/now/)

You can overwrite the url using iframe 

<a href="page" target="_top">Replace parent url!</a>

But this is not the proper solution, If you use Iframe there is no source code available in browser so search engine wont be able crawl your website so using Iframe will be bad Idea.

You need to load the content part by AJAX using jquery load function and put your player in the header or footer so that header and footer portion wont be refreshed and your player will play your music continuously.

Hope this helps

Ramesh
  • 1,384
  • 2
  • 12
  • 19
0

You can't just shoehorn a persistent player on an existing site. A site with persistent music playback needs three things:

  • A client-side JS router
  • A way to fetch new content via AJAX
  • A persistent music player script that manages state (current track, playlist, playlist index)

A JS framework is often used since it is capable of many of these features out-of-the-box. However, including an entire JS framework such as Angular or Ember just for persistent music playback is overkill for many sites.

A lighter frontend framework for music such as Pushtape Cassette might solve your problem whether you are building a static site or dynamic site.

If you are building a static site, all you need to do is configure a cassette.json file with links to music files and metadata, and style accordingly.

If you are building a more dynamic application, you can use a decoupled architecture. Build a separate backend site that manages content using a database, then have that site generate a cassette.json and render using Pushtape Cassette.

burrbrown
  • 301
  • 2
  • 3