Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>UPDATE for iOS 6:</strong></p> <blockquote> <p>This is all fixed in iOS 6. You can cache an audio file and play it via javascript without user input.<br> <strong><em>shaun5</strong> Nov 7 '12 at 0:58</em></p> </blockquote> <hr> <p>Even though it should work and there are no specifications (W3C, Apple) which say it shouldn't, I tested some scenarios and it seems like Safari on iOS is just refusing to cache the sound files.</p> <p>Safari is loading the audio file (but not the index.html) every time I reload the page, so caching is apparently not working correct regardlessly of file size.</p> <p><strong>After some research: It looks like it's not possible to cache audio files. So you may file a bug at Apples <a href="https://bugreport.apple.com/" rel="nofollow noreferrer">bugtracker</a></strong>.</p> <p>Here's my code to prove my results:</p> <p><em>index.html:</em></p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html lang="en-US" manifest="audio.appcache"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"&gt; &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt; &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt; &lt;title&gt;Cached audio&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Cached audio&lt;/h1&gt; &lt;audio controls autobuffer&gt; &lt;source src="sample.mp3" type="audio/mpeg" /&gt; &lt;/audio&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><em>audio.appcache:</em></p> <pre><code>CACHE MANIFEST # 2012-02-23:v1 # explicitly cached CACHE: index.html sample.mp3 </code></pre> <p><em>.htaccess:</em></p> <pre><code>AddType text/cache-manifest .appcache AddType audio/mpeg .mp3 </code></pre> <p><strong>EDIT</strong></p> <p>I also tried using data URIs but, that Safari keeps refusing the audio data. So I think it's not possible to cache audio …</p> <pre><code>&lt;?php function data_uri( $file ) { $contents = file_get_contents( $file ); $base64 = base64_encode( $contents ); return ( 'data:audio/mpeg;base64,'.$base64 ); } ?&gt; ... &lt;audio controls autobuffer&gt; &lt;source src="&lt;?php echo data_uri('sample.mp3'); ?&gt;" type="audio/mpeg" /&gt; &lt;/audio&gt; ... </code></pre> <p><strong>EDIT 2</strong></p> <p>Great idea, but it looks like it's not working … Safari for OS X -> ok; Safari for iOS -> still the same problem as we had before.</p> <pre><code>&lt;?php function base_64_string( $file ) { $contents = file_get_contents( $file ); return base64_encode( $contents ); } ?&gt; ... &lt;audio controls autobuffer&gt; &lt;source id="sound-src" src="sample.mp3" type="audio/mpeg" /&gt; &lt;/audio&gt; ... &lt;script&gt; (function(){ var sound; if ( localStorage.getItem('cachedSound')) { sound = localStorage.getItem('cachedSound'); } else { sound = "&lt;?php echo base_64_string('sample.mp3'); ?&gt;"; localStorage.setItem('cachedSound',sound); } document.getElementById("sound-src").src='data:audio/mpeg;base64,' + sound; })(); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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