Is there any way of storing audio- / video-elements in the browser cache in Safari in iOS?

Question

Level 1

0 points

Is there any way of storing audio- / video-elements in the browser cache in Safari in iOS?

Hi there,

I'm desperatly trying to find a solution for a web application that has to run on an iOS-Safari (e.g. on iPad, iPad2 and iPhone 4):

It's a web-application I wrote some time ago which lets the user search for and listen to short music samples (MP3s, all from ~100 kB to ~1.5 MB). The audio player is Flash-based, so it doesn't work on iOS-devices at the moment and I'll have to implement an alternative either in HTML 5 or with a "direct" QuickTime-object.

Both my HTML 5- and QuickTime-alternatives for iOS-devices work fine so far, but there's one major problem I can't find a solution to:

Unlike Flash and most HTML 5-capable browsers on Windows Safari on my iPad 2 won't store the audiofiles in the browsercache after loading and playing them - neither with HTML 5 audio-tags nor with a QuickTime-Object. Every time I load an audio file for playback from the server (with JavaScript-Commands, so without changing or reloading the whole page) it's downloaded again completely.

If a user listens to sample A and then to sample B, Safari forgot about having played sample A and downloads the whole MP3 again if I like to listen to it again. On a mobile device with a potentially narrow bandwith this behaviour is out of the question.

Is there a way of storing downloaded audiofiles opened by HTML 5 or QuickTime in Safari's cache so it remembers already having downloaded them - like it caches usual "web-files" like HTML, CSS or JPEG-images, or like Flash stores such objects in its local cache?

The Application Cache with a manifest-file is not an option - this only seems to work if the browser is offline, for example if the iOS-device is in "Airplane"-Mode.

iPad 2, iOS 4.3.3

Posted on Jul 22, 2011 9:44 AM

Reply

Answer 1

cpw83 Author

Level 1

0 points

Jul 23, 2011 5:57 AM in response to K T

Yes, I watched it. It contains interesting stuff I have to admit I didn't know yet, but unfortunately I still can't find a solution to my problem:

My first attempt was trying to use the Application Cache with a manifest file - although this is not really the intended purpose for my application... I don't have a static set of files that I want to have cached or "available offline" - I just want to cache MP3s which the user has played yet.

It should be possible to use a "dynamic manifest": One that is parsed by the Apache PHP module and listing the files played so far from a PHP session - something like this:

<?php

session_start();

header("Content-Type: text/cache-manifest, charset=UTF-8");

echo "CACHE MANIFEST\n";

foreach($_SESSION['playedSongs'] as $song)

{

echo $song."\n";

}

?>

So whenever a song is loaded / played, I could access the PHP session with AJAX, insert the filename of the played file and manually update the manifest by calling window.applicationCache.update().

There are two problems with this:

First of all: It doesn't work. And I didn't even get to the point of trying to use a dynamic manifest:

<!DOCTYPE html>

<head>

function playStuff(id)

{

if(id == 1)

{

window.document.getElementById("audio").innerHTML = '<audio controls preload="automatic" autobuffer><source src="song01.mp3" type="audio/mp3" /></audio>';

}

else if(id == 2)

{

window.document.getElementById("audio").innerHTML = '<audio controls preload="automatic" autobuffer><source src="song02.mp3" type="audio/mp3" /></audio>';

}

</script>

</head>

<body>

<br />

</body>

</html>

The cache.manifest looks like this:

CACHE MANIFEST

song01.mp3

song02.mp3

and is properly returned from Apache as "text/cache-manifest" by adding

AddType text/cache-manifest manifest

to the .htaccess of this directory.

The Apache-logs clearly show that the Safari (respectively "AppleCoreMedia") doesn't care about the application cache when it comes to audio-files:

Safari itself seems to acknowledge the manifest and indeed preload the files:

192.168.0.40 - - [23/Jul/2011:12:45:46 +0200] "GET /websql/index2.html HTTP/1.1" 200 2619 "-" "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"

192.168.0.40 - - [23/Jul/2011:12:45:46 +0200] "GET /websql/cache.manifest HTTP/1.1" 200 79 "-" "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"

192.168.0.40 - - [23/Jul/2011:12:45:46 +0200] "GET /websql/cache.manifest?%3E HTTP/1.1" 200 79 "-" "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"

192.168.0.40 - - [23/Jul/2011:12:45:46 +0200] "GET /websql/song02.mp3 HTTP/1.1" 200 120525 "-" "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"

192.168.0.40 - - [23/Jul/2011:12:45:46 +0200] "GET /websql/song01.mp3 HTTP/1.1" 200 120525 "-" "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"

Up to this point I did nothing but opening my test-application in Safari.

Playing song01.mp3:

192.168.0.40 - - [23/Jul/2011:12:47:25 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 2 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:47:25 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:47:25 +0200] "GET /websql/song01.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:47:25 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:47:29 +0200] "GET /websql/song01.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:47:29 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

Playing song2.mp3:

192.168.0.40 - - [23/Jul/2011:12:48:04 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 2 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:48:04 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:48:04 +0200] "GET /websql/song02.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:48:04 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:48:05 +0200] "GET /websql/song02.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:48:05 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

Playing song1.mp3 again:

192.168.0.40 - - [23/Jul/2011:12:48:38 +0200] "GET /websql/song01.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:48:38 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:48:38 +0200] "GET /websql/song01.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:48:38 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:48:40 +0200] "GET /websql/song01.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:48:40 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

