mediaelements.js MP3 can not wind

Question

I have a problem with the playback of my MP3 files with mediaelements.js. In my AJAX request I get my MP3 file and set the audio src.

If I get the real MP3 by URL like:

http://host.com/real/path/tp/mp3

and set this as my audio src the player works well.

Now... When I request my MP3 through a script which gets the MP3 from my storage folder like this:

$headers = array(
    'Content-Type' => File::mime(File::extension($mp3)),
    'Content-Length' => filesize($mp3),
    'Content-Transfer-Encoding'=>'',
    'Cache-Control' => 'must-revalidate, post-check=0, pre-check=0',
);

return Response::make(readfile($mp3), 200, $headers);

The player start to play the MP3 file, but I can't wind it.: (

Response header of the real MP3 path:

HTTP/1.1 200 OK
Date: Tue, 26 Mar 2013 18:47:27 GMT
Server: Apache/2.2.16 (Debian)
Last-Modified: Tue, 26 Mar 2013 14:37:28 GMT
ETag: "8d4b852-7b7342-4d8d4dc53fa00"
Accept-Ranges: bytes
Content-Length: 8090434
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: audio/mpeg

Response header of my Laravel script which sends the MP3:

HTTP/1.1 200 OK
Date: Tue, 26 Mar 2013 19:02:33 GMT
Server: Apache/2.2.16 (Debian)
Content-Length: 6330826
content-transfer-encoding: binary
cache-control: must-revalidate, post-check=0, pre-check=0, private
Set-Cookie:     laravel_session=16f4d83c0ce0262a90df3a0229f8b8ba261eaad7%2BDZIBuW8nbRbBMT7Nvu0NGQ9Rfqaiu6SAS    1wGjYse; expires=Tue, 26-Mar-2013 20:02:33 GMT; path=/; httponly
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: audio/mpeg

I had to set the header "Accept-Range" => 'bytes' to work. Problem is fixed now. :) — Heiko K.
Can you please add this as the answer and accept it? Otherwise your question will appear unanswered and unsolved forever :( — Phill Sparks

Heiko K. Heiko K. · Accepted Answer · 2013-06-20T19:59:03

I had to set the following header:

"Accept-Range" => "bytes"

to work. Problem is fixed now. :)

mediaelements.js MP3 can not wind

1 Answers