Soundplayer not working with an AJAX-ed Wordpress Theme

Chris Bracco

26 Oct, 2010 09:51 PM

Hey guys!

This is Chris Bracco, the writer of Tight Mix Blog. I've sung your praises and reached out to you guys several times before. Today, I'm trying to integrate your Sound Player into an artist's website, and I've hit a snag, which sucks because the artist really loves your player, and so do I.

:)

I'm not a programmer by any means, so I'm not really sure what is causing the issue here. However, I'm also not a novice (or idiot lol), and I can understand and navigate through code just fine.

I'll do my best to describe my problem.

I created a Wordpress theme from scratch, and applied the following AJAX functionality (originally provided by Chris Coyier) to it:

I've placed the Soundplayer inside a jQuery collapsible div located outside of the "AJAX-ed" area, so whenever the user navigates to a different page, the Soundplayer will play continuously. Here is the code I used for the jQuery collapsible div:

When the AJAX script is enabled, along with Soundplayer and its jQuery collapsible div script, it starts to get all screwy. The AJAX script appears to work at first, because it fades out the content & adds the correct hash tag to the URL. However, after that, the new page content never loads, and the AJAX-ed area remains blank. Also, when you try to play a song from Soundplayer, it does not start playing. You can switch between tracks, but once you hit play, it doesn't play the audio.

When the AJAX javascript is disabled, the Sound Player works just fine inside the collapsible div, which makes me think that there is some sort of weird conflict going on between AJAX and Soundplayer (or MooTools)?

I really could use some help here, if I can get this resolved then I'm well on my way to creating a killer website for this artist. And it will definitely warrant a donation from me. :)

Thanks so much! I look forward to what CASHMusic.org will bring to the table next.

Any chance you could check out the specific error message from Firebug
(FF) or the Javascript Console in Chrome/Safari? It sounds like
there's some conflict in the AJAX loader script and the player, but
I'm not sure what it is specifically. MooTools and jQuery shouldn't be
conflicting here, so maybe it's something more like a naming issue. If
I could see the actual error it'd help.

And it works when you do the jQuery div + SoundPlayer, but what about
removing MooTools and the CASH stuff...does everything else work?

I'm pretty backlogged right now and fighting through. But try this as
a quick fix and I'll look at the script for real tomorrow afternoon...

The AJAX script looks short and self contained. I don't think any of
the classnames interfere, so try renaming the variables in the AJAX
script itself. It's an easy replace-all and you can at least see if
that clears it up. (So grab 'var' and rename to 'varxxx' — you can
always strip out all the 'xxx' later...)

I've looked over the script a couple times but don't see the specific issue. I'm sorry. The next step is probably commenting out code blocks to find the specific lines that are messing things up and going from there.

There's actually a little bit of AJAX content-swapping built into Flower, but undocumented. It swaps out the content quickly/simply, but without the nice loading wheel or the changes to the URL in the address bar, so it'd require a little more coding to get up and going that way.

I'll try commenting out blocks. Thanks you for at least trying for me! If I can't figure out the specific lines that are problematic, then it will up to the artist whether or not he wants the AJAX-ed pagination or the Cashmusic Soundplayer.

Thanks again. If I figure out the problem lines of code I'll post them here.