title: Safari audio file duration = infinity – how to fix?
body: <p>I have the following problem which drives me crazy:</p>
  
  <p>I play an audio file on a webpage:</p>
  
  <pre><code>&lt;audio ref="audio" preload="metadata" class="AudioPlayer__audio"&gt;
    &lt;source src="file" type="audio/mp3" codecs="mp3"&gt;
    &lt;p&gt;Your browser doesn't support HTML5 audio. Here is a &lt;a href="file.mp3"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
  &lt;/audio&gt;
  </code></pre>
  
  <p>I have built a custom timeline which needs to know the duration of the file.
  Now this works fine except if I deploy it.</p>
  
  <p>On my remote the duration of the audio file is <code>infinity</code>.
  Obviously and how I read in other threads this is due to the fact that Safari makes two requests:
  The first one just trying to get some bytes. <code>Range: bytes=0-1</code>
  This request fails.
  After that Safari makes another request trying to get the file without the range stuff, which succeeds, but somehow the audio duration is <code>infinity</code>.</p>
  
  <p>I read stuff about Headers and that the must allow ranges, but I don't really know much about Headers and how to fix this specific issue.</p>
  
  <p><a href="https://i.stack.imgur.com/fFkTm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fFkTm.png" alt="enter image description here"></a></p>
  
  <p>Here you can see the request and the response.
  It seems to me that range is allowed because I see:
  <code>Accept-Ranges: bytes</code></p>
  
  <p>What else am I missing, and how would I even make changes to those headers?
  The response header probably would need some changes on my netlify settings,
  but what about my request headers? And is this even the problem?
  I have no real clue where I could go on debugging this issue.</p>
  
  <p>thanks for any pointers.</p>
  
  <p>Cheers</p>