Safari HTML5 Audio Delay

Question

Level 1

7 points

Safari HTML5 Audio Delay

I am a web designer. I have created a line of estores which feature dynamically loaded front-end audio previews via HTML5 audio.

I understand Safari has a built in failsafe for mobile users which causes the audio to be reloaded each time causing a 2-5 second delay in audio playback.

With that being said....is there a fix? Is there a workaround? I have tried numerous API with no luck, and I cannot seem to find any documentation of anyone ever FIXING this issue or even addressing a workaround or solution.

Any help or advice would be appreciated.

API I have tried are as follows:

Ion.Sound

Howler.js

Jplayer

HTML5 Audio

Thank you,

Zak

Safari-OTHER, Mac OS X (10.7.5), Tried Ion.Sound, Howler.js, Jplayer

Posted on Mar 21, 2015 8:38 AM

Reply

Answer 1

l008com

Level 1

88 points

May 20, 2017 3:26 AM in response to zakpucci2

The original site in this question no longer exists so you can't really follow along with the details.

But this is still an issues in desktop safari. Whenever you play a sound, it delays it 1/2 to 1 second. Even if you are clicking a play button that just plays the same tiny little sound effect with each click, it will always be delayed. This has been a problem with desktop Safari for years. Compare it to Chrome or Firefox, which have nearly perfect, nearly instant audio using HTML5 audio.

But Safari desktop lags. Making a sound effect 3/4 of a second after someone clicked an object is very noticeable.

It makes more sense on iOS, but even there, it should be something you can override in code. My sound effects are tiny, yet are very important to my site (more of a webapp than a site). The sounds are smaller than the images, and the images auto-load of course. This isn't 1994.

So I'm just posting a reply to this thread to let people know that this is still an issue with Safari desktop.

Reply

Answer 2

ivlenk

Level 1

5 points

Oct 22, 2017 10:51 PM in response to zakpucci2

Even when not triggering sound on load, Safari has a delay.

When you click a button or trigger a sound in a script, Firefox and Chrome play it instantly and reliably with no delay.

Safari (10.1.2) always has a ~500ms to ~1000ms delay. It's as if the sound is not cached in RAM by Safari. It behaves as if it has to load it from the hard disk cache each time it is requested causing comparatively sluggish behavior.

JS:

var soundWav = new Audio();

soundWav.src="audio/walk1.wav";

HTML: <button onclick="soundWav.play()">play</button>

http://lenkel.com/xfer/html5sound/sound.html

Reply

Answer 3

Jul 23, 2017 10:44 AM in response to l008com

Experiencing same thing and I am a web designer too. Chrome does the job perfectly. 😐

Reply

Answer 4

etresoft

Level 8

46,626 points

Mar 21, 2015 4:23 PM in response to zakpucci2

I have never heard of this. Can you give an example?

Reply

Answer 5

zakpucci2 Author

Level 1

7 points

Mar 21, 2015 4:31 PM in response to etresoft

Sure.

Here is a site that I'm working on. Works flawlessly on Chrome, Mozilla, IE, and Opera. Yet if you try to play the audio in safari, preload and autoplay are both disabled as per Apples request, therefor causing the audio to have 2-5 second delay before audio begins. (Talking about the audio previews on the front page)

I have tried many other API, but it seems that dynamically loaded audio in Safari just doesn't want to play nice. The alternative is to load everything upfront, which will kill the page load and make the store unusable as far as performance is concerned.

http://formusiciansonly.net/demo/estores/viewstore/for-guitarists-only

Reply

Answer 6

etresoft

Level 8

46,626 points

Mar 21, 2015 6:42 PM in response to zakpucci2

There are some issues with media due to the mobile platform. Apple doesn't allow web sites to just use cellular bandwidth. But the delay you are describing happens on desktop Safari too. That's not right. Get it working on the desktop, then worry about mobile.

Your site is way too complex to debug in a couple of minutes. I see the code and where you've hacked around on it. I'm not an expert on HTML5 audio. However, I copied someone else's simple JSFiddle and it works fine on the desktop. It seems to work pretty good on mobile Safari too. I guess I don't see why you just don't do that. What are you talking about concerning "per Apple's request" anyway? Apple can't make any requests from website owners. You don't have to do what Apple tells you. Apple may disable some things on the device like autoplay on mobile, but you don't need that. You especially don't need that on the desktop.

Here is my fiddle: http://jsfiddle.net/K8J26/265/

Reply

Answer 7

zakpucci2 Author

Level 1

7 points

Mar 21, 2015 6:51 PM in response to etresoft

Well here's where the issue seems to come in; the site has way too much audio to load upfront, so the process of loading audio is as follows;

All audio is hidden on page load so page loads as fast as possible (it was very buggy with frontend loading audio)

When a preview button is clicked, the audio player and specified file is called dynamically and added to the frontend, when the stop button is clicked or audio ends, the audio player and file are once again hidden from the DOM as to not effect page load.

And what I mean about Safari is that safari has a Built in failsafe in their browser which disables preloading, so to my knowledge, the files are redownloaded to the Dom every time they are called, rather than being cached or preloaded, also according to what I've read, this translates not only on mobile, but desktop safari too.

Reply

Answer 8

zakpucci2 Author

Level 1

7 points

Mar 21, 2015 6:53 PM in response to etresoft

Basically the issue shows when audio is loaded dynamically, not when audio is loaded upfront. I guess I should have specified an error in safari when loading dynamic audio.

Reply

Answer 9

etresoft

Level 8

46,626 points

Mar 21, 2015 7:25 PM in response to zakpucci2

I see what you mean. Here is another Fiddle loading dynamically: http://jsfiddle.net/K8J26/270/

I seem to get a .5 to 1 second delay, but no more than that. Chrome does play more instantaneously. But I only see that because Chrome has cached the file between page loads. Most users probably wouldn't see a difference when clicking the button only once.

Reply

Answer 10

zakpucci2 Author

Level 1

7 points

Mar 21, 2015 8:04 PM in response to etresoft

Yeah, now make believe there are a couple dozen images, some ajax, and a small amount of animation in that fiddle, and now we run into not only the natural audio delay due to the dynamic load, but now the actual DOM delay from page size. Which then turns that 1 second, or half second into between 1 and 4 seconds.

Basically I'm looking for a solution which doesn't involve changing the entire structure of the system. I have seen some sites who load audio in safari so fast on click that it's nearly negative, but I will assume they are using CDN, or a much more up to date coding structure. Mine is mostly clunky PHP and MVC structure. I'm starting to think there really is no workaround for it, which is quite upsetting.

Reply

Answer 11

etresoft

Level 8

46,626 points

Mar 22, 2015 8:04 AM in response to zakpucci2

After the page is loaded there shouldn't be any background activity that would affect subsequent operations. I did run your site using Safari's debugger and requests for the MP3 file were instantaneous. It was only the actual start of the audio that was delayed.

It seems like your biggest problem is reliance on jQuery and premature optimization. It looks like you are re-using the same jQuery audio element and using load() instead of play(). Try creating new audio elements on click, not using jQuery, and calling play(). After stopping them, remove the element. Get that part working well. Then you can focus on optimizations as necessary.

Reply