Playing song2.mp3 again:

192.168.0.40 - - [23/Jul/2011:12:49:12 +0200] "GET /websql/song02.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:49:12 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:49:12 +0200] "GET /websql/song02.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:49:12 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:49:13 +0200] "GET /websql/song02.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

192.168.0.40 - - [23/Jul/2011:12:49:13 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

Every file is downloaded again completely when playing it. So "AppleCoreMedia" (whatever this may be exactly, the QuickTime-plugin that is triggered by the HTML 5 audio-element I suppose?) either doesn't have access to the Application Cache or simply just doesn't realize the files in it. So if I switch my iPad to "Airplane Mode" now, the Safari is unable to access / load / play the files.

I also tried using a QuickTime-object instead of an HTML 5 audio-tag (as far as I know HTML 5 audio and video in Safari always use QuickTime?) and controlling it with something like:

document.movie1.SetURL('song02.mp3');

Nothing changes, it's just like using HTML 5 audio and everything gets downloaded again when loading/playing it.

And even if this would work there'd still be a problem:

To properly implement that I would have to load the MP3-file in the Application Cache before playing it. When doing this it seems impossible to show a "real" progress: The ProgressEvent that is fired from the Application Cache after updating it doesn't seem to provide any information about data loaded so far and the complete size of a file. It's just "File 1 from 2" and so on, and not a "real" progress where I could determine something like: "100 kB of 1.2 MB loaded" as I can with the audio-element.

All the other storage-approaches like Web SQL / Web Database or Local Storage are no help either:

I don't see any way of getting the MP3 data into Local Storage or Web Database or getting it out again to play it. The HTML 5 Canvas-element has a toDataURL()-function to produce a Base64-encoded representation and use it for storage - the Audio-element doesn't seem to have anything like this.

My last really "dirty" approach was trying to load "manually" Base64-encoded-MP3s with a combination of AJAX and PHP: A PHP-script outputs a Base64-representation of a MP3-file and is loaded by AJAX, so I could store the Base64-representation e.g. as Local Storage or in Web Database:

<?php

$infile = 'song01.mp3';

$contents = file_get_contents($infile);

$base64 = base64_encode($contents);

$audio = 'data:audio/mp3;base64,'.$base64.'';

echo $audio;

?>

I tried using the resulting AJAX responseText as the source-argument in an audio-source-tag. Suprise: It doesn't work in Safari on my iPad 2, the player just fails to load the "file", although this works fine in Chrome on Windows. Possibly a size limitation for Base64-URIs on Safari / iOS.

And again: Even if this was working in iOS/Safari I don't know of a way to determine a real progress from an AJAX-query...

The last thing I could think of is not replacing the audio- or source-tags when loading a song but leaving them in the DOM-structure, check if it's already there when a song is loaded and just add a new audio-tag if a song hasn't been loaded yet.

This solution would be my last resort: I'd have to rewrite nearly the whole application to completely operate on JavaScript / AJAX to stay on one site in the browser - else the "cached" audio data would be lost again when changing to another site in Safari.

Furthermore I think there'll be a small cache limit somewhere when doing this?

Any ideas?

Reply

Answer 2

cpw83 Author

Level 1

0 points

Jul 24, 2011 5:47 AM in response to cpw83

cpw83 wrote:

The last thing I could think of is not replacing the audio- or source-tags when loading a song but leaving them in the DOM-structure, check if it's already there when a song is loaded and just add a new audio-tag if a song hasn't been loaded yet.

Great... doesn't work either...

If you add multiple player-instances dynamically (again no matter if HTML 5 <audio>-tags or QuickTime-objects) instead of "overwriting" them, Safari forgets about ever having loaded the first MP3 as soon as you even insert a new <audio>- or QuickTime-Element into the DOM tree - you don't even have to load / play something in the new instance! Repeated playback without complete reloading of the file just works as long as you don't playback or insert anything else audio / media related.

This produces lots of unnecessary traffic and takes unnecessary long time if you're in a cellular network with a low bandwith!

I'm working at this problem for three days now without even coming close to a solution...

Reply

Answer 3

K T

Level 7

23,889 points

Jul 22, 2011 9:55 AM in response to cpw83

Seen Apple Developer on iTunes/iTunes U WWDC 2011 Session 515 - ''Using HTML5 Offline Storage' ?

Reply