soundmanager2 html5 audio won't play on ios

Question

I have a very simple example of soundmanager2 up and running, which does not trigger in IOS:

    $(document).ready(function(){

    var introSound;

    setupSoundManager();

    function setupSoundManager(){
      soundManager.setup({

        // where to find the SWF files, if needed
        url: 'swf/',
        preferFlash: false,
        onready: function() {
          // SM2 has loaded, API ready to use e.g., createSound() etc.
          createSound();
        },

        ontimeout: function() {
          // Uh-oh. SWF missing, Flash blocked or other issue
          console.log('cant setup');
        }

      });
    }

    function createSound(){
      introSound = soundManager.createSound({
       url: 'intro-with-drums.mp3',
       // callback for when the sound has loaded
       onload: function() {
         soundManager._writeDebug(this.id + ' loaded');
         enablePlay(this);
       }
      }).load();
    }


    function enablePlay(thisSound){
      $('#sound').on('click',function(){
        introSound.play();
      });
    }



  });

Desktop goes through this phase on load:

sound0: Using HTML5 soundmanager2.js:1190 sound0: load (intro-with-drums.mp3) soundmanager2.js:1190 sound0: loadstart soundmanager2.js:1190 sound0: suspend sound0: loadedmetadata soundmanager2.js:1190 sound0: loadeddata soundmanager2.js:1190 sound0: canplay soundmanager2.js:1190 sound0: onload() soundmanager2.js:1188 sound0 loaded

and iOS only does:

sound0: Using HTML5 soundmanager2.js:1190 sound0: load (intro-with-drums.mp3) soundmanager2.js:1190 sound0: loadstart soundmanager2.js:1190 sound0: suspend

How do I get this working on iOS?

Answer 1

Most mobile browser will refuse to load/buffer any audio/video without direct, physical interaction. Meaning you cannot trigger initial playback/preloading on page load or in any asynchronous function (like setTimeout). Because of this restriction introSound never loads, which means enablePlay never gets called, which means your #sound element never gets the event listener added to it.