Databases
StackOverflow2013
Postsdbo
POProvide a mp3/ogg file in pieces to html5 audio
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProvide a mp3/ogg file in pieces to html5 audio
    primarykey
    data
    text
    <p>I'm trying to provide a audio file through a browser using HTML5 audio tag:</p> <pre><code>&lt;audio preload="auto"&gt; &lt;source src="&lt;?php echo $song-&gt;getUrl('mp3'); ?&gt;" type="audio/mpeg"&gt; &lt;source src="&lt;?php echo $song-&gt;getUrl('ogg'); ?&gt;" type="audio/ogg"&gt; Please update your browser. &lt;/audio&gt; </code></pre> <p>I need to save traffic, so I thought about sending partial content this way:</p> <pre><code>$contentType = ($format == 'mp3') ? 'audio/mpeg' : 'audio/ogg'; $filePath = $song-&gt;getPath($format); $fileLength = filesize($filePath); $start = 0; if(isset($_SERVER['HTTP_RANGE']) &amp;&amp; !empty($_SERVER['HTTP_RANGE'])) { $http_range = explode('-', substr($_SERVER['HTTP_RANGE'], strlen('bytes='))); $start = $http_range[0]; } $remainingBytes = $fileLength - $start; $length = min((512*1024), $remainingBytes); $final = $start + $length; header('HTTP/1.1 206 Partial Content'); header('Status: 206 Partial Content'); header('Content-Type: ' . $contentType); header('Content-Disposition: inline;filename="listen.' . $format . '"'); header('Content-length: ' . $length); header('Content-Transfer-Encoding: bytes'); header('Accept-Ranges: bytes'); header('Cache-Control: no-cache'); header('Content-Range: bytes ' . $start . '-' . $final . '/' . $fileLength); echo file_get_contents($filePath, false, null, $start, $length); </code></pre> <p>The result of this is, in Chrome, the song being almost completely played (3.41 out of 3.47 seconds of a 9.1MB file). In firefox, the first 39 seconds played (I guess 512KB). In opera, a never-ending "loading" status.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPradeep Pati
    1. USgabrielanca
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COWhy do you think splitting it in pieces would save you bandwidth? You still have the serve the whole file if you want people to play the whole file.
      singulars
      1. POProvide a mp3/ogg file in pieces to html5 audio
      1. USBrad
    2. COSorry, I made a terrible mistake. You're completely right, I cannot save bandwidth with this idea. I meant I need to save user's time by letting them play while the song is being fully downloaded. Thanks
      singulars
      1. POProvide a mp3/ogg file in pieces to html5 audio
      1. USgabrielanca
    3. COYou just need to enable streaming then for your audio tag. Nothing is needed server-side.
      singulars
      1. POProvide a mp3/ogg file in pieces to html5 audio
      1. USBrad
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload