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

Question

I am using HTML5 AudioElement to play my .mp3 files, but I noticed that you cannot skip the position. I am extracting the file via PHP due to 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); 

As I said, it plays an audio file, but skipping a position is impossible. Is there a solution to this?

thanks

Answer 1

If the browser does not have a cache file, a “skip” causes the browser to send a new request with a “range” header . Your PHP file should handle this header.

it means:

• get and analyze range header
• respond to a request with a status code of 206 and the corresponding range headers
• outputs only necessary bytes

Answer 2

Take a look at this post related to mp3 files via php .

The answer suggests changing the type of content 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 it, it seems to work 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);