(HTML5) mp3 files don't play on ios browsers

[glantucan con golo lojo]

Has anyone experienced this problem? I'm completely lost. Isn't mp3 the way to go on mobile safari?
The funny part is that my sounds play on any other browser I tested, as far as it isn't running on iOS.
BTW, I'm using openfl.

[Robin Burrer]

It's a bit tricky. First of all here are some restrictions in mobile safari:
- sounds can not be preloaded
- sounds can only be initially played in response to a swipe or tap gesture
- only one sound channel can be used

So this is how I overcame these restrictions:

I created a "sound sprite" that held all the sounds I needed for my app. So basically you create on long mp3 file put all sounds in this file. You need keep track of the exact time positions of each sound. Put a small 1 sec gap between each sound. Put as well a gap before the first sound starts.
Then when you first tap on the screen (e.g. start button)- play the sound from the start and immediately stop it. This way you force safari to preload the sound. That's what first gap is for so you can't hear anything when you "preload" the sound.

Now you can jump to each sound position an play the sound you need for the length of the sound - no tapping gesture is needed anymore. A bit of workaround but it works pretty well.

It obviously make sense to create a sound manager class that handles all the playing pausing and jumping.

Hope this helps

Robin

[clemos]

BTW it might be interesting to provide a Web Audio API backend for playing sound in OpenFL to workaround some of these restrictions

With Web Audio API, even on iOS:

- sounds can be preloaded without previous user action (through XMLHTTPRequest)

- volume can be changed

- multiple channels can be played (this is the only feature I didn't test myself, but it seems obvious)

Regards,

Clément

--
To post to this group haxe...@googlegroups.com
http://groups.google.com/group/haxelang?hl=en
---
You received this message because you are subscribed to the Google Groups "Haxe" group.
For more options, visit https://groups.google.com/groups/opt_out.

[Hugh]

That is a very cunning solution!

Hugh

[glantucan con golo lojo]

Anyone?

[glantucan con golo lojo]

Oh, sorry, forgot to update the page and didn't see the answers.

Thanks Robin, that solution sounds ugly, but doable (with a lot of effort BTW, if like me have a lot of different sounds). It's a pity Apple mkes thigs so difficult for developers.

I understand this solution involves openfl. Am I right? 

[glantucan con golo lojo]

If I get it correctly, this Web Audio API could be used inserting javascript directly in my code, right? 

You are refering to this http://www.w3.org/TR/webaudio/ right?

This (http://caniuse.com/audio-api) says it's not implemented for safari on iOS previous to version 6, which makes it unusabel for me, am I right again?

[Jason O'Neil]

Robin - that is a heroic effort!  Any chance you have a sound manager class you'd be willing to share with the world? :P

[Robin Burrer]

Hi Jason,

I might need the sound utility myself for a new project. I will update it to Haxe 3 and post the link to the source then here.
And no - there is no openfl involved. But that should not stop you from using it in your openfl projects :-)

Cheers

Robin

[Jason O'Neil]

Hi Robin

I don't need it as yet, but it just sounded so impressive :)  If you do post it I'll be sure to have a look and see if it's useful for future projects.

Cheers

Jason

Robin

[tom rhodes]

Yeah Robin, with a mind as sneaky as yours you're going to end up either rich or behind bars ;)

[Bruno Garcia]

For what it's worth, Flambe (https://github.com/aduros/flambe) has Web
Audio support, and pretty fantastic mobile web support in general.

Disclaimer: I wrote it :)

Bruno

On 10/23/2013 11:36 PM, glantucan con golo lojo wrote:
> If I get it correctly, this Web Audio API could be used inserting
> javascript directly in my code, right?
> You are refering to this http://www.w3.org/TR/webaudio/ right?
> This (http://caniuse.com/audio-api) says it's not implemented for
> safari on iOS previous to version 6, which makes it unusabel for me,
> am I right again?
>
>
>
>
>
>

> El mi�rcoles, 23 de octubre de 2013 22:58:15 UTC+2, clemos escribi�:

>
> BTW it might be interesting to provide a Web Audio API backend for
> playing sound in OpenFL to workaround some of these restrictions
>
> With Web Audio API, even on iOS:
> - sounds can be preloaded without previous user action (through
> XMLHTTPRequest)
> - volume can be changed
> - multiple channels can be played (this is the only feature I
> didn't test myself, but it seems obvious)
>
> Regards,

> Cl�ment

> To post to this group haxe...@googlegroups.com <javascript:>
> http://groups.google.com/group/haxelang?hl=en

> <http://groups.google.com/group/haxelang?hl=en>
> ---
> You received this message because you are subscribed to the
> Google Groups "Haxe" group.
> For more options, visit
> https://groups.google.com/groups/opt_out

> <https://groups.google.com/groups/opt_out>.

[Nicolas Cannasse]

Le 25/10/2013 12:54, Bruno Garcia a �crit :

> For what it's worth, Flambe (https://github.com/aduros/flambe) has Web
> Audio support, and pretty fantastic mobile web support in general.
>
> Disclaimer: I wrote it :)

Are you still using AIR on Mobile as described in the README.md ?

Best,
Nicolas

[Bruno Garcia]

On 10/25/2013 07:51 AM, Nicolas Cannasse wrote:
> Are you still using AIR on Mobile as described in the README.md ?

Yes. I'd be happy to go into the reasons, but I won't derail this thread
any further ;)

Bruno

[Robin Burrer]

Hey Jason,

I uploaded a small example that use the sound sprite class. Neither very impressive nor complicated but it gets the job done :-)

https://github.com/robinburrer/sound_sprite

live example: http://burrer.de/lab/sound_sprite/ 

Should work on all modern desktop browsers and mobile safari. Did not have a chance to test it on Android yet.

Cheers

Robin

[tom rhodes]

Hey,

in chrome on android 4.3 it works perfectly.

[glantucan con golo lojo]

Hi Bruno. I heard about flambe and I'm thinking about using it for my current project. But I need to know if it works with safari for iOS 5.1.1 version, the latest iPad 1 can be updated to.

Thaks all for your answers

[Bruno Garcia]

On 10/26/2013 06:03 AM, glantucan con golo lojo wrote:
> Hi Bruno. I heard about flambe and I'm thinking about using it for my current project. But I need to know if it works with safari for iOS 5.1.1 version, the latest iPad 1 can be updated to.

Flambe works on iOS 5 Safari, but audio is disabled. HTML5 audio on iOS
is *so bad* it's not even worth supporting, especially for an old and
disappearing iOS version.

Bruno

[Robin Burrer]

Thanks for letting me know Tom!

[Robin Burrer]

Hi

the Sound-API looks promising. Although you might face be facing some restrictions here as well. 

Note: On iOS, the Web Audio API requires sounds to be triggered from an explicit user action, such as a tap... (https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html)

But according to the Apple docs it requires iOS 6 so you might be out of luck here. I used the sound sprite approach in a client project a year ago just before iOS 6 was released. So the sound API was no option for me back then. 

All I can say is that I had approx.. 30 sounds in the project and I did not experience any problems. 

Once you get started updating the sound sprite it is no more inconvenient than creating an CSS sprite. If you need a new sound you just put it after the last sound in your file. 

In my project I considered the sound class as a view. Using MMVC this "sound view" was able to respond to application and user events by using methods like "playRingSound()".

This way I very quickly forgot that I was using a workaround :-)

Robin

[Bruno Garcia]

On 10/27/2013 03:22 AM, Robin Burrer wrote:
> the Sound-API looks promising. Although you might face be facing some
> restrictions here as well.

> /Note: On iOS, the Web Audio API requires sounds to be triggered from

> an explicit user action, such as a tap...

> (/https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html
> <https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html>/)/

Yeah, it's not ideal, but it only affects the first sound. After you
react to a tap event, sounds can be played at anytime afterward, which
is an improvement over HTML5 audio.

> But according to the Apple docs it requires iOS 6 so you might be out
> of luck here.

iOS 5 is basically extinct: https://mixpanel.com/trends/#report/ios_7

Bruno

[Jason O'Neil]

Hi Robin

Thanks for posting!  Looks like an interesting approach, and similar to Image SpriteSheets, this probably has advantages on systems with high network latency, even if newer sound APIs are supported.

Great to see!

Jason

[glantucan con golo lojo]

Hi again

I've been trying the web audio api via an extern class to get access to a js API with the functions I need to load and play the sounds. That was easy... But I got the same problem as with the openfl API. Sounds would not autoplay on iOS thaks to apple restrictions. I don't know whether this aplies to flambe (BTW I didn't use it cause I'd have had to refactor my whole project)

So I'm trying to implement the Robin Burrer solution.

One of my concerns with this sort of sound spritesheet solution is that I have a lot of different dynamic content with different sound associated with them that must be loaded online. So I needed a sort of dynamic sound sprite sheet generator to dump all sounds to just one mp3 and serialize a json configuration file with the duration of each of them.

Well I created a windows patch file for this that use ffmpeg to generate the silence mp3 to separate each sound and then concatenate all the sounds together, and thought it is worth sharing here:

@ECHO OFF

SETLOCAL ENABLEDELAYEDEXPANSION

REM Batch file to create Audio SpriteSheet

REM Author: Glantucan

REM some var definitions (Subfolder must end with a \)

SET subfolder=seasons\

SET rootPath=%CD%\

SET assetsPath=%rootPath%assets\audio\%subfolder%

SET libPath=%rootPath%lib\audio\%subfolder%

REM Silence duration as decimal fractions of a second (2 means 0.2s)

SET time=1

REM Check if subfolder exists on the lib\audio folder. Exit if not.

IF NOT EXIST %libPath% (

ECHO %libPath% folder doesn't exist. Exiting...

GOTO :eof

)

REM Check if subfolder exists on the assets\audio folder. Create it if not:

IF NOT EXIST %assetsPath% MKDIR %assetsPath%

REM Only generate if the audioSprite.mp3 doesn't exist. 

IF EXIST %assetsPath%audioSprite.mp3 (

ECHO Audio SpriteSheet already generated. Exiting...

GOTO :eof

) ELSE (

goto :start

)

:start

REM Create Audio Data file

ECHO "audioData":{ > %assetsPath%audioSpriteData.json

cd %libPath%

REM Generate a silence file

ffmpeg -y -filter_complex aevalsrc=0 -t 0.%time% -ac 2 %assetsPath%0%time%s_silence.mp3

REM Measure its real duration:

REM get the duration field

FOR /f %%i IN ('ffprobe -loglevel error -show_streams %assetsPath%0%time%s_silence.mp3 ^| FINDSTR "duration=" ') DO SET duration=%%i

REM Now get its numeric value and save it to the audiodata file

FOR /f "tokens=1,2 delims== " %%a IN ("%duration%") DO SET length=%%b

ECHO "spacerLength":%length%, >> %assetsPath%audioSpriteData.json

REM write the json array for the audio sprites to the audio data file

ECHO    "sprites":[  >> %assetsPath%audioSpriteData.json

REM Create file list for concatenating all files together later

SET filelist=

REM Need the number of files to set the json data file properly

for /f %%A in ('dir ^| find "File(s)"') do set totalCnt=%%A

echo

echo Number of mp3 files:  %totalCnt%

echo

SET cnt=0

REM Operate over all mp3 files in Lib folder

FOR %%f IN (*) DO (

SET /a cnt+=1

REM update the file list

CALL :concat %%f

CALL :concat %assetsPath%0%time%s_silence.mp3

REM Measure mp3 file real duration:

REM get the duration field and write it down onto the data file

FOR /f %%i IN ('ffprobe -loglevel error -show_streams %%f ^| FINDSTR "duration=" ') DO (

FOR /f "tokens=1,2 delims== " %%a IN ("%%i") DO (

echo file number !cnt! of %totalCnt%

IF !cnt!==%totalCnt% (

ECHO       "%%~nf":%%b >> %assetsPath%audioSpriteData.json

ECHO %%~nf: duration%%b

) ELSE (

ECHO       "%%~nf":%%b, >> %assetsPath%audioSpriteData.json

ECHO %%~nf: duration%%b

)

)

)

)

ECHO    ] >> %assetsPath%audioSpriteData.json

ECHO } >> %assetsPath%audioSpriteData.json

ECHO Files to concatenate: %filelist%

REM Concatenate mp3 files

TYPE %filelist% > %assetsPath%concatSprite.mp3

REM Make sure it ends up being a proper mp3 file

ffmpeg -y -i %assetsPath%concatSprite.mp3 %assetsPath%audioSprite.mp3

REM delete temporal files.

IF EXIST %assetsPath%audioSprite.mp3 DEL %assetsPath%concatSprite.mp3

IF EXIST %assetsPath%0%time%s_silence.mp3 DEL %assetsPath%0%time%s_silence.mp3

REM Go back to root folder

CD %rootPath%

GOTO :eof

:concat

REM This was necessary becaus for some reason filelist var couldn't be concatenated with itself.

REM Not an expert on Windows Batch Scripting internals and couldn't find out why.

REM UPDATE: I wasn't properly using DELAYEDEXPANSION, see how cnt is used to detect the last 

REM file in the lib/assets folder not to write the last comma in the json file

SET filelist=%filelist% %1

GOTO :eof

It took me the whole day to refresh my ms-dos syntax knowledge and get this working so I hope you find it useful.

Regards!

Óscar

[Robin Burrer]

Wow - looks like you really need to play a lot of different sounds in your project. Let me know how you going with this and post a link when it's ready(if that is possible).

Regards

Robin

[glantucan con golo lojo]

Thanl you Robin, I will. Hope to have it finished on next week.

And yes :) they are a lot.

[clemos]

FYI I'm currently working on a Web Audio API backend for OpenFL

The goal is to support Sound as well as Microphone and SampleDataEvent.

It will have the "usual" restrictions on iOS, though (need user action to start any sound)

I'll keep you posted :)

Regards,

Clément

--

[TroyWorks]

Clément, Curious any update on this?

[clemos]

Hey,

Well it's still a work-in-progress :

https://github.com/clemos/openfl-webaudio

I mainly made it to have Microphone support, which works.

As for playing sounds, etc, it "should" work, but is clearly not tested much.

The feature of silently starting sound by capturing click is not implemented yet.

Any help is welcome :D

Best,

Clément

For more options, visit https://groups.google.com/d/optout.

[clemos]

I must also say the I had difficulties making it work with latest OpenFL/Lime.

Not sure exactly what's going on, and haven't had time to investigate a lot, 

but it certainly didn't help me completing the backend ;)

Best,

Clément