Continuous Playback from Page to Page on Word Press

[Adam]

I am looking to have jPlayer work on all pages of a Word Press driven
Website with continuous play from page to page, i.e. if song #2 is
playing at 1:37 secs and I click to another page the audio continues
to play at 1:37 secs of that song. I am flexible whether it plays
while the page loads or it starts after the page and player are
loaded. ReverbNation has a solution like this, but they use a Flash
player. Therefore millions of users on iPad cannot listen to audio,
which is the main purpose of the Website.

I know about your single page app, Mark B. However, I am looking more
for a player that maintains its place on multiple pages than an app
frame that maintains the place of multiple tabs on a single page. Any
suggestions? I am a bit stumped whether it is even possible to load a
Word Press site in a custom frame and integrate that jPlayer into the
parent frame in a coherent design.
Thanks,

Adam D.

[Jon McLaughlin]

Hi Adam,

It is definitely possible. I created two sites that use persistent
players. One was Drupal and one was Wordpress.
(http://redapples45.com and http://apawnsrebellion.com)

My approach was to use AJAX calls to load the new page content, but
exclude the areas of the page that contain the jPlayer instances. In
the case of the redapples45.com site, I actually have visible
controllers in the menu navigation that is outside the area of the
AJAX replacement. In the case of the apawnsrebellion.com site, I have
a separate jPlayer instance for each MP3 file and I attach the
controllers back to the playing instances after the AJAX load.

I used the hijax concept where I override the default behavior of
clicks on the anchor tags. I'm also using hash-bangs to allow for
browser history navigation in the redapples45.com site.

It's tricky, but it can be done as long as your comfortable with
hijax'ing your links and loading everything through AJAX calls. There
could be other approaches, but this has worked well for me.

..jon

> --
> You received this message because you are subscribed to the Google
> Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
> To post to this group, send email to jpl...@googlegroups.com.
> To unsubscribe from this group, send email to jplayer+u...@googlegroups.com
> .
> For more options, visit this group at http://groups.google.com/group/jplayer?hl=en
> .
>

Jon McLaughlin
System Werks
---------------------------------------------------
phone: (888) 750-7997
fax: (646) 405-4882
email: j...@system-werks.com
aim / ichat: j...@system-werks.com
---------------------------------------------------

[Maboa]

Adam,

This question comes up quite a look albeit not always in a wordpress context.

As far as I know there are 3 main approaches that all have there drawbacks. (and correct me if I'm wrong here Jon).

1. The Single Page App (or ajaxified) method

Content is changed w/o leaving the page so the player is never reloaded or interrupted.

Pros - a modern technique that if done right can tick all the boxes.

Cons - more difficult to implement especially within CMS systems. Can require a complete re-architecture of a site. Your site should still work with JS disabled as this is what mos search engine bots will use. You could use googles hashbang technique but there are issues there as well.

2. The iframe of frameset method

Content it one frame is changed w/o touching the player.

Pros - relatively easy to implement

Cons - content can be picked up w/o the holding frameset by search engines, issues with search engine indexing generally. Slightly more complex inter-frame communication may be required.

3. The pop-up player method

The player is in effect a separate web page that is popped up above the content that can change w/o affecting it.

Pros - no search engine issues

Cons - communication between content and player can become complex, large amount of browser chrome around the player, pop-up player difficult to resize should you need to incorporate a playlist or similar.

Hope that helps.

Cheers

Mark B

[Maboa]

Edit - No 2 should have been the iframe OR frameset method

[Adam]

Hi Mark,

Yes, a complete re-architecture of the site is exactly what I do *NOT*
want to do in this case. In the long-run it may lead to a Word Press
template site I can use for future clients. However, I want to
maintain the stability of the WP platform and try to *encourage*
people to choose my hand-coded Website option from a code base off a
fresh start, especially in cases like this. I just am not familiar
enough with WP and PHP to be able to re-architecture the site with the
AJAX implementation. Hand-coding with your BBQ method I *can* do, but
not this. It would take too long.

I hate to say it, but I wish there was a way to put the *jPlayer* in a
frame and pull that content along from page to page without reloading
*it*. It seems like there should be a way, but somebody left that out
of the language. Lol. I know that would make it too easy, though. What
I could do that is a solution like that is to wrap the whole site in a
frame with the header and jPlayer in a parent frame that does *not*
reload. I have worked with frames successfully before in a deprecated
version of my portfolio site to load image galleries, before I went
into business for myself. However, I wound up re-architecting that
site to include extra pages instead of frames, because I was not 100%
certain of frame support across all browsers at that time. It worked
well, but I wouldn't do it again.

I think I am liking what I see in the Audio Bar plug-in for WP. It
looks like it may be a hi-jinxed method. Is anybody familiar with
Audio Bar? I am dead set on using jPlayer, though. It reaches that
iPad user market. And the tools for installing the Audio Bar plug-in
are too modular. In other words, I am not sure it can be engineered to
work with jPlayer.

After writing this, I see a clear solution has yet to present itself
to me. I am going to continue to search for a WP plug-in that can
place a portion of the page in place without reloading it page-to-
page. It would use a frame, but it would do the back-end stuff for me,
although I hate using plug-and-play plug-ins. Otherwise, I have to
admit, I am stumped! I know I want my Website to flow through -- not
be contained in separate frame areas -- and I know I don't want to
defeat the purpose of using WP, which is the ease that developing with
a CMS provides. My clients who choose WP are going to want that first
and foremost.

Let me know if you have any new imaginative ideas.
Thanks,

Adam

On Feb 16, 1:22 pm, Maboa <mark.b...@gmail.com> wrote:
> Adam,
>
> This question comes up quite a look albeit not always in a wordpress
> context.
>
> As far as I know there are 3 main approaches that all have there drawbacks.
> (and correct me if I'm wrong here Jon).
>

> *1. The Single Page App (or ajaxified) method*

>
> Content is changed w/o leaving the page so the player is never reloaded or
> interrupted.
>

> *Pros* - a modern technique that if done right can tick all the boxes.
>
> *Cons* - more difficult to implement especially within CMS systems. Can

> require a complete re-architecture of a site. Your site should still work
> with JS disabled as this is what mos search engine bots will use. You could
> use googles hashbang technique but there are issues there as well.
>

> *2. The iframe of frameset method*

>
> Content it one frame is changed w/o touching the player.
>

> *Pros* - relatively easy to implement
>
> *Cons* - content can be picked up w/o the holding frameset by search

> engines, issues with search engine indexing generally. Slightly more complex
> inter-frame communication may be required.
>

> *3. The pop-up player method*

>
> The player is in effect a separate web page that is popped up above the
> content that can change w/o affecting it.
>

> *Pros* - no search engine issues
>
> *Cons* - communication between content and player can become complex, large

[Maboa]

Adam,

Why don't you use a frameset?

<frameset">
  <frame src="playerurl" />
  <frame src="wordpressurl" />
</frameset>

if wordpressurl is somehow loaded w/o its frameset from search results or whatever use javascript to load the whole page again including the surrounding frameset.

Communication between frames via javascript is possible I believe. http://www.cross-browser.com/talk/inter-frame_comm.html 

Cheers

Mark B

[Maboa]

It's late - I forgot a bit. For bookmarking purposes you could change the the holding page's url to reflect the containing current wordpressurl (using js). It's not ideal but it should work, I suppose the issue is that the wordpressurl is likely to be picked up by search engines and then you'd get a weird refresh and reload of the same content when the playerurl and wordpressurl were loaded and reloaded respectively. Instead of an automatic reload of the page with surrounding frameset and playerurl that I mentioned previously maybe you could have a launch player button that would do this, this could sweeten the pill somewhat.

Cheers

Mark B

[Adam]

Hi Mark,

Thanks for the ideas. I have decided to go with the pop-up method. I
will have a top-level nav 'Music' link to a page that may evolve into
'Media'. The player will exist there, with an option to launch it in a
pop-up. The frameset method or an iFrame is functionally problematic
to me in so many ways that figuring out how to custom code frame
targets to navigational links in WP isn't worth it.

Do you think I should go with a Javascript pop-up or is that double-
trouble? 1 Javascript must be enabled and 2 It is a pop-up, which many
browsers block. The other option is to make the link open a new page
in a _blank target.

AD

[Adam]

Mark,

I wanted to share my final solution with you. See it at
http://www.thetektonics.com/audio-player/

Thanks so much!!! jPlayer is hands down the best audio player I have
ever come across, anywhere.

I wanted to ask you one more question. What do you think about onBlur
event handlers to bring the pop-up to the front? Is that going *way*
too far now? I am caught between wanting to provide the user an easy
way to change songs when they are browsing multiple windows, but not
annoy them. It would be great if minimizing cancelled the focus()
event, but of course it's all or nothing the way I'm doing it. Here is
the code:

<body onBlur="setTimeout('self.focus()',6000)">

I have *not* implemented it, yet. I am thinking maybe I won't. Still,
I want to get your opinion before my final decision. Thanks.