title: SoundManager2 on iPhone - Sound not playing on jQuery Load
body: <p>I'm trying to use SoundManager2 as part of an iPhone Web App to play a sound after a form has been submitted using jQuery. The particular sound that is played is dependant on the result, and so the resulting page sets a variable that identifies which sound file to play.</p>
  
  <p>This all works without a hitch on the desktop, but when running on the iPhone, it fails.</p>
  
  <p>The Debugging Console on the iPhone shows it trying...</p>
  
  <pre><code>1124: SMSound.play(): "ValidSound" is loading - attempting to play...
  1124: SMSound.play(): "ValidSound" is starting to play
  1124: setPosition(0): delaying, sound not ready
  1124: HTML5::loadstart: ValidSound
  1124: HTML5::suspend: ValidSound
  </code></pre>
  
  <p>...but no sound every plays.</p>
  
  <p>Any thoughts on what might be causing this to fail? I've included the code for the main page, and an example of the 'responding' page that is returned using jQuery:</p>
  
  <p><strong>Main</strong></p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="sm/script/soundmanager2.js"&gt;&lt;/script&gt;
  &lt;script&gt; 
  soundManager.setup({
  
    url: 'sm/swf/',
    useHTML5Audio: true,
  
    onready: function() {
  
      soundManager.createSound({
        id: 'ValidSound',
        useHTML5Audio: true,
        preferFlash: false,
        url: 'http://www.example.com/example sound.mp3'
      });
  
    }
  
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body onload="window.top.scrollTo(0,1);"&gt;
  
  &lt;div class="scannerform"&gt;
    &lt;form id="scanner" name="scanner" method="post" action="ok.php"&gt;
      &lt;input type="text" name="scan" id="scan" /&gt;
      &lt;input type="submit" name="button" id="button" value="Submit" /&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div class="loadingDiv" id="loadingDiv"&gt;Loading...&lt;/div&gt;
  &lt;div class="wrapper" id="wrapper"&gt;&lt;div name="data" id="data"&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;script&gt;
  $('#loadingDiv')
      .hide()
      .ajaxStart(function() {
          $(this).show();
      })
      .ajaxStop(function() {
          $(this).hide();
      })
  ;
  
  $("#scanner").submit(function(event) {
  
      $("#loadingImage").show();
  
      event.preventDefault(); 
      var $form = $( this ),
          scanned_data = $form.find( 'input[name="scan"]' ).val(),
          url = $form.attr( 'action' );
  
      $.post( url, { scanned_data: scanned_data },
        function( data ) {
            var content = $( data );
            $( "#data" ).empty().append( content );
            $("#loadingImage").hide();
            if (playSound) playSound();
            soundManager.play(SoundToPlay);
        }
      );
    });
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Response</strong></p>
  
  <pre><code>&lt;script&gt;
  function playSound()
  {
    SoundToPlay="ValidSound";
  }
  &lt;/script&gt;
  
  &lt;div id="example"&gt;Hello World&lt;/div&gt;
  </code></pre>
  
  <p>Thanks for your help!</p>
  
  <p>J.</p>