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

score 4 · Accepted Answer · edited May 23 '17 at 12:02

4

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:

edited May 23 '17 at 12:02

Community

1
1

answered Nov 19 '12 at 15:44

Roman

5,888
26
47

Thank you. I will look further into this. But is there a simple method to fetch audio files which are outside the www root? – zer02 Nov 19 '12 at 16:02
Depending on your webserver configuration, you could create a symlink. http://superuser.com/questions/244245/how-do-i-get-apache-to-follow-symlinks – Roman Nov 19 '12 at 16:34
Do you have a working example of how to implement the range headers? I can´t a single working example... – zer02 Nov 23 '12 at 15:11
I have found this but not working http://stackoverflow.com/questions/11340276/make-mp3-seekable-php – zer02 Nov 23 '12 at 15:13
I used his script but it does not load my mp3. – zer02 Nov 23 '12 at 15:54
1

did you specify the correct content-type (second parameter to function)? `serve_file_resumable($file, 'audio/mpeg');` – Roman Nov 23 '12 at 15:59

score 3 · Answer 2 · edited May 23 '17 at 12:25

3

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");

edited May 23 '17 at 12:25

Community

1
1

answered Nov 19 '12 at 15:08

knownasilya

5,998
4
36
59

score 0 · Answer 3 · answered Apr 20 '17 at 10:13

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);

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

3 Answers3

Linked