SoundManager2 on iPhone - Sound not playing on jQu

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.

This all works without a hitch on the desktop, but when running on the iPhone, it fails.

The Debugging Console on the iPhone shows it trying...

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

...but no sound every plays.

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:

Main

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="sm/script/soundmanager2.js"></script>
<script> 
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'
    });

  }

});
</script>

</head>

<body onload="window.top.scrollTo(0,1);">

<div class="scannerform">
  <form id="scanner" name="scanner" method="post" action="ok.php">
    <input type="text" name="scan" id="scan" />
    <input type="submit" name="button" id="button" value="Submit" />
  </form>
</div>

<div class="loadingDiv" id="loadingDiv">Loading...</div>
<div class="wrapper" id="wrapper"><div name="data" id="data"></div></div>

<script>
$('#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);
      }
    );
  });
  </script>
</body>
</html>

Response

<script>
function playSound()
{
  SoundToPlay="ValidSound";
}
</script>

<div id="example">Hello World</div>

Thanks for your help!

You do know iPhone Safari has sound limitations applied? Basically it will not play sound without user interacting with a page somehow (via touching screen). So forget about automatic sound being played via "onLoad" or any other event.

With SoundManager2 and my iPhone though, I find it a bit tricky sometimes.. I'm pretty sure it plays sound (even several) automatically after I finger-click at least 1 time in my app (for example closing initial html popup ( basically))

So check this lead at least...

Tomasz

Resources:

http://buildingwebapps.blogspot.com/2012/04/state-of-html5-audio-in-mobile-safari.html

http://blog.logicking.com/2012/03/cross-platform-sounds-for-html5-games.html