Help get this topic noticed by sharing it on Twitter, Facebook, or email.

page player and ajax

I use soundManager2 with page-player script, and I want to update my pages with AJAX. What is the right way to tell the script that the part of the page, which contains links to mp3-files, has been reloaded?
I tried this way:

function getAjaxResponse(){
...... //append received data to page

pagePlayer = null;
pagePlayer = new PagePlayer(null);
pagePlayer.initDOM();
}

but it doesn't work (I get error in pagePlayer.init(): oTiming has no properties)
2 people have
this question
+1
Reply
  • EMPLOYEE
    I’m happy
    Scott (Official Rep) August 23, 2008 17:09
    Hi bhondu,

    The script was designed to be created and run only once at page load etc., and as it modifies the DOM when it loads, would be non-trivial (time consuming) to modify to accept dynamic updates - eg., creating or removing elements on the fly. Unfortunately at this point even destroying and recreating an existing sound is tricky, as the JS inserts elements such as the control template (loading/progress bar, timing data etc.) into each LI when it runs.

    You might be able to try calling pagePlayer.init() and modifying the counter it uses to be global, thus subsequent calls may find the new MP3 links and wouldn't conflict with old/existing ones. That is, adding onto the self.links[] array. You'd also need to modify pagePlayer.init() to not remove or clear the sm2_timing element innerHTML.

    I'll consider adding a "refresh" method which will scan for new links or something, but bug fixes with the API are higher priority at this point. Thanks for the suggestion!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I'm not sure if you've made changes since this question or not... but I'm using the page-player in an ajax app. I did have to make several adjustments though.

    * First, I load the SoundManager and PagePlayer scripts on the main app page - which also has the control/spectrum templates in html at the bottom. This first page doesn't have any .mp3's.
    * I DO NOT re-include those scripts in ajax content - they get loaded once for the life of the ajax page/app.
    * The ajax content completely replaces the previous PP/SM content. Think of ajax-paginated .mp3 lists. The new page-list replaces the .html of the previous one (so no cleanup required in .html)
    * I'm configured for flash 8 mode which drops some of the spectrum capability

    Modifications to support ajax:
    1) After loading the new ajax content I call pagePlayer.init() to re-scan the entire page for links.

    2) The spectrum-container template isn't loaded as a cloned object during InitDom. In my case, the templates are part of the .html that gets replaced with new content in the subsequent ajax pages. For my situation, I needed to either re-include the templates in the ajax content or (what I did) alter initDom to create an oSpectrum object like the oControls object and use it throughout for cloning instead of looking in the document for it. That way I only have to include the templates during initial page load.

    ex:
    this.oSpectrum = document.getElementById('spectrum-container').cloneNode(true);

    3) I hit a road-bump when I tried to load a sound on the second ajax page because it seemed like it was referencing the sound paused on the previous page. I added the following code to init() (at top) to clean up from previous ajax content .mp3 lists:

    // clean up from previous ajax page
    this.links = [];
    this.strings = [];
    this.soundsByObject = [];
    lastSound = null;
    if(this.sounds.length > 0) {
    for (var i=this.sounds.length; i--;) {
    this.stopSound(this.sounds[i]);
    }
    }
    this.sounds = [];

    With the above in place, I can reload ajax content that includes .mp3's and page-player works perfectly every time.

    HTH
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • hey escape what file did you add the ajax cleanup too? page-player.js?

    thanks
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • ok cool. thanks scott! love what you guys are doing.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • Hi,

    I tried this method and keep getting the message "oTiming is null".

    any clues?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • hey guys i made all fo the changes and when i make an ajax request that returns another set of files i get this error:

    uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER)" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://www.studio38records.com/js/pag... :: anonymous :: line 503" data: no]
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • Sounds like the hidden 'spectrum-container' element is missing when you're writing your XHR response to innerHTML, or something.

    This is the line that's barfing:
    o.parentNode.appendChild(document.getElementById('spectrum-container'));

    Keep in mind this script wasn't tested to work with with XHR content.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • i got it working by just adding the spectrum-container to the return html and it works fine. if i find out why it didnt work the other way ill post it up here.

    thanks again
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • First off, soundmanager2 is amazing.

    I am a little confused where to place the cleanup code.

    =========
    // clean up from previous ajax page
    this.links = [];
    this.strings = [];
    this.soundsByObject = [];
    lastSound = null;
    if(this.sounds.length > 0) {
    for (var i=this.sounds.length; i--;) {
    this.stopSound(this.sounds[i]);
    }
    }
    this.sounds = [];
    ==========

    I know it goes in page-player.js I'm just not sure about where though. Any help would be greatly appreciated.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I’m thankful
    that's done the trick escape, thanks. It helped me understand how the inlineplayer.js works as well. (I'm quite new to Javascript).... I'm guessing this PagePlayer that everyone is refering to is the same as the inlinePlayer? Is inlinPlayer an older version or something? Should i be using PagePlayer for any reason?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited