Howler.js: howler takes time to play audio on safari

[ajitkhatke]

when i load the page and click a button to play audio. it takes 10 sec to play audio. every time it takes time to play. even if i stop audio and play it again. it still takes time to play audio. desparately need to cut this waiting time.
note: This issue is occured on ios.

[alexhackney]

I have the same issue with streaming audio in any browser. Page loads and is ready to play. I hit play and it buffers up 9-10 seconds before I hear audio. Not sure why this is happening?

[goldfire]

Please provide a code sample.

[Joshfindit]

Is there a chance that this is a bandwidth/latency problem?

[alexhackney]

@ajitkhatke Did you solve your issue?

[ajitkhatke]

not really ..just fixed it with a patch of code. can't say it solved.

[alexhackney]

Care to share what you did? I'm still having the issue. When you load the page and click play it loads for almost 10secs before audio plays.

[ajitkhatke]

i used audio.js. you can try it if you want.

[pahund]

As far as I can see, this is a limitation of the web audio API (HTML5). When you use it to play a stream of encoded audio, the browser always buffers the audio for some seconds. I've been trying to find a way around this for days. I know Spotify and SoundCloud can pull of low-latency audio streaming, but how, I cannot tell.

[alexhackney]

I think one thing they probably do is not use mp3. I've noticed aac streams
load much faster.

On Sat, Sep 7, 2019 at 1:37 AM Patrick Hund [e-mail]
wrote:

As far as I can see, this is a limitation of the web audio API (HTML5).
When you use it to play a stream of encoded audio, the browser always
buffers the audio for some seconds. I've been trying to find a way around
this for days. I know Spotify and SoundCloud can pull of low-latency audio
streaming, but how, I cannot tell.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/goldfire/howler.js/issues/1172?email_source=notifications&email_token=ABEAC2SWZJYDL2HGXN4SN73QIM4ZDA5CNFSM4HIU2MZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6EQ2LI#issuecomment-529075501,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABEAC2UII64Y4Z7DVCZAU6TQIM4ZDANCNFSM4HIU2MZA
.

[pahund]

@alexhackney

That goes without saying, you need to stream a compressed format like mp3 or ogg. With my current project, I succeeded in getting a low latency stream going with uncompressed wav format, but the server could not handle more than one or two concurrent clients. So now I'm using Howler.js, streaming mp3. Latency is around 5 seconds. I'm trying to work around that instead of trying to fix it now.

[st-h]

the last time I looked, I got the impression that Soundcloud manages its own streaming implementation, as they split their files into small mp3 chunks (each about 10 seconds long). You can easily check by opening the network inspector before playing a file. I was just a little surprised that it actually seem to be mp3 files, as I read that they moved to opus a while ago.

[pahund]

@st-h yeah, that's what I suspect, too. I tried to go down that way, and then realized it's going to be way too much effort for a 1-man-team to pull this off.

[st-h]

@pahund hmm, I came across phonograph a while ago. I have not tried it so far, but that could probably help. Please let me know how it goes in case you try it. Then there is always the possibility to leverage service workers and opus to implement streaming and decoding yourself - but, this will likely not be much less work than using little mp3 chunks. There also is this repo. I think this currently is quite an unsatisfactory situation, as by the time we are talking about iOS there is no alternative, as other browser just have to use the same buggy engine as safari. If they at least would support Audio Worklets ... or just start to read their bug reports...

[alexhackney]

@pahund aac is compressed. Did you try it?

[pahund]

@alexhackney No, haven't tried it, but I doubt it will help.

The problem is that to get low-latency audio to play, you use can use the Web Audio API's decodeAudioData method, but this is only meant to be used with complete tracks, not with streams, quote:

This method only works on complete file data, not fragments of audio file data

I managed to get this to work with an unencoded PCM stream by added a wav header to every chunk of the stream, as described here.

I thought, naïvely, “OK, I can just create an mp3 stream and add an mp3 header to every chunk then”, but that's not how mp3 works.

[pahund]

@st-h _phonograph_ looks promising, thanks! I'll try that and report how it went!

[alexhackney]

@pahund As someone who manages streaming for 9 terrestrial stations, I can tell you aac is better for low latency streaming. The buffering that the browser does for mp3 takes longer. Just using aac makes everything faster.

I would also look at Amplitude.js

[pahund]

@alexhackney I've tried your suggestions:

• using Amplitude.js, seems to be a better choice for streaming than Howler.js, because it supports pausing a stream, thanks for the tip!
• using AAC – sadly, the latency is even worse, it now takes more than a minute for my live audio to be played by the browser

To see if the problem is with my software, I've tried using FFmpeg, sending a stream to an Icecast server, the delay is still the same, more than 60 sec.

I'm using this command to create the AAC stream with FFmpeg:

ffmpeg -f avfoundation -i "none:4" -c:a aac -content_type 'audio/aac' -vn  icecast://source:MY_SECRET_PASSWORD@localhost:8000/stream.aac

Perhaps you have a tip for me for tweaking the the AAC encoder to make it more efficient? I'm still very new at all this stuff and have a hard time making sense of all the FFmpeg options.

[pahund]

@st-h I've looked at phonograph, but it looks like it doesn't support live streams, and it doesn't work on Firefox, which is a no-go for me

[xerosanyam]

lots of good recommendations here:

• amplitudejs
  for most people who just want to play audio in ios reliably, I think howlerjs is better than amplitude.
  I tried playing the demo of amplitudejs: https://521dimensions.com/open-source/amplitudejs.. it doesn't play reliably in safari desktop(ios would be worse), however, howlerjs demo was working each time(after refreshing the page).

• aac over mp3
  WIP(will update soon)