HTML5 Audio Element \" src = get.php cannot skip position

Question

I am using the HTML5 AudioElement to play my .mp3 files, but I noticed it is not possible to skip the position. I am fetching the file via PHP from outside the www root.

I am using HTML code :

<audio src="" controls id="appAudio" style="width:1000px;margin-top:10px"></audio>

JavaScript code:

document.getElementById('appAudio').src= 'http://localhost/index.php/player/get_audio_via_php/1';

PHP code:

    $file = "/myfolder/1.mp3";
    header('Content-Type: audio/mpeg');
    header('Content-Length: ' . filesize($file));

    return file_get_contents($file);

Like I said it does play the audio file, but skipping position is not possible. Is there a solution to this?

Thank you

Answer 1

If the browser doesn't have the file in cache, "skipping" causes the browser to send a new request, with a "range" header. Your PHP file needs to handle this header.

this means:

1. get and parse the range header
2. respond to the request with status code 206 and corresponding range headers
3. output only necessary bytes

Answer 2

Have a look at this post, related to serving mp3 files via php.

The answer suggests changing the content-type to include several types:

header("Content-Transfer-Encoding: binary"); 
header("Content-Type: audio/mpeg, audio/x-mpeg, audio/x-mpeg-3, audio/mpeg3");

Answer 3

Old question... I used this, seems to be working on Chrome.

    header("Content-Transfer-Encoding: binary"); 
    header("Content-Type: audio/mpeg, audio/x-mpeg, audio/x-mpeg-3, audio/mpeg3");
    header('Content-Disposition:: inline; filename="'.$audio->filename.'"');
    header('Content-length: '.$fileSize);
    header('Cache-Control: no-cache');
    header('Accept-Ranges: bytes');
    readfile($filepath);