[Solution] : no-lag audio SFX on ios

0 favourites
From the Asset Store
142 8-bit JRPG sound effects. Suitable for any pixel art game.
  • I needed html5 audio on ios 5 (ipad exactly) for a client. Since the audio support on MobileSafari and UIWebView is somewhat sketchy, it was impossible to certify a sound playing on touch without lag (or sometime no sound at all).

    Here's the limitation for the audio tag on iOS5 (and previous) : you can't initiate (preload or play) a sound without a user interaction first. Even after that, you can't be sure when the audio file is going to be loaded or streamed, and you don't know when it's going to stop. Furthermore, no possibility to play several sounds mixed together.

    I then remembered of the concept of "audio sprites". You load a sprite consisting of all your SFX pasted in a unique file, and then you move the head along the file when you need to play a specific sound.

    I found two implementations for Javascript (https://github.com/koggdal/AudioSprite & remysharp.com/2010/12/23/audio-sprites/), and chose the first one.

    Here's the demo http://dl.dropbox.com/u/1412774/AudioSpriteExample/index.html (you're not going to hear any sound if you are not using an ipad or an iphone to access it...). I tested it against iOS 4.X & iOS 5.

    Since I don't have access to the core C2 script (and injecting something inside the prettyfied minified JS is not something I can handle without breaking things), I added the JS file inside the HTML page exported by Construct.

    So you need to :

    1) put http://dl.dropbox.com/u/1412774/AudioSpriteExample/audiosprite2.js inside your exported game folder, next to your index.html

    2) concatenate all you audio SFX inside a single audio file. Put blank audio part between your sounds, and make a quick note of the starting and ending timing for each one of them (in milliseconds. You can use something like Audacity).

    3) put a file like http://dl.dropbox.com/u/1412774/AudioSpriteExample/audiomodif.js at the root, and modify it to reflect you audio structure.

    In the create function, you need to add the number of samples, and their timing.

    function create(){

         sprite = new AudioSprite("audiosprite.mp3", [ { start: 50, length: 450 }, { start: 800, length: 900 }, { start: 1601, length: 2200 } ])

         sound1 = new Sound(sprite, 0);

         sound2 = new Sound(sprite, 1);

         sound3 = new Sound(sprite, 2);


    Don't forget to add a var and a function to play each of those sounds !

    var sound4;

    function play4(){



    4) By using the wonderful CallJS plugin (http://www.scirra.com/forum/plugin-call-javascript_topic45866.html), you can bind the create() and play() functions of your external JS to actions inside your C2 game.

    4.1) Since it's a limitation of iOS, you need to start the sound loading by initiating a user action. I "force" him to click on something on screen, and bind that action the the create() function with CallJS (you can see the example here http://dl.dropbox.com/u/1412774/AudioSpriteExample/AudioSpriteExample.capx).

    4.2) I attach the various "playX()" calls to the various objects inside my C2 scene.

    And.... DONE !

    Some caveats, though : you can only play one sound at a time with JS on iOS (it steams from the fact that javascript can only send one sound buffer at a time to the decoder, and can't premix those buffers). So you're not going to be able to play a background music and sound SFX on top of that.

    Before yelling that is doesn't work, check the file format you are using oin the platform for your concatenated sound (.mp3/.m4a and not .ogg for iOS), and double check that the embedded url inside your JS file reflect that.

  • nice find! quite interesting, i tried it and it works well

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Interesting idea! Maybe we can better integrate this to Construct 2 in future.

  • I tested this on my iPhone4. It works great online, but unfortunately in offline mode there is no any sounds because there is no caching audio by iOS (Safari Mobile)!

    Anyway, it seems it is a horror to get playing sounds on iPhone via HTML5!

  • ssusnic: yes, I saw that. The cache manifest doesn't work for audio files in iOS (yay for web standards supports !) You should find a workaround by using webstorage. I don't know if it's easy to store binary audio file as large, but you can use base64 as a workaround (!) (that is strange that some browsers choke on big binary media files, but they can manipulate it more easily in text form, but hey, it's like that...)

  • I tried this on my iphone today and it works! Im gonna use thie method now :D Allthough its a little long winded, Hopefully construct will implement this soon!!

  • Hey Pode

    I cant get it to work.

    I tried it in my own capx.

    When i try to set it myself through the use of your example capx and step guide, i am unsuccesfull because of my lack of knowledge.

    And i have allready spend lots of hours hours trying everything.

    My question.

    I could upload my full game capx so u could take a look but, i think the shortest way for u is to zip the contains of the Demo-capx with the .JS files and the soundfile.

    Then i can upload that to my server/test run it, and replicate exactly what u did and learn from it.

    That way i am starting with something that allready works.

    At this point (in my capx) im troubleshooting in the dark.

    It would be really great!

    <img src="smileys/smiley20.gif" border="0" align="middle" />

  • Savvy001 : do you mind if I check that next week ? I won't be able to do that this week-end.

  • Pode

    No problem u need the time u need.

    Il be glad to see it comming when u are ready to.

  • Hello,

    it works on my Iphone now,

    but is looks little slow,

    how can I use Webstorage for a file?

    any idea?


    best regards,

  • Hey Pode.

    Any chance u could zip the contains of the Demo-capx with the .JS files and the soundfile?


  • Savvy001 : here's the link of the whole thing : http://dl.dropbox.com/u/1412774/AudioSpriteExample/AudioSpriteExample.zip

    I'm really sorry I didn't answered you before, the workload is heavy !

  • Thanx allot!

    And no problem at all.

  • Hi it doen't seems to work with new release "90". any chance to see why it isn't working? I exported the example with new release, put all the files where they should be and nothing.

    Please help.

  • Same problem as Maciej, the source app works well ...until saved with C2 r90 ...

    I've try to put "audio.loopSprite = true" in audiosprite2.js and i've test the result on IE9 ... works perfectly with multi instances of looping sounds !!! ... on iOS the only one sound at a time limit still occurs ... even if more than 1 instance of app is launch, only focus app produce play sounds.

    Link for audiosprite with IE9

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)