Audio element duration returns "Infinity" when website is accessed through Cloudflare's CDN

General
1

I’m developing a minor private hosting platform for myself and a couple acquaintances, and I’ve encountered a minor issue upon enabling Cloudflare’s CDN.

For an unknown reason the “duration” of the audio element now returns “Infinity”, and this prevents the audio player from working properly.

This only occurs when the website is accessed through the CDN, while accessing it through the direct IP works properly.

Is there some kind of JS workaround for this issue that doesn’t involve loading the entire audio file first, or do I need to check the audio length server-side and then provide it to the client?

2

I cant really confirm that. There is a difference between Clouflare and non-Cloudflare but - while I am surprised by that, as that shouldnt happen - it does not prevent the player for working. It does show “Infinity” briefly but quickly switches to the correct value.

I’d start by debugging the AudioPlay function in your filePreview.js file.

3

It might have something to do with how (quickly) the audio file is being loaded. If you wait until everything is loaded, it also works on Cloudflare without “Infinity”. For some reason it seems to take longer on Cloudflare and in that case the audio player cant yet determine the length and hence the timing data cant be calculated either.

My best guess at this point would be some rate limiting on your server side, that possibly restricts concurrent connections from Cloudflare in a too strict fashion.

4

Thanks for the troubleshooting, from my experience and the reports of end-users the issue seems to be

document.getElementById("audioPreviewPlayer").duration

Returning infinity instead of the proper value, this call will return the proper value in the following scenarios:

  1. CDN is bypassed
  2. CDN audio has been fully loaded from beginning to end

I’ve not really seen any other property i could get the file duration from, so I guess I’ll just handle audio files on the backend with ffmpeg, although it is mildly annoying.

6

I’d look into what the difference in audio loading is and if the rate limiting theory I mentioned earlier might apply. Should that be the case you could possibly tweak your origin. Just speculation :slight_smile:

7

I’ve been researching this over the past couple of days and I’ve come to the realisation that this is caused by Cloudflare not sending the content-length header, this causes an issue in chrome but not in firefox, hence the infinite audio duration and being unable to seek as described on this page.

That said, I still don’t know how to resolve this, asides from some kind of server side solution where the content-length header is dynamically generated for files and then forced

8

That explains why I couldnt really reproduce the issue.

Maybe you can implement a prior call where you return the duration of the audio file and use that instead of the built-in duration field and relying on the content length.

9

This topic was automatically closed after 14 days. New replies are no longer allowed.