I have audio files in OGG format and embed them with:
<div class="audio-container">
<audio controls>
<source src="/u/audiofile.ogg">
</audio>
</div>
I play the embedded file with Chrome (same issue with Internet Explorer/Edge).
If the file is about 3 seconds long, the progressbar/playbar appears at the beginning as expected:
If the file is longer, in the example 25 seconds, the progressbar/playbar does not work, that means: Clicking on the playbar does not jump to the audio time:
However, after 22 seconds (3 seconds before the end), the playbar suddenly appears and the user can jump through the audio times by clicking on the playbar.
As we can see here, only after the entire OGG file has played (not only loaded, but played) the 206 partial content request suddenly works.
Of course I want that the playbar shows the entire audio length and that navigate-clicking is possible from the beginning.
How to achieve this?
Update:
I have tried a Javascript plugin (green audio player). The player shows up like this:
There is Infinity showing up. So I guess the file length is not sent by the server. And this is strange, because the file is linked directly (file system location).
The response headers look like this (for the 25 seconds file):
My Apache server replies with status code 200 for the first load. When hitting the playbar for a video it does a 206 Partial content request as needed. However, this does not happen when clicking on the audio playbar in Chrome. No request is sent.
Contrary it sends the Accept-Ranges: bytes which should enable seeking through the file:
The Accept-Ranges header indicates that the server accept range requests for a resource. The unit used by the remote web servers is in bytes. This header tells us that either the server supports download resume or downloading files.
I assume that one way of solving this issue is to always supply OGG files with 206 Partial content, already with the first request. But I could not find out yet how to enable this in the Apache server.
Notes:
I read that Apache does 206 by default, but not if caching/GZIP is enabled. So I disabled caching in htaccess (SetEnvIfNoCase Request_URI . (?:mp4|mp3|ogg|webm)$ no-gzip dont-vary) but it still does not work.
Update:
I tried with another OGG file (test.ogg). This one plays and jumping with the playbar is possible without problems!
The OGG files I am using are created by recording them browser-side (Javascript new MediaRecorder(stream);), then send to the server and stored by PHP as OGG file.
Seeing the file properties of the example file:
Seeing the file properites of the test.ogg file:
Obviously, there is meta data missing with the problematic file!
Follow up: How to save MediaRecorder stream to OGG file in PHP? Including Metadata